详解如何使用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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript打印输出json实例
Nov 11 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS实现手写 forEach算法示例
Apr 29 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
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Pytorch之parameters的使用
2019/12/31 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python中实现词云图的示例
2020/12/19 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
预备党员承诺书
2014/03/25 职场文书
三问三解心得体会
2014/09/05 职场文书
高三毕业评语
2014/12/31 职场文书
大学生个人学年总结
2015/02/15 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
浅谈Java父子类加载顺序
2021/08/04 Java/Android