通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-閱讀頁
2024-11-28 20:20本頁面
【正文】 對(duì)象添加一個(gè) updateready 事件，用于監(jiān)測(cè)本地緩存是否發(fā)生改變。 （ 3）注冊(cè) updateready 事件的代碼示例 在 Web 頁面加載后就注冊(cè) updateready 事件，然后在 updateready 事件的響應(yīng)函數(shù)中識(shí)別當(dāng)前的更新過程是否成功，然后提示用戶是否需要重新加載更新后的 Web 頁面。load39。updateready39。 }, false)。是否需要重新加載更新后的版本？ 39。 ()。 在線狀態(tài)檢測(cè) 如果 Web 應(yīng)用程序僅僅是一些靜態(tài)頁面的組合，那么通過“ Cache Manifest”文件定義需要的各個(gè)緩存資源文件后， Web 系統(tǒng)就可以支持離線訪問了。 當(dāng)然， Web 應(yīng)用系統(tǒng)在離線狀態(tài)執(zhí)行時(shí)，需要把操作者所產(chǎn)生的各種數(shù)據(jù)都存儲(chǔ)在客戶的本地磁盤中。 因此，為了實(shí)現(xiàn)這個(gè)功能，開發(fā)者首先必須知道瀏覽器是否在線。 （ 1） 屬性 屬性表示當(dāng)前是否在線，如果該屬性的值為 true，則表示目前為在線狀態(tài)；而如果值為 false，則表示當(dāng)前為離線狀態(tài)。因此，開發(fā) 者可以通過讀取該屬性的值來獲取網(wǎng)絡(luò)的當(dāng)前連接狀態(tài) —— 在狀態(tài)查詢的代碼中不斷地識(shí)別。因此，應(yīng)用 online/offline 事件的觸發(fā)機(jī)制，可以在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知。因此，開發(fā)者可以通過監(jiān)聽它們的 online/offline 事件來獲悉網(wǎng)絡(luò)狀態(tài)。 假設(shè)需要開發(fā)一個(gè)便簽管理的 Web 應(yīng)用程序，用戶可以在其中添加和刪除便簽，并且本系統(tǒng)支持離線訪問功能，從而允許用戶在離線狀態(tài)下添加、刪除便簽，并且當(dāng)在線連接以后能夠同步到服務(wù)器上。 本系統(tǒng)的首頁面的源文件是 ，代碼示例如下： 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/19 頁 13 html manifest= head titleNote List/title /head body onload = SyncWithServer() input type=button value=增加信息 onclick=newNote() ul id=list/ul /body /html 在頁面中聲明了一個(gè)按鈕和一個(gè)無序列表，當(dāng)按下“ New Note”按鈕時(shí)將觸發(fā)對(duì)newNote()函數(shù)的調(diào)用，它用來添加一條新的便簽。 Cache Manifest 文件 定義“ Cache Manifest”文件以聲明需要緩存的資源文件，本示例需要緩存“ ”、“ ”、“ ”和“ ”等 4 個(gè)文件。本示例的“ Cache Manifest”文件 中的內(nèi)容定義如下： CACHE MANIFEST 用戶界面代碼定義在 中 中的代碼包含添加便簽和刪除便簽的界面操作的邏輯，其中的“添加便簽”的主要流程如下： 1) 用戶點(diǎn)擊“增加信息”按鈕， newNote 函數(shù)被調(diào)用。 newNote 調(diào)用 add 函數(shù)。 4) addUIItem 函數(shù)在頁面列表中添加一項(xiàng)，并指明 ondblclick 事件的處理函數(shù)是 remove，使得雙擊操作可以刪除便簽。 7) remove 函數(shù)分別調(diào)用 removeUIItem 和 removeDataItem 刪除頁面元素和數(shù)，removeDataItem 函數(shù)的代碼將在后面列出。 function newNote(){ var title = (請(qǐng)輸入你所需要增加的信息 )。 } } function add(title){ addUIItem(title)。 // 在數(shù)據(jù)中添加 } function remove(title){ removeUIItem(title)。 // 從數(shù)據(jù)中刪除 } function addUIItem(title){ var item = (li)。+title+39。 =title。 (item)。 for (var i = 0。 i++) { if([i].innerHTML == title){ ([i])。其中用到了 屬性、 online 事件、本地存儲(chǔ)等 HTML5 新功能。 addServerItem()將在后面列出；而如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toAdd”項(xiàng)中。 removeServerItem 將在后面列出。 5) “數(shù)據(jù)同步” SyncWithServer 函數(shù)是在 的最后一行注冊(cè)的，所注冊(cè)的window 的 online 事件處理函數(shù) SyncWithServer()會(huì)在 online 事件發(fā)生時(shí)將被調(diào)用。 7) 把 localStorage 對(duì)象中的名稱為 toRemove 項(xiàng)的所有數(shù)據(jù)從服務(wù)器中刪除，并刪除toRemove 的屬性數(shù)據(jù)項(xiàng)。 getServerItems()函數(shù)將在后面列出。localStorage39。 function addDataItem(title){ if () { // 在線狀態(tài) addServerItem(title)。 if(str == null){ str = title。 } (toAdd, str)。 } else{ // 離線狀態(tài) var str = (toRemove)。 } else{ str = str + , + title。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/19 頁 17 } function SyncWithServer(){ // 如果當(dāng)前是離線狀態(tài)，不需要做任何處理 if ( == false){ return。 //和服務(wù)器同步添加操作 var str = (toAdd)。 for(i = 0。 i++) { addDataItem(addItems[i])。 } // 和服務(wù)器同步刪除操作 str = (toRemove)。 for(i = 0。 i++) { removeDataItem(removeItems[i])。 } // 刪除界面中的所有便簽 var list = (list)。 if() ()。 if(allItems != ){ var items = (,)。 i。 } } } (online, SyncWithServer,false)。 其中的 addServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中添加一項(xiàng)，而 removeServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中刪除一項(xiàng)， getServerItems 函數(shù)實(shí)現(xiàn)返回服務(wù)器中存儲(chǔ)的便簽列表。下面為在火狐 中的實(shí)現(xiàn)過程：進(jìn)入“工具” “選項(xiàng)” “高級(jí)”中選擇“網(wǎng)絡(luò)”選項(xiàng)卡。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 19/19 頁 19
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1