通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例(已改無(wú)錯(cuò)字)
2022-12-21 20:20:40 本頁(yè)面
【正文】 對(duì)象添加一個(gè) updateready 事件，用于監(jiān)測(cè)本地緩存是否發(fā)生改變。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/19 頁(yè) 11 即使完成了本地緩存的更新，當(dāng)前頁(yè)面也不會(huì)發(fā)生任何變化，需要重新打開(kāi)該頁(yè)面或刷新當(dāng)前頁(yè)，才能執(zhí)行本地緩存更新后的頁(yè)面效果。 （ 3）注冊(cè) updateready 事件的代碼示例 在 Web 頁(yè)面加載后就注冊(cè) updateready 事件，然后在 updateready 事件的響應(yīng)函數(shù)中識(shí)別當(dāng)前的更新過(guò)程是否成功，然后提示用戶(hù)是否需要重新加載更新后的 Web 頁(yè)面。 (39。load39。, function(e) { (39。updateready39。, updateCurrentWebPage, false)。 }, false)。 function updateCurrentWebPage (e) { if ( == ) { /* 瀏覽器更新緩存成功后，提示用戶(hù)需要重新加載更新后的頁(yè)面以應(yīng)用最新版本 */ if (confirm(39。是否需要重新加載更新后的版本？ 39。)) { ()。 ()。 } } else { /* 不需要重新加載更新后的版本時(shí)，則直接退出 */ } } 由于更新后的版本不會(huì)立即被使用，為了使得用戶(hù)能夠即刻使用更新后的新版本而不需 要 強(qiáng) 制 用 戶(hù) 重 載 更 新 后 的 頁(yè) 面 ， 可 以 在 JS 程 序 中 調(diào) 用()函數(shù)從而達(dá)到重新加載更新后的 Web 頁(yè)面。 在線(xiàn)狀態(tài)檢測(cè) 如果 Web 應(yīng)用程序僅僅是一些靜態(tài)頁(yè)面的組合，那么通過(guò)“ Cache Manifest”文件定義需要的各個(gè)緩存資源文件后， Web 系統(tǒng)就可以支持離線(xiàn)訪(fǎng)問(wèn)了。但在開(kāi)發(fā)支持離線(xiàn)的 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/19 頁(yè) 12 Web 應(yīng)用時(shí)，就不能僅僅滿(mǎn)足于靜態(tài)頁(yè)面的展現(xiàn)，還必需考慮如何讓用戶(hù)在離線(xiàn)狀態(tài)下也可以操作數(shù)據(jù)。 當(dāng)然， Web 應(yīng)用系統(tǒng)在離線(xiàn)狀態(tài)執(zhí)行時(shí)，需要把操作者所產(chǎn)生的各種數(shù)據(jù)都存儲(chǔ)在客戶(hù)的本地磁盤(pán)中。當(dāng)系統(tǒng) 處于在線(xiàn)狀態(tài)以后，系統(tǒng)再把數(shù)據(jù)同步上傳到服務(wù)器中。 因此，為了實(shí)現(xiàn)這個(gè)功能，開(kāi)發(fā)者首先必須知道瀏覽器是否在線(xiàn)。 HTML5 提供了兩種檢測(cè)是否在線(xiàn)的方式： 屬性和 online/offline 事件。 （ 1） 屬性 屬性表示當(dāng)前是否在線(xiàn)，如果該屬性的值為 true，則表示目前為在線(xiàn)狀態(tài)；而如果值為 false，則表示當(dāng)前為離線(xiàn)狀態(tài)。因?yàn)楫?dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)， 屬性的值也會(huì)隨之變化。因此，開(kāi)發(fā) 者可以通過(guò)讀取該屬性的值來(lái)獲取網(wǎng)絡(luò)的當(dāng)前連接狀態(tài) —— 在狀態(tài)查詢(xún)的代碼中不斷地識(shí)別。 （ 2） online/offline 事件 當(dāng)開(kāi)發(fā)離線(xiàn)應(yīng)用時(shí)，僅僅通過(guò) 屬性獲取網(wǎng)絡(luò)狀態(tài)通常是不夠的，否則開(kāi)發(fā)者需要在狀態(tài)查詢(xún)的相關(guān)代碼中不斷地查詢(xún)網(wǎng)絡(luò)的當(dāng)前連接狀態(tài)，處于被動(dòng)狀態(tài)。因此，應(yīng)用 online/offline 事件的觸發(fā)機(jī)制，可以在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知。 當(dāng)在線(xiàn) /離線(xiàn)狀態(tài)切換時(shí)， online/offline 事件將觸發(fā)在 body標(biāo)簽元素上，并且會(huì)沿著、 document 和 window 的順序冒泡。因此，開(kāi)發(fā)者可以通過(guò)監(jiān)聽(tīng)它們的 online/offline 事件來(lái)獲悉網(wǎng)絡(luò)狀態(tài)。 離線(xiàn)應(yīng)用示例 下面通過(guò)一個(gè)示例來(lái)說(shuō)明如何使用 HTML5 開(kāi)發(fā)離線(xiàn)應(yīng)用的基本方法，本示例會(huì)應(yīng)用到前面所提到的離線(xiàn)資源緩存、在線(xiàn)狀態(tài)檢測(cè)和本地存儲(chǔ)等方面的功能。 假設(shè)需要開(kāi)發(fā)一個(gè)便簽管理的 Web 應(yīng)用程序，用戶(hù)可以在其中添加和刪除便簽，并且本系統(tǒng)支持離線(xiàn)訪(fǎng)問(wèn)功能，從而允許用戶(hù)在離線(xiàn)狀態(tài)下添加、刪除便簽，并且當(dāng)在線(xiàn)連接以后能夠同步到服務(wù)器上。 應(yīng)用程序頁(yè)面 這個(gè)程序的界 面很簡(jiǎn)單，用戶(hù)點(diǎn)擊“增加信息”按鈕可以在彈出框中創(chuàng)建新的便簽，雙擊某便簽就表示刪除它。 本系統(tǒng)的首頁(yè)面的源文件是 ，代碼示例如下： 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/19 頁(yè) 13 html manifest= head titleNote List/title /head body onload = SyncWithServer() input type=button value=增加信息 onclick=newNote() ul id=list/ul /body /html 在頁(yè)面中聲明了一個(gè)按鈕和一個(gè)無(wú)序列表，當(dāng)按下“ New Note”按鈕時(shí)將觸發(fā)對(duì)newNote()函數(shù)的調(diào)用，它用來(lái)添加一條新的便簽。而無(wú)序列表初始為空，它是用來(lái)顯示便簽的列表。 Cache Manifest 文件 定義“ Cache Manifest”文件以聲明需要緩存的資源文件，本示例需要緩存“ ”、“ ”、“ ”和“ ”等 4 個(gè)文件。其中 、 和 等三個(gè)文件分別包含服務(wù)器相關(guān)、數(shù)據(jù)存儲(chǔ)和用戶(hù)界面代碼。本示例的“ Cache Manifest”文件 中的內(nèi)容定義如下： CACHE MANIFEST 用戶(hù)界面代碼定義在 中 中的代碼包含添加便簽和刪除便簽的界面操作的邏輯，其中的“添加便簽”的主要流程如下： 1) 用戶(hù)點(diǎn)擊“增加信息”按鈕， newNote 函數(shù)被調(diào)用。 2) newNote 函數(shù)會(huì)彈出對(duì)話(huà)框，用戶(hù)輸入新便簽內(nèi)容。 newNote 調(diào)用 add 函數(shù)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 14/19 頁(yè) 14 3) add 函數(shù)分別調(diào)用 addUIItem 和 addDataItem 添加頁(yè)面元素和數(shù)據(jù)， addDataItem 代碼將在后面列出。 4) addUIItem 函數(shù)在頁(yè)面列表中添加一項(xiàng)，并指明 ondblclick 事件的處理函數(shù)是 remove，使得雙擊操作可以刪除便簽。 5) “刪除便簽”的主要流程如下： 6) 用戶(hù)雙擊某便簽時(shí)，調(diào)用 remove 函數(shù)。 7) remove 函數(shù)分別調(diào)用 removeUIItem 和 removeDataItem 刪除頁(yè)面元素和數(shù)，removeDataItem 函數(shù)的代碼將在后面列出。 8) removeUIItem 函數(shù)刪除頁(yè)面列表中的相應(yīng)項(xiàng)。 function newNote(){ var title = (請(qǐng)輸入你所需要增加的信息 )。 if (title){ add(title)。 } } function add(title){ addUIItem(title)。 // 在界面中添加 addDataItem(title)。 // 在數(shù)據(jù)中添加 } function remove(title){
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1