Erstellen von Windows Store-Apps mit jQuery 2.0

Mit der Veröffentlichung von Windows 8 führte Microsoft Windows Store-Apps ein, die in herkömmlichen Websprachen geschrieben werden können und die zugrunde liegende Engine nutzen, die Internet Explorer 10 antreibt. Das bedeutet, dass jQuery 2.0 so konzipiert ist, dass es am besten in modernen Browsern läuft und die richtige Windows Store-App für den Heimgebrauch ist!

---

Den Kontext verstehen

Windows Store-Apps unterscheiden sich von Web-Apps und haben zwei verschiedene Kontexte: lokal und Web. Da Code im lokalen Kontext auf Windows-Runtime-APIs zugreifen kann, ist ein neues Sicherheitsmodell erforderlich.

Für optimale Ergebnisse laden Sie jQuery herunter und laden es in einen lokalen Kontext. Der Versuch, von einem Remote-Standort (z. B. einem CDN) zu laden, führt zu einer Meldung ähnlich der Meldung „Die Anwendung kann Remote-Webinhalte nicht im lokalen Kontext laden.“

---

„Unsicheren“ Code verstehen

DOM-Manipulation ist eine der größten Änderungen, die Sie bei der Verwendung von jQuery in Windows Store-Apps im Vergleich zum Browser feststellen.

Im Web ist es nicht ungewöhnlich, Elemente zu einem Formular hinzuzufügen, indem eine HTML-Zeichenfolge an die .append()-Methode von jQuery übergeben wird:

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

Bei einer Windows Store-App, die einfachen Zugriff auf den Computer des Benutzers hat, steht viel mehr auf dem Spiel und viele Dinge, die Sie vielleicht gewohnt sind, müssen überdacht werden. Das Obige gilt aufgrund des Attributs name als unsicher. Es gibt viele andere Elemente, Attribute, Protokolle usw., die als unsicher gelten.

Eine detaillierte Liste dessen, was sicher ist und was nicht, finden Sie unter „HTML sicherer machen: toStaticHTML“.

Dies bedeutet nicht, dass Sie einen Container nicht programmgesteuert mit dynamischen Elementen füllen können. Es bedeutet jedoch, dass Sie keine dynamischen Elemente programmgesteuert in einen Container füllen können. Man muss nur einen etwas anderen Ansatz wählen. Sie können beispielsweise jQuery verwenden, um das Eingabeelement selbst zu erstellen, anstatt es in einer Zeichenfolge zu übergeben:

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

Im obigen Beispiel erstellen Sie ein Eingabeelement mithilfe der HTML-Attributsignatur von jQuery. Dies zeigt dem Sicherheitsmodell an, dass Sie die vollständige Kontrolle über das Element, seine Attribute und die entsprechenden Werte haben. Dieses Muster funktioniert auch im Browser und ist seit Version 1.4 in jQuery vorhanden.

---

Bereinigen Sie potenziell unsichere Inhalte

Wenn Sie Inhalte von einem Remote-Endpunkt empfangen, ist es ratsam, diese zu bereinigen, bevor Sie sie im DOM platzieren. Sie können dies auf verschiedene Arten tun, indem Sie Hilfsfunktionen verwenden, z. B. toStaticHTML, das alle dynamischen Elemente aus der Zeichenfolge entfernt.

Angenommen, Sie möchten von einem Remote-Dienst eine Reihe von Token anfordern, die eine Begrüßung für den aktuellen Benutzer enthalten. Es ist durchaus möglich, dass der Dienst manipuliert wird und tatsächlich mehr Inhalte an unsere Anwendung zurückgibt, als Sie vielleicht erwarten.

Im Code unten sehen Sie, dass sich das ausgeblendete Formularfeld an die Antwort angehängt hat.

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

Dies in ein Formular einzubauen, kann katastrophale Folgen haben. Daher sollten Sie es zunächst über toStaticHTML übergeben, um alle Elemente, Attribute oder Werte zu löschen, die zur Manipulation von Formulardaten oder zur Durchführung anderer nicht genehmigter Aktionen verwendet werden können.

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

Wenn die Methode unser Eingabeelement-Tag erkennt, identifiziert und entfernt sie das dynamische name 属性，从而防止任何意外数据进入表单提交。要更详细地了解 toStaticHTML-Attribut und verhindert so, dass unerwartete Daten in die Formularübermittlung gelangen. Für einen detaillierteren Blick darauf, was in der

-Methode erhalten bleiben kann und was nicht, schauen Sie sich „HTML sicherer machen: toStaticHTML“ an.

---

Wenn Sie es am besten wissen

Manchmal muss man zwangsläufig etwas tun, das unsicher erscheint. Beispielsweise möchten Sie möglicherweise einen HTML-Code als Vorlage zum Erstellen eines neuen Elements verwenden. In solchen Situationen stellt Microsoft Methoden bereit, die Sie bei Bedarf verwenden können und wenn Sie sicher sind, dass Ihre Aktivitäten die Benutzer nicht gefährden.

MSApp 对象上，存在 execUnsafeLocalFunction Eine globale

Funktion in einer Windows Store-App, die genau das tut, was sie verspricht: Sie ermöglicht die Ausführung unsicherer Funktionen von Fall zu Fall. Vielleicht möchten Sie ein Eingabefeld hinzufügen, um den Benutzernamen zu bearbeiten. Unser Code sieht möglicherweise dem vorherigen Beispiel sehr ähnlich:

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

innerHTMLWir können es über eine anonyme Funktion dem Attribut

zuordnen:

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

Im Rahmen dieser Funktion können Sie das sichere Modell verlassen und andere unsichere Vorgänge ausführen, ohne von der Umgebung hinterfragt zu werden. Es sollte ziemlich offensichtlich sein, warum diese Methode mit Vorsicht angewendet werden sollte.

WinJS.Utilities 下也存在一些实用方法，用于执行类似的任务。它们是 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe。与 execUnsafeLocalFunctionWie

in Windows Store-Apps sollten auch diese mit Vorsicht verwendet werden und wenn Sie nicht riskieren möchten, Daten zu verwenden, die außerhalb Ihrer Kontrolle liegen. 🎜

这些实用函数将您想要操作的 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 所需的初始动力。玩得开心！

Das obige ist der detaillierte Inhalt vonErstellen von Windows Store-Apps mit jQuery 2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!