整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁編程之自動刷新。
各位同學(xué)好，今天我們來分享一下如何設(shè)置網(wǎng)頁自動刷新和延時跳轉(zhuǎn)。我們都知道，在瀏覽器中點(diǎn)擊刷新按鈕或者按下F5鍵可以刷新頁面，但在編程中有時需要自動刷新頁面，加載最新的數(shù)據(jù)，無需用戶參與。這就是我們今天要講的內(nèi)容。
接下來讓我們來看看效果如何。
·首先，在頁面上添加了一個滾動字幕和一張GIF動畫，用于展示頁面的刷新狀態(tài)。
·現(xiàn)在可以看到，每隔3秒自動刷新一次，每當(dāng)刷新時，字幕會回到初始位置，動畫也會重新播放。
·如果不明顯，可以看到鼠標(biāo)指到的位置會不停地觸發(fā)刷新按鈕，效果已經(jīng)很明顯了。
現(xiàn)在讓我們來看看實(shí)現(xiàn)代碼。自動刷新使用了meta標(biāo)簽的http-equiv屬性，值為referesh，表示自動刷新。設(shè)置了content屬性，在內(nèi)容中填寫秒數(shù)，即每隔多少秒自動刷新頁面。如果設(shè)置為3，則每隔3秒自動刷新頁面，非常簡單。
·延時跳轉(zhuǎn)的實(shí)現(xiàn)也很簡單。剛才已經(jīng)將Content屬性設(shè)置為3，現(xiàn)在只需要指定要跳轉(zhuǎn)到的URL。它的寫法是在3后面加上一個英文分號，然后加上url等于要跳轉(zhuǎn)到的地址。在這里，我們跳轉(zhuǎn)到新浪首頁，例如視頻。這樣寫好后，回到瀏覽器保存，可以看到倒計時321，成功跳轉(zhuǎn)。在指定時間后，瀏覽器會自動跳轉(zhuǎn)，功能已經(jīng)實(shí)現(xiàn)。
今天的分享就到這里，希望各位同學(xué)可以照著寫3遍，做到不看視頻也能寫出來。所有案例和相關(guān)文檔都可以向我索取。
我們下期再見，想學(xué)編程可以關(guān)注網(wǎng)頁編程、服務(wù)端編程、數(shù)據(jù)庫和算法方面的內(nèi)容。
點(diǎn)贊支持一下。
為一名前端，開發(fā)web頁面是我們的本職工作。在完成一個頁面開發(fā)的過程中，保存代碼然后手動刷新頁面查看效果，這樣的動作需要重復(fù)無數(shù)次，雖然一次這樣的動作可能只要花費(fèi)幾秒鐘的時間，但是次數(shù)多了也挺浪費(fèi)時間的。
社區(qū)有一款工具可以幫助前端在每次保存完代碼后自動刷新瀏覽器頁面——livereload。
目前有很多的工具都內(nèi)置了自動刷新功能，以下列舉幾個常見的。
這樣的工具有很多，個人覺得最方便的要數(shù)puer，只要全局安裝并在工程根目錄下運(yùn)行即可，效果如下。
圖1
社區(qū)里大多數(shù)的自動刷新工具都是使用livereload實(shí)現(xiàn)的，下面我們就分析一下它的內(nèi)部原理是什么？
閱讀本節(jié)需要先了解服務(wù)器推送和文件修改監(jiān)聽，如果你還沒有學(xué)習(xí)，可以先看看以下文章。
場景：當(dāng)在編輯器中修改文件內(nèi)容并保存時，瀏覽器自動刷新頁面；
分析：監(jiān)聽文件的修改，并且把修改的動作通知瀏覽器。監(jiān)聽操作可以用chokidar模塊完成，通知操作可以用websocket來做。
根據(jù)以上的分析，我們要搭建一個小服務(wù)器，這個服務(wù)器可以訪問被修改的文件、監(jiān)聽文件修改以及與瀏覽器通信。
瀏覽器這邊通過websocket接收服務(wù)器傳來的指令來刷新頁面內(nèi)容，頁面刷新的邏輯可以封裝在livereload.js中，這是一個單獨(dú)的js文件，可以由html文件引入。
整個流程如下圖。
圖2
1、服務(wù)端代碼實(shí)現(xiàn)
1）搭建服務(wù)器
圖3
啟動圖3中的服務(wù)，通過localhost:3000可以訪問圖左側(cè)html和css兩個文件，這兩個文件代表需要開發(fā)的代碼。
2）再搭建一個服務(wù)器，用于頁面訪問livereload.js
圖4
此處用于圖7中html引入livereload.js。
3）搭建websocket服務(wù)器
本文搭建websocket服務(wù)器不再一步步手寫，而是直接采用ws模塊，如下：
圖5
圖5中封裝了一個send方法，用于向頁面發(fā)送刷新通知。
4）監(jiān)聽代碼文件的變化
圖6
chokidar模塊監(jiān)聽代碼文件的變化，其監(jiān)聽的目錄和參數(shù)配置可以自定義。filterRefresh調(diào)用了圖5中定義的send函數(shù)，用于發(fā)送指令，指令的數(shù)據(jù)格式也可以自定義，只要頁面能解析出來即可。
2、瀏覽器端代碼實(shí)現(xiàn)
1）開發(fā)頁面中引入livereload.js
圖7
這一步在webpack、fis3等構(gòu)建工具中都是自動化插入的，無需手動操作。
2）livereload.js中實(shí)現(xiàn)websocket連接
圖8
此處頁面接收來自服務(wù)器的指令，然后把它解析出來執(zhí)行即可。核心指令當(dāng)然是reload，但是不同的資源刷新的方式有所不同，下面會詳細(xì)介紹。
3）直接刷新頁面
圖9
4）刷新chrome插件
圖10
5）更新img標(biāo)簽中的圖片
圖11
document.images可以獲取文檔中所有圖片的dom對象，將每個圖片地址加一個版本號即可刷新。
這里獲取的圖片可能不是本次修改的，那么如何獲取當(dāng)前被修改的文件呢？
如果圖片是自動刷新服務(wù)的資源，那么它的src應(yīng)該是localhost:3000/圖片的路徑/圖片名稱。
圖6中websocket傳給頁面的數(shù)據(jù)中包含了文件在代碼目錄下的路徑，如果被監(jiān)聽的目錄下的圖片被修改，那么它的路徑（/home/用戶名/圖片的路徑/圖片名稱）和src會有一段重合的部分，反之，就不會有重合的部分。這里就用這個小技巧來排除不需要更新的圖片。
6）更新行內(nèi)樣式中的背景圖
圖12
圖13
document.querySelectorAll(`[style*=${selector}]`)可以獲取擁有style屬性的dom，然后通過dom對象的style屬性可以獲取style屬性包含的樣式，再通過具體的css樣式屬性就可以獲取具體的樣式的值，最后通過正則將背景圖匹配出來并加上版本號。
圖14
7）更新內(nèi)嵌和外鏈樣式中的背景圖
圖15
圖16
document.styleSheets可以獲取所有的內(nèi)嵌和外鏈樣式，再通過cssRules和style屬性可以獲取一組樣式表，剩下的處理就和圖13一致了。
注意：如果遇到了import或者媒體查詢media，需要做遞歸獲取樣式表，這里就不再嗷述了。
8）更新外鏈樣式（不包含import）
圖17
document.getElementsByTagName('link')可以獲取所有的外鏈css，通過path和href的對比可以過濾出本次修改的css文件，然后將外鏈css的href加上版本號并重新生成一個link標(biāo)簽插在之前外鏈樣式之后，待新css資源加載完成就可以刪除之前的css資源了。
8）更新外鏈中import中的樣式
圖18
document.querySelectorAll('link')[i].sheet.cssRules[i].href 這樣的寫法可以獲取到import進(jìn)來的css的url。
圖20
瀏覽器自動刷新功能需要服務(wù)端和瀏覽器端配合實(shí)現(xiàn)，服務(wù)端的實(shí)現(xiàn)比較簡單，最大的難點(diǎn)在于瀏覽器端對css的操作。如果每次只是暴力的刷新整個頁面，不考慮對精準(zhǔn)資源的刷新，可能無法保持頁面中已存在的一些狀態(tài)。
現(xiàn)在有條件的公司一般都會給程序員配備一臺mac加一個大屏顯示器，就像下面這樣。
圖21
一個屏幕打開編輯器，另外一個屏幕打開瀏覽器，保存代碼后只要轉(zhuǎn)一下頭就能看見頁面刷新，不用再在一個屏幕上切來切去，開發(fā)效率直線上升。
自動刷新的原理也是一個面試題，如果你理解了上面的實(shí)現(xiàn)原理，以后再碰見這道題，肯定so easy！
喜歡我的文章就關(guān)注我吧，有問題可以發(fā)表評論，我們一起學(xué)習(xí)，共同成長！
為一名前端，開發(fā)web頁面是我們的本職工作。在完成一個頁面開發(fā)的過程中，保存代碼然后手動刷新頁面查看效果，這樣的動作需要重復(fù)無數(shù)次，雖然一次這樣的動作可能只要花費(fèi)幾秒鐘的時間，但是次數(shù)多了也挺浪費(fèi)時間的。
社區(qū)有一款工具可以幫助前端在每次保存完代碼后自動刷新瀏覽器頁面——livereload。
目前有很多的工具都內(nèi)置了自動刷新功能，以下列舉幾個常見的。
這樣的工具有很多，個人覺得最方便的要數(shù)puer，只要全局安裝并在工程根目錄下運(yùn)行即可，效果如下。
圖1
社區(qū)里大多數(shù)的自動刷新工具都是使用livereload實(shí)現(xiàn)的，下面我們就分析一下它的內(nèi)部原理是什么？
閱讀本節(jié)需要先了解服務(wù)器推送和文件修改監(jiān)聽，如果你還沒有學(xué)習(xí)，可以先看看以下文章。
場景：當(dāng)在編輯器中修改文件內(nèi)容并保存時，瀏覽器自動刷新頁面；
分析：監(jiān)聽文件的修改，并且把修改的動作通知瀏覽器。監(jiān)聽操作可以用chokidar模塊完成，通知操作可以用websocket來做。
根據(jù)以上的分析，我們要搭建一個小服務(wù)器，這個服務(wù)器可以訪問被修改的文件、監(jiān)聽文件修改以及與瀏覽器通信。
瀏覽器這邊通過websocket接收服務(wù)器傳來的指令來刷新頁面內(nèi)容，頁面刷新的邏輯可以封裝在livereload.js中，這是一個單獨(dú)的js文件，可以由html文件引入。
整個流程如下圖。
圖2
1、服務(wù)端代碼實(shí)現(xiàn)
1）搭建服務(wù)器
圖3
啟動圖3中的服務(wù)，通過localhost:3000可以訪問圖左側(cè)html和css兩個文件，這兩個文件代表需要開發(fā)的代碼。
2）再搭建一個服務(wù)器，用于頁面訪問livereload.js
圖4
此處用于圖7中html引入livereload.js。
3）搭建websocket服務(wù)器
本文搭建websocket服務(wù)器不再一步步手寫，而是直接采用ws模塊，如下：
圖5
圖5中封裝了一個send方法，用于向頁面發(fā)送刷新通知。
4）監(jiān)聽代碼文件的變化
圖6
chokidar模塊監(jiān)聽代碼文件的變化，其監(jiān)聽的目錄和參數(shù)配置可以自定義。filterRefresh調(diào)用了圖5中定義的send函數(shù)，用于發(fā)送指令，指令的數(shù)據(jù)格式也可以自定義，只要頁面能解析出來即可。
2、瀏覽器端代碼實(shí)現(xiàn)
1）開發(fā)頁面中引入livereload.js
圖7
這一步在webpack、fis3等構(gòu)建工具中都是自動化插入的，無需手動操作。
2）livereload.js中實(shí)現(xiàn)websocket連接
圖8
此處頁面接收來自服務(wù)器的指令，然后把它解析出來執(zhí)行即可。核心指令當(dāng)然是reload，但是不同的資源刷新的方式有所不同，下面會詳細(xì)介紹。
3）直接刷新頁面
圖9
4）刷新chrome插件
圖10
5）更新img標(biāo)簽中的圖片
圖11
document.images可以獲取文檔中所有圖片的dom對象，將每個圖片地址加一個版本號即可刷新。
這里獲取的圖片可能不是本次修改的，那么如何獲取當(dāng)前被修改的文件呢？
如果圖片是自動刷新服務(wù)的資源，那么它的src應(yīng)該是localhost:3000/圖片的路徑/圖片名稱。
圖6中websocket傳給頁面的數(shù)據(jù)中包含了文件在代碼目錄下的路徑，如果被監(jiān)聽的目錄下的圖片被修改，那么它的路徑（/home/用戶名/圖片的路徑/圖片名稱）和src會有一段重合的部分，反之，就不會有重合的部分。這里就用這個小技巧來排除不需要更新的圖片。
6）更新行內(nèi)樣式中的背景圖
圖12
圖13
document.querySelectorAll(`[style*=${selector}]`)可以獲取擁有style屬性的dom，然后通過dom對象的style屬性可以獲取style屬性包含的樣式，再通過具體的css樣式屬性就可以獲取具體的樣式的值，最后通過正則將背景圖匹配出來并加上版本號。
圖14
7）更新內(nèi)嵌和外鏈樣式中的背景圖
圖15
圖16
document.styleSheets可以獲取所有的內(nèi)嵌和外鏈樣式，再通過cssRules和style屬性可以獲取一組樣式表，剩下的處理就和圖13一致了。
注意：如果遇到了import或者媒體查詢media，需要做遞歸獲取樣式表，這里就不再嗷述了。
8）更新外鏈樣式（不包含import）
圖17
document.getElementsByTagName('link')可以獲取所有的外鏈css，通過path和href的對比可以過濾出本次修改的css文件，然后將外鏈css的href加上版本號并重新生成一個link標(biāo)簽插在之前外鏈樣式之后，待新css資源加載完成就可以刪除之前的css資源了。
8）更新外鏈中import中的樣式
圖18
document.querySelectorAll('link')[i].sheet.cssRules[i].href 這樣的寫法可以獲取到import進(jìn)來的css的url。
圖20
瀏覽器自動刷新功能需要服務(wù)端和瀏覽器端配合實(shí)現(xiàn)，服務(wù)端的實(shí)現(xiàn)比較簡單，最大的難點(diǎn)在于瀏覽器端對css的操作。如果每次只是暴力的刷新整個頁面，不考慮對精準(zhǔn)資源的刷新，可能無法保持頁面中已存在的一些狀態(tài)。
現(xiàn)在有條件的公司一般都會給程序員配備一臺mac加一個大屏顯示器，就像下面這樣。
圖21
一個屏幕打開編輯器，另外一個屏幕打開瀏覽器，保存代碼后只要轉(zhuǎn)一下頭就能看見頁面刷新，不用再在一個屏幕上切來切去，開發(fā)效率直線上升。
自動刷新的原理也是一個面試題，如果你理解了上面的實(shí)現(xiàn)原理，以后再碰見這道題，肯定so easy！
喜歡我的文章就關(guān)注我吧，有問題可以發(fā)表評論，我們一起學(xué)習(xí)，共同成長！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
