HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...

var deals = [];
var sections = [];
var dealDetails = {};
var dealsUrl = "http://deals.ebay.com/feeds/xml";
function loadDeals(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
               var i = 0;
               var j = 0;
               var dealsXml = this.responseXML.firstChild;
               var childNode = {};
               for (i=0; i
<p>清单 4 展示了 <code>loadDeals</code> 函数，以及应用程序中使用的全局变量。您使用了一个 deals 数组和一个 sections 数组。它们是相关交易的附加组（例如，<code>Deals under $10</code>）。还有一个名为 <code>dealDetails</code> 的映射，其键是 Item IDs（来自于交易数据），其值是从 eBay Shopping <a title="API" href="http://www.31358.cn/api/">API</a> 获取的详细信息。 </p>
<p>您首先调用一个代理，该代理又将调用 eBay Daily Deals REST <a title="API" href="http://www.31358.cn/api/">API</a>。这将把交易列表作为一个 XML 文档提供给您。您解析用于进行 Ajax 调用的 XMLHttpRequest 对象的 <code>onreadystatechange</code> 函数中的文档。您还使用其他两个函数，<code>parseDeal</code> 和 <code>parseSection</code>，来将 XML 节点解析为更易于使用的 JavaScript 对象，但由于它们只是令人厌烦的 XML 解析函数，因此我在这里没有包括它们。最后，在解析了 XML 后，您还使用了另外两个函数，<code>createDealUi</code> 和 <code>createSectionUi</code>，来修改 DOM。此时，这个 UI 如 图 1 所示。 </p>
<p><a href="http://www.31358.cn/wp-content/uploads/2011/12/image0012.jpg"><img   style="max-width:90%" title="image001" alt="image001" src="http://www.31358.cn/wp-content/uploads/2011/12/image001_thumb3.jpg" border="0"  style="max-width:90%"></a> </p>
<p>如果您返回 清单 4，就会注意到在加载主交易之后，您对这些交易的每个部分都调用了 <code>loadDetails</code> 函数。在这个函数中，您通过使用 eBay Shopping API 加载每个交易的附加细节 — 但前提是浏览器支持 Web Workers。清单 5 展示了 <code>loadDetails</code> 函数。 </p>
<p><a name="l5"><b>清单 5. 预取交易细节</b></a></p>
<pre class="brush:php;toolbar:false">function loadDetails(items){
    if (!!window.Worker){
        items.forEach(function(item){
            var xmlStr = null;
            if (window.<a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>){
                xmlStr = <a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>.getItem(item.itemId);
            }
            if (xmlStr){
                var itemDetails = parseFromXml(xmlStr);
                dealDetails[itemDetails.id] = itemDetails;
            } else {
                var worker = new Worker("details.js");
                worker.onmessage = function(message){
                    var responseXmlStr =message.data.responseXml;
                    var itemDetails=parseFromXml(responseXmlStr);
                    if (window.localStorage){
                        localStorage.setItem(
                                        itemDetails.id, responseXmlStr);
                    }
                    dealDetails[itemDetails.id] = itemDetails;
                };
                    worker.postMessage(item.itemId);
            }
        });
    }
}

importScripts("common.js");
onmessage = function(message){
    var itemId = message.data;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            postMessage({responseXml: this.responseText});
        }
    };
    var urlStr = generateUrl(itemId);
    xhr.open("GET", "proxy?url=" + escape(urlStr));
    xhr.send(null);
}

function generateUrl(itemId){
    var appId = "YOUR APP ID GOES HERE";
    return "http://open.api.ebay.com/shopping?callname=GetSingleItem&"+
        "responseencoding=XML&appid=" + appId + "&siteid=0&version=665"
            +"&ItemID=" + itemId;
}

function showDetails(id){
    var el = $(id);
    if (el.style.display == "block"){
        el.style.display = "none";
    } else {
        el.style.display = "block";
        if (!el.innerHTML){
            var details = dealDetails[id];
            if (details){
                var ui = createDetailUi(details);
                el.appendChild(ui);
            } else {
                var itemId = id;
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if (this.readyState == 4 &&
                                      this.status == 200){
                        var itemDetails =
                                        parseFromXml(this.responseText);
                        if (window.localStorage){
                            localStorage.setItem(
                                              itemDetails.id,
                                              this.responseText);
                        }
                        dealDetails[id] = itemDetails;
                        var ui = createDetailUi(itemDetails);
                        el.appendChild(ui);
                    }
                };
                var urlStr = generateUrl(id);
                xhr.open("GET", "proxy?url=" + escape(urlStr));
                xhr.send(null);
            }
        }
    }
}