详解如何使用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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
AngularJS表单基本操作
Jan 09 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python进程和线程用法知识点总结
2019/05/28 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
物理教学随笔感言
2014/02/22 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
员工家属慰问信
2015/03/24 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL