使用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 提供了一些方法，您可以在必要时使用，并且当您确信自己所做的事情不会使用户面临风险时使用。

MSApp 对象上，存在 execUnsafeLocalFunction在 Windows 应用商店应用程序中的全局

函数，并且它的作用与它所建议的完全一样：允许您根据具体情况执行不安全的函数。也许您希望添加一个输入字段来编辑用户名，我们的代码可能看起来与上一个示例非常相似：

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

innerHTML我们可以通过匿名函数将其分配给

属性：

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

在该功能的范围内，您可以跳出安全模型并执行其他不安全的操作，而不会受到环境的二次猜测。为什么应该谨慎使用此方法应该是相当明显的。

WinJS.Utilities 下也存在一些实用方法，用于执行类似的任务。它们是 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe。与 execUnsafeLocalFunctionWindows 应用商店应用程序中的

一样，这些也应该谨慎使用，并且当您不想冒险使用超出您控制范围的数据时。🎜

这些实用函数将您想要操作的 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 对象。

这些对象仅存在于 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 标记、设置标头或通过服务器端脚本进行代理即可实现此目的。

---

结论

虽然本文并不详尽，但它确实提供了您在 Windows 应用商店应用程序中快速启动并运行 jQuery 所需的初始动力。玩得开心！

以上是使用jQuery 2.0构建Windows Store应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！