详解如何使用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 :nth-child前有无空格的区别分析
Jul 11 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
谈谈JS中的!!
2017/12/07 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Python转码问题的解决方法
2008/10/07 Python
python发腾讯微博代码分享
2014/01/10 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
优秀演讲稿范文
2013/12/29 职场文书
创业计划书如何编写
2014/02/06 职场文书
安全协议书范本
2014/04/21 职场文书
小学课外活动总结
2014/07/09 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
初一数学教学反思
2016/02/17 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
MySQL 数据类型详情
2021/11/11 MySQL