詳解如何使用Node.js實現(xiàn)熱重載頁面
前言
前不久我結(jié)合browser-sync+gulp+gulp-nodemon實現(xiàn)了一款生產(chǎn)環(huán)境熱更新（我之前理解有點偏差，應(yīng)該定義為熱更新，不是熱重載）的項目腳手架，那么，今天我們將使用Node.js實現(xiàn)一個熱重載頁面。
那么，我今天就總結(jié)一下吧，以防止大家也跟我一樣。
熱重載
所謂熱重載就是頁面每次改動，不需要手動去刷新，可自動刷新。
熱更新
瀏覽器的無刷新更新，允許在運行時替換，添加，刪除各種模塊，而無需進(jìn)行完全刷新重新加載整個頁面。
目的：加快開發(fā)速度，所以只適用于開發(fā)環(huán)境下使用。
思路：保留在完全重新加載頁面時丟失的應(yīng)用程序的狀態(tài)，只更新改變的內(nèi)容，以節(jié)省開發(fā)時間，調(diào)整樣式更加快速，幾乎等同于在瀏覽器調(diào)試器中更改樣式。
實戰(zhàn)
一、初始化項目
這里使用以下命令初始化項目。這里使用-y后綴我是為了更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。
npm init -y
初始化完成，根目錄下多了一個package.json文件。
二、創(chuàng)建Node主文件app.js
下面，我們將創(chuàng)建一個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結(jié)合創(chuàng)建了一個http服務(wù)器，又同時與socket.io綁定。然后我們又利用express托管靜態(tài)文件，指定靜態(tài)文件目錄public。我們這里使用了fs模塊下的watch方法，用于監(jiān)聽文件目錄的變化。如果目錄下的文件改變了，那么就會觸發(fā)io.sockets.emit('reload');這行代碼。既然觸發(fā)了那肯定要有地方監(jiān)聽。
三、創(chuàng)建index.html文件
我們會在根目錄下創(chuàng)建一個public文件夾，文件夾內(nèi)創(chuàng)建一個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>
文件內(nèi)容如上，我們首先需要關(guān)注的是怎么與后臺監(jiān)聽，我們只需要引入socket.io.min.js文件（文件我會在文末給出源碼地址），然后在下面鍵入以下代碼：
io.connect('http://localhost:8086/').on('reload', () =>window.location.reload());
http://localhost:8086/ 這是后臺的地址，需要監(jiān)聽這個地址，才能跟后臺進(jìn)行通信。因為后臺我們自定義了一個reload事件，前臺也只需要監(jiān)聽這個事件。如果后臺觸發(fā)了這個事件，那么前臺就會監(jiān)聽到，隨機執(zhí)行代碼。
四、創(chuàng)建其他類型的文件
我們可以在上面的index.html文件中看到了我外部引入了index.js文件與style.js文件。主要是檢測如果改變其中的代碼，頁面是否也相應(yīng)的改變，答案是肯定的。
五、實時更新頁面
我們首先啟動項目。
node app.js
會看到終端下會顯示The server is running on port 8086.，然后就可以在瀏覽器打開http://localhost:8086/這個地址。我們更改下代碼，就可以看下頁面實時顯示，并且是按下快捷鍵保存代碼時（這里推薦編輯器不要實時自動保存代碼），頁面就實時更新。
這樣是不是很省事了，不會每次切換頁面點擊刷新頁面了。想當(dāng)初使用JQ寫頁面時，當(dāng)初真是覺得自己太傻了，每次都重復(fù)勞動。
結(jié)語
謝謝閱讀，希望沒有浪費你的時間。
源碼地址：https://gitee.com/maomincoding/hot-load
到此這篇關(guān)于詳解如何使用Node.js實現(xiàn)熱重載頁面的文章就介紹到這了,更多相關(guān)Node.js熱重載頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家分享了如何在你的Linux發(fā)行版上安裝Node.js？感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了理解Koa2中的async&await的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
NodeJS特性如事件驅(qū)動、異步編程、無阻塞IO,這些特性為它帶來了高效的性能和更少的代碼,require函數(shù)支持斜杠（/）或盤符（C:）開頭的絕對路徑,也支持./開頭的相對路徑,為了便于管理和使用,我們可以把由多個子模塊組成的大模塊稱做包,并把所有子模塊放在同一個目錄里2023-11-11
這篇文章主要為大家介紹了Node.contain?函數(shù)兼容處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Node.js實現(xiàn)mysql連接池使用事務(wù)自動回收連接的方法示例
這篇文章主要介紹了Node.js實現(xiàn)mysql連接池使用事務(wù)自動回收連接的方法,結(jié)合實例形式分析了node.js操作mysql連接池實現(xiàn)基于事務(wù)的連接回收操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
nodeJS最大的特點就是其異步操作，下面這篇文章主要給大家介紹了關(guān)于NodeJS如何實現(xiàn)同步的方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
在node環(huán)境下parse Smarty模板的使用示例代碼
這篇文章主要介紹了在node環(huán)境下parse Smarty模板的使用示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Node.js中MongoDB查詢數(shù)據(jù)的方法
在Node.js中,可以使用MongoDB驅(qū)動程序和Mongoose庫來進(jìn)行MongoDB的查詢操作,本文就來介紹一下Node.js中MongoDB查詢數(shù)據(jù)的方法,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了node.js安裝及HbuilderX配置的相關(guān)資料,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了詳解一些適用于Node.js的命名約定，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12