使用jQuery 2.0建立Windows Store應用程式-js教程-PHP中文網

使用jQuery 2.0构建Windows Store应用程序

隨著 Windows 8 的發布，Microsoft 推出了 Windows 應用程式商店應用程序，這些應用程式可以使用傳統的 Web 語言編寫，並利用支援 Internet Explorer 10 的底層引擎。這意味著 jQuery 2.0 專為在現代瀏覽器中最佳運行而設計，是正確的在家中使用 Windows 應用程式商店應用程式！

#理解上下文

Windows 應用程式商店應用程式與 Web 不同，有兩種不同的上下文，即本機和 Web。由於本機上下文中的程式碼可以存取 Windows 執行時間 API，因此需要一個新的安全模型。

為了獲得最佳結果，您將下載 jQuery 並將其載入到本機上下文中。嘗試從遠端位置（例如 CDN）載入將導致出現類似「應用程式無法在本機上下文中載入遠端 Web 內容」的訊息。

理解「不安全」程式碼

與瀏覽器相比，DOM 操作是在 Windows 應用程式商店應用程式中使用 jQuery 時遇到的最大變更之一。

在網路上，透過將 HTML 字串傳遞到 jQuery 的 .append() 方法來在表單中新增元素的情況並不罕見：

$("#form").append("<input name='foo' value='bar' />");

登入後複製

在可以輕鬆存取使用者電腦的 Windows 應用程式商店應用程式中，風險要高得多，並且您可能習慣做的很多事情都需要重新考慮。由於 name 屬性，上述內容被認為是不安全的。還有許多其他元素、屬性、協定等被認為是不安全的。

有關安全和不安全的詳細列表，請參閱使 HTML 更安全：toStaticHTML 的詳細資訊。

這並不意味著您不能以程式設計方式用動態項目填充容器；而是意味著您不能以程式設計方式將動態項目填入容器中。你只需要採取稍微不同的方法。例如，您可以使用 jQuery 建立輸入元素本身，而不是在字串中傳遞它：

$("<input>", { name: "foo", value: "bar" }).appendTo("#form");

登入後複製

在上面的範例中，您使用 jQuery 的 html、屬性簽章來建立一個輸入元素。這向安全模型表明您可以完全控制該元素、它的屬性及其對應的值。這種模式在瀏覽器中也同樣有效，從 1.4 版開始就出現在 jQuery 中。

清理潛在不安全的內容

從遠端端點接收內容時，明智的做法是在將其放入 DOM 之前對其進行清理。您可以透過多種方式使用輔助函數來執行此操作，例如 toStaticHTML，它可以從字串中刪除所有動態項目。

假設您希望從遠端服務要求一串標記，其中包括對目前使用者的問候語。該服務完全有可能被篡改，並且實際返回到我們的應用程式的內容比您預期的要多。

在下面的程式碼中，您會看到隱藏的表單欄位已將其自身附加到回應中。

<h1>Hello, Dave.</h1><input name='id' value='a528af' type='hidden' />

登入後複製

將其註入表單中可能會造成災難性的後果。因此，您應該先透過 toStaticHTML 傳遞它，以清除可用於操作表單資料或執行其他未經批准的操作的任何元素、屬性或值。

$("#greeting").html(toStaticHTML(response));

登入後複製

當方法看到我們的輸入元素標記時，它將識別並刪除動態 name 屬性，從而防止任何意外資料進入表單提交。若要更詳細地了解 toStaticHTML 方法中哪些內容可以保留，哪些內容不能保留，請查看使 HTML 更安全：toStaticHTML 的詳細資訊。

當你最了解時

有時您不可避免地需要做一些看似不安全的事情。例如，您可能想要使用一段 HTML 作為範本來建立新元素。在這些情況下，Microsoft 提供了一些方法，您可以在必要時使用，並且當您確信自己所做的事情不會使用戶面臨風險時使用。

在Windows 應用程式商店應用程式中的全域MSApp 物件上，存在著execUnsafeLocalFunction 函數，並且它的作用與它所建議的完全一樣：允許您根據具體情況執行不安全的函數。也許您希望添加一個輸入欄位來編輯用戶名，我們的程式碼可能看起來與上一個範例非常相似：

<h1>Hello, <input name="id" value="Dave" /><h1>

登入後複製

我們可以透過匿名函數將其指派給 innerHTML 屬性：

MSApp.execUnsafeLocalFunction(function () {
    $("#greeting").html(response);
});

登入後複製

在該功能的範圍內，您可以跳出安全模型並執行其他不安全的操作，而不會受到環境的二次猜測。為什麼應該謹慎使用此方法應該是相當明顯的。

Windows 應用程式商店應用程式中的 WinJS.Utilities 下也存在一些實用方法，用於執行類似的任務。它們是 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe。與 execUnsafeLocalFunction 一樣，這些也應該謹慎使用，並且當您不想冒險使用超出您控制範圍的資料時。

这些实用函数将您想要操作的 DOM 元素以及您想要分配的字符串作为参数。

WinJS.Utilities.setInnerHTMLUnsafe( $("#greeting").get(0), response );
WinJS.Utilities.setOuterHTMLUnsafe( $("#greeting").get(0), response );

登入後複製

这里的区别在于 setInner 替换了元素的 innerHTML ，而 setOuter 替换了元素本身 - 想想 jQuery 的 replaceWith 方法。对于这两个函数，您只需传入对 DOM 元素和我们所需的 innerHTML 的引用即可。

兼容性说明

在上一节中，您介绍了两个对象，即包含 execUnsafeLocalFunction 函数的 MSApp 对象，以及包含两个实用函数 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe 的 WinJS 对象。 < /p>

这些对象仅存在于 Windows 应用商店应用程序中，而不存在于您的浏览器中（除非某人或某物创建了类似名称的对象）。如果您希望编写既可以在 Windows 应用商店环境又可以在浏览器中运行的代码，则需要先检查这些对象，然后再推测它们的存在。

var $greeting = $("#greeting");

if (typeof WinJS !== "undefined" && WinJS.Utilities) {
    WinJS.Utilities.setInnerHTMLUnsafe($greeting.get(0), response);
} else {
    $greeting.html(response);
}

登入後複製

在 Windows 应用商店应用程序中，上述代码将使用 WinJS.Utilities 方法来执行分配。当在 WinJS 未知的环境中运行时，例如在 Web 浏览器中，代码将通过 jQuery 的 .html 方法执行分配。

不再有同源问题

利用远程服务的能力是网络变得伟大的一部分。在传统浏览器中，您会遇到起源问题，这导致了 JSONP 等解决方案的出现，并最终出现了 CORS。由于 Windows 应用商店应用程序在操作系统上运行，因此来源无关紧要。

$.ajax("http://api.twitter.com/1/statuses/user_timeline.json", {
    data: { screen_name: "appendTo" },
    success: function (data) {
        $("<img>", { src: data[0].user.profile\_image\_url }).appendTo("body");
        $.each(data, function (key, tweet) {
            $("<p>").text(tweet.text).appendTo("body");
        });
    }
});

登入後複製

上面的内容从 @appendTo 帐户获取所有最新推文，并将每条推文包装在自己的段落标记中，并将个人资料图像放在它们上方。在 Windows 应用商店应用程序中，无需使用 script 标记、设置标头或通过服务器端脚本进行代理即可实现此目的。