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