详解如何使用Node.js实现热重载页面


Posted in Javascript onMay 06, 2021

前言

前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面。

那么,我今天就总结一下吧,以防止大家也跟我一样。

热重载

所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。

热更新

浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。

目的:加快开发速度,所以只适用于开发环境下使用。

思路:保留在完全重新加载页面时丢失的应用程序的状态,只更新改变的内容,以节省开发时间,调整样式更加快速,几乎等同于在浏览器调试器中更改样式。

实战

一、初始化项目

这里使用以下命令初始化项目。这里使用-y后缀我是为了更快更方便地初始化,如果你想自定义的话,可以一行一行的敲。

npm init -y

初始化完成,根目录下多了一个package.json文件。

二、创建Node主文件app.js

下面,我们将创建一个Nodejs操作主文件app.js。

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const path = require('path');
const fs = require('fs');
const io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, './public')));
createWatcher();

function createWatcher() {
  const absolute = './public';
  fs.watch(absolute, function (eventType, filename) {
    if (filename) {
      io.sockets.emit('reload');
    }
  });
}

server.listen(8086, function () {
  console.log(`The server is running on port 8086.`);
});

首先,我们使用http、express结合创建了一个http服务器,又同时与socket.io绑定。然后我们又利用express托管静态文件,指定静态文件目录public。我们这里使用了fs模块下的watch方法,用于监听文件目录的变化。如果目录下的文件改变了,那么就会触发io.sockets.emit('reload');这行代码。既然触发了那肯定要有地方监听。

三、创建index.html文件

我们会在根目录下创建一个public文件夹,文件夹内创建一个index.html文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>热更新页面</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow"  />
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <p class="txt">文本</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <p class="name"></p>
    <script src="./socket.io.min.js"></script>
    <script src="./index.js" type="module"></script>
    <script type="module">
      import obj from './index.js';
      io.connect('http://localhost:8086/').on('reload', () =>
        window.location.reload()
      );
      document.querySelector('.name').innerHTML = obj.name;
    </script>
  </body>
</html>

文件内容如上,我们首先需要关注的是怎么与后台监听,我们只需要引入socket.io.min.js文件(文件我会在文末给出源码地址),然后在下面键入以下代码:

io.connect('http://localhost:8086/').on('reload', () =>window.location.reload());

http://localhost:8086/ 这是后台的地址,需要监听这个地址,才能跟后台进行通信。因为后台我们自定义了一个reload事件,前台也只需要监听这个事件。如果后台触发了这个事件,那么前台就会监听到,随机执行代码。

四、创建其他类型的文件

我们可以在上面的index.html文件中看到了我外部引入了index.js文件与style.js文件。主要是检测如果改变其中的代码,页面是否也相应的改变,答案是肯定的。

五、实时更新页面

我们首先启动项目。

node app.js

会看到终端下会显示The server is running on port 8086.,然后就可以在浏览器打开http://localhost:8086/这个地址。我们更改下代码,就可以看下页面实时显示,并且是按下快捷键保存代码时(这里推荐编辑器不要实时自动保存代码),页面就实时更新。

这样是不是很省事了,不会每次切换页面点击刷新页面了。想当初使用JQ写页面时,当初真是觉得自己太傻了,每次都重复劳动。

结语

谢谢阅读,希望没有浪费你的时间。

源码地址:https://gitee.com/maomincoding/hot-load

到此这篇关于详解如何使用Node.js实现热重载页面的文章就介绍到这了,更多相关Node.js热重载页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
在JavaScript中如何使用宏详解
May 06 #Javascript
如何用JS实现简单的数据监听
May 06 #Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
JScript的条件编译
2007/05/29 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
小学美术教学反思
2014/02/01 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
司机职责范本
2014/03/08 职场文书
节能减排倡议书
2014/04/15 职场文书
大学生社会实践方案
2014/05/11 职场文书
农村党员对照检查材料
2014/09/24 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书