主页 > 知识库 > 网页基础 > HTML >

HTML5离线功应用能详解(2)

来源:中国IT实验室 作者:佚名 发表于:2013-03-12 12:49  点击:
离线应用示例 最后,通过一个例子来说明使用 HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和 DOM Storage 等功能。假设我们开发一个便签管理的 Web 应用程序,用户可以在其

离线应用示例
  •  
  •     最后,通过一个例子来说明使用 HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和 DOM Storage 等功能。假设我们开发一个便签管理的 Web 应用程序,用户可以在其中添加和删除便签。它支持离线功能,允许用户在离线状态下添加、删除便签,并且当在线以后能够同步到服务器上。
  •     应用程序页面
  •     这个程序的界面很简单,如图 1 所示。用户点击“New Note”按钮可以在弹出框中创建新的便签,双击某便签就表示删除它。
  •     图 1. 应用程序页面
    图 1. 应用程序页面
     
    这个页面的源文件是 index.html,它的代码如清单 8 所示。
     
    清单 8 页面 HTML 代码
     
    XML/HTML Code复制内容到剪贴板
    <html manifest="notes.manifest">  
    <head>  
    <script type="text/javascript" src="server.js"></script>  
    <script type="text/javascript" src="data.js"></script>  
    <script type="text/javascript" src="UI.js"></script>  
    <title>Note List</title>  
    </head>  
     
    <body onload = "SyncWithServer()">  
    <input type="button" value="New Note" onclick="newNote()">  
    <ul id="list"></ul>  
    </body>  
    </html>  
    在 body 中声明了一个按钮和一个无序列表。当按下“New Note”按钮时,newNote 函数将被调用,它用来添加一条新的便签。而无序列表初始为空,它是用来显示便签的列表。
     
    cache manifest 文件
    定义 cache manifest 文件,声明需要缓存的资源。在这个例子中,需要缓存“index.html”、“server.js”、“data.js”和“UI.js”等 4 个文件。除了前面列出的“index.html”外,“server.js”、“data.js”和“UI.js”分别包含服务器相关、数据存储和用户界 面代码。cache manifest 文件定义如下。
     
    清单 9 cache manifest 文件
    XML/HTML Code复制内容到剪贴板
    CACHE MANIFEST  
    index.html  
    server.js  
    data.js  
    UI.js  
    用户界面代码
    用户界面代码定义在 UI.js 中。
     
    清单 10 用户界面代码 UI.js
    JavaScript Code复制内容到剪贴板
    function newNote()  
    {  
       var title = window.prompt("New Note:");  
       if (title)  
       {  
           add(title);  
       }  
    }  
     
    function add(title)  
    {  
       // 在界面中添加 
       addUIItem(title);  
       // 在数据中添加 
       addDataItem(title);  
    }  
     
    function remove(title)  
    {  
       // 从界面中删除 
       removeUIItem(title);  
       // 从数据中删除 
       removeDataItem(title);  
    }  
     
    function addUIItem(title)  
    {  
       var item = document.createElement("li");  
       item.setAttribute("ondblclick", "remove('"+title+"')");  
       item.innerHTML=title;  
     
       var list = document.getElementById("list");  
       list.appendChild(item);     
    }   
     
    function removeUIItem(title)  
    {  
       var list = document.getElementById("list");  
       for (var i = 0; i < list.children.length; i++) {  
           if(list.children[i].innerHTML == title)  
           {  
               list.removeChild(list.children[i]);  
           }  
       }  
    }  
     
     
        
    UI.js 中的代码包含添加便签和删除便签的界面操作。
    添加便签
    用户点击“New Note”按钮,newNote 函数被调用。
    newNote 函数会弹出对话框,用户输入新便签内容。newNote 调用 add 函数。
    add 函数分别调用 addUIItem 和 addDataItem 添加页面元素和数据。addDataItem 代码将在后面列出。
    addUIItem 函数在页面列表中添加一项。并指明 ondblclick 事件的处理函数是 remove,使得双击操作可以删除便签。
    删除便签
    用户双击某便签时,调用 remove 函数。
    remove 函数分别调用 removeUIItem 和 removeDataItem 删除页面元素和数据。removeDataItem 将在后面列出。
    removeUIItem 函数删除页面列表中的相应项。
    数据存储代码
    数据存储代码定义在 data.js 中
     
    清单 11 数据存储代码 data.js
     
    JavaScript Code复制内容到剪贴板
    var storage = window['localStorage'];  
     
    function addDataItem(title)  
    {  
        if (navigator.onLine) // 在线状态 
        {  
            addServerItem(title);  
        }  
        else // 离线状态 
        {  
            var str = storage.getItem("toAdd");  
            if(str == null)  
            {  
                str = title;  
            }  
            else  
            {  
                str = str + "," + title;  
            }  
            storage.setItem("toAdd", str);  
        }  
    }  
     
    function removeDataItem(title)  
    {  
        if (navigator.onLine) // 在线状态 
        {  
            removeServerItem(title);  
        }  
        else // 离线状态 
        {  
            var str = storage.getItem("toRemove");  
            if(str == null)  
            {  
                str = title;  
            }  
            else  
            {  
                str = str + "," + title;  
            }  
            storage.setItem("toRemove", str);  
        }  
    }  
       
    function SyncWithServer()  
    {  
        // 如果当前是离线状态,不需要做任何处理 
        if (navigator.onLine == false)return;  
     
        var i = 0;  
        // 和服务器同步添加操作 
        var str = storage.getItem("toAdd");  
        if(str != null)  
        {  
            var addItems = str.split(",");  
            for(i = 0; i<addItems.length; i++)  
            {  
                addDataItem(addItems[i]);  
            }  
            storage.removeItem("toAdd");  
        }  
     
        // 和服务器同步删除操作 
        str = storage.getItem("toRemove");  
        if(str != null)  
        {  
            var removeItems = str.split(",");  
            for(i = 0; i<removeItems.length; i++)  
            {  
                removeDataItem(removeItems[i]);  
            }  
            storage.removeItem("toRemove");  
        }  
     
        // 删除界面中的所有便签    
        var list = document.getElementById("list");  
        while(list.lastChild != list.firstElementChild)  
            list.removeChild(list.lastChild);  
        if(list.firstElementChild)  
            list.removeChild(list.firstElementChild);         
     
        // 从服务器获取全部便签,并显示在界面中 
        var allItems = getServerItems();  
        if(allItems != "")  
        {  
            var items = allItems.split(",");  
            for(i = 0; i<items.length; i++)  
            {  
                addUIItem(items[i]);  
            }  
        }  
    }  
    window.addEventListener("online", SyncWithServer,false);
    data.js 中的代码包含添加便签、删除便签和与服务器同步等数据操作。其中用到了 navigator.onLine 属性、online 事件、DOM Storage 等 HTML5 新功能。
    添加便签:addDataItem
    通过 navigator.onLine 判断是否在线。
    如果在线,那么调用 addServerItem 直接把数据存储到服务器上。addServerItem 将在后面列出。
    如果离线,那么把数据添加到 localStorage 的“toAdd”项中。
    删除便签:removeDataItem
    通过 navigator.onLine 判断是否在线。
    如果在线,那么调用 removeServerItem 直接在服务器上删除数据。removeServerItem 将在后面列出。
    如果离线,那么把数据添加到 localStorage 的“toRemove”项中。
    数据同步:SyncWithServer
    在 data.js 的最后一行,注册了 window 的 online 事件处理函数 SyncWithServer。当 online 事件发生时,SyncWithServer 将被调用。其功能如下。
    如果 navigator.onLine 表示当前离线,则不做任何操作。
    把 localStorage 中“toAdd”项的所有数据添加到服务器上,并删除“toAdd”项。
    把 localStorage 中“toRemove”项的所有数据从服务器中删除,并删除“toRemove”项。
    删除当前页面列表中的所有便签。
    调用 getServerItems 从服务器获取所有便签,并添加在页面列表中。getServerItems 将在后面列出。
    服务器相关代码
    服务器相关代码定义在 server.js 中。
     
     
    清单 12 服务器相关代码 server.js
    JavaScript Code复制内容到剪贴板
    function addServerItem(title)  
    {  
       // 在服务器中添加一项 
    }  
     
    function removeServerItem(title)  
    {  
       // 在服务器中删除一项 
    }  
     
    function getServerItems()  
    {  
       // 返回服务器中存储的便签列表 
    }  
    由于这部分代码与服务器有关,这里只说明各个函数的功能,具体实现可以根据不同服务器编写代码。
    在服务器中添加一项:addServerItem
    在服务器中删除一项:removeServerItem
    返回服务器中存储的便签列表:getServerItems
    总结
    本文介绍了 HTML5 为了支持离线应用程序新增的强大功能。通过阅读本文,读者能够了解到 HTML5 中离线相关特性的基本用法,从而掌握利用 HTML5 开发 Web 离线应用的方法。

有帮助
(0)
0%
没帮助
(1)
100%