溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么使用Node.js實現(xiàn)熱重載頁面”，在日常操作中，相信很多人在怎么使用Node.js實現(xiàn)熱重載頁面問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Node.js實現(xiàn)熱重載頁面”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
所謂熱重載就是頁面每次改動，不需要手動去刷新，可自動刷新。
瀏覽器的無刷新更新，允許在運行時替換，添加，刪除各種模塊，而無需進行完全刷新重新加載整個頁面。
目的：加快開發(fā)速度，所以只適用于開發(fā)環(huán)境下使用。
思路：保留在完全重新加載頁面時丟失的應用程序的狀態(tài)，只更新改變的內(nèi)容，以節(jié)省開發(fā)時間，調(diào)整樣式更加快速，幾乎等同于在瀏覽器調(diào)試器中更改樣式。
這里使用以下命令初始化項目。這里使用-y后綴我是為了更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。
npm init -y
初始化完成，根目錄下多了一個package.json文件。
下面，我們將創(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結合創(chuàng)建了一個http服務器，又同時與socket.io綁定。然后我們又利用express托管靜態(tài)文件，指定靜態(tài)文件目錄public。我們這里使用了fs模塊下的watch方法，用于監(jiān)聽文件目錄的變化。如果目錄下的文件改變了，那么就會觸發(fā) io.sockets.emit('reload');這行代碼。既然觸發(fā)了那肯定要有地方監(jiān)聽。
我們會在根目錄下創(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" /> <style> h2 { color: red; } </style> </head> <body> <h2>Hello</h2> <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)容如上，我們首先需要關注的是怎么與后臺監(jiān)聽，我們只需要引入socket.io.min.js文件(文件我會在文末給出源碼地址)，然后在下面鍵入以下代碼：
io.connect('http://localhost:8086/').on('reload', () =>window.location.reload());http://localhost:8086/ 這是后臺的地址，需要監(jiān)聽這個地址，才能跟后臺進行通信。因為后臺我們自定義了一個reload事件，前臺也只需要監(jiān)聽這個事件。如果后臺觸發(fā)了這個事件，那么前臺就會監(jiān)聽到，隨機執(zhí)行代碼。
我們可以在上面的index.html文件中看到了我外部引入了index.js文件與style.js文件。主要是檢測如果改變其中的代碼，頁面是否也相應的改變，答案是肯定的。
我們首先啟動項目。
node app.js
會看到終端下會顯示The server is running on port 8086.，然后就可以在瀏覽器打開http://localhost:8086/這個地址。我們更改下代碼，就可以看下頁面實時顯示，并且是按下快捷鍵保存代碼時(這里推薦編輯器不要實時自動保存代碼)，頁面就實時更新。
這樣是不是很省事了，不會每次切換頁面點擊刷新頁面了。想當初使用JQ寫頁面時，當初真是覺得自己太傻了，每次都重復勞動。
到此，關于“怎么使用Node.js實現(xiàn)熱重載頁面”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
