jQuery 2.0 を使用した Windows ストア アプリの構築

Windows 8 のリリースに伴い、Microsoft は従来の Web 言語で記述でき、Internet Explorer 10 を駆動する基盤エンジンを活用できる Windows ストア アプリを導入しました。これは、jQuery 2.0 が最新のブラウザーで最適に動作するように設計されており、家庭で使用するのに最適な Windows ストア アプリであることを意味します。

---

コンテキストを理解する

Windows ストア アプリは Web とは異なり、ローカルと Web という 2 つの異なるコンテキストがあります。ローカル コンテキストのコードは Windows ランタイム API にアクセスできるため、新しいセキュリティ モデルが必要です。

最良の結果を得るには、jQuery をダウンロードしてローカル コンテキストにロードします。リモートの場所 (CDN など) からロードしようとすると、「アプリケーションはローカル コンテキストでリモート Web コンテンツをロードできません」のようなメッセージが表示されます。

---

「安全でない」コードを理解する

DOM 操作は、ブラウザーと比較して、Windows ストア アプリで jQuery を使用するときに遭遇する最大の変更の 1 つです。

Web では、HTML 文字列を jQuery の .append() メソッドに渡すことによってフォームに要素を追加することは珍しくありません。 リーリー

ユーザーのコンピューターに簡単にアクセスできる Windows ストア アプリでは、リスクははるかに高く、使い慣れている多くのことを再考する必要があります。上記は、

name 属性のため安全でないとみなされます。安全ではないと考えられる要素、属性、プロトコルなどは他にもたくさんあります。

安全なリストと安全でないものの詳細なリストについては、「HTML をより安全にする: toStaticHTML」を参照してください。

これは、プログラムによってコンテナに動的アイテムを追加できないという意味ではなく、プログラムによって動的アイテムをコンテナに追加できないことを意味します。少し違ったアプローチを取る必要があるだけです。たとえば、jQuery を使用して、入力要素を文字列で渡すのではなく、入力要素自体を作成できます。 リーリー

上記の例では、jQuery の html 属性シグネチャを使用して入力要素を作成します。これは、要素、その属性、およびそれらに対応する値を完全に制御できることをセキュリティ モデルに示します。このパターンはブラウザでも機能し、バージョン 1.4 以降 jQuery に存在します。

安全でない可能性のあるコンテンツをクリーンアップする

---

リモート エンドポイントからコンテンツを受信する場合、DOM に配置する前にコンテンツをサニタイズすることが賢明です。これは、文字列からすべての動的項目を削除する

toStaticHTML

などのヘルパー関数を使用して、さまざまな方法で行うことができます。 現在のユーザーへの挨拶を含むトークンの文字列をリモート サービスから要求するとします。サービスが改ざんされ、実際に予想よりも多くのコンテンツがアプリケーションに返される可能性は十分にあります。

以下のコードでは、非表示のフォーム フィールド自体が応答に追加されていることがわかります。

リーリー

これをフォームに挿入すると、悲惨な結果が生じる可能性があります。したがって、最初に

toStaticHTML

経由でこれを渡し、フォーム データの操作やその他の未承認のアクションの実行に使用できる要素、属性、または値をクリアする必要があります。 リーリー メソッドが input 要素タグを認識すると、動的な

name

属性を識別して削除し、予期しないデータがフォーム送信に入力されるのを防ぎます。 toStaticHTML メソッドで保持できるものと保持できないものの詳細については、「HTML をより安全にする: toStaticHTML」を参照してください。

自分が一番よく知っているとき

---

安全ではないと思われることを必然的に実行しなければならない場合があります。たとえば、HTML の一部をテンプレートとして使用して、新しい要素を構築することができます。このような状況において、Microsoft は、必要な場合、および自分の行為がユーザーを危険にさらさないと確信できる場合に使用できる方法を提供します。

Windows ストア アプリのグローバル

MSApp

オブジェクトには、execUnsafeLocalFunction 関数が存在し、その関数が示唆するとおりのことを実行します。つまり、ケースバイケースで実行できるようになります。関数。ユーザー名を編集するための入力フィールドを追加したい場合、コードは前の例と非常に似ているかもしれません: リーリー 匿名関数を介して

innerHTML

属性に割り当てることができます: リーリー この機能の範囲内では、セキュリティ モデルの外に出て、環境によって再推測されることなく、他の安全でない操作を実行できます。この方法を慎重に使用する必要がある理由は明らかです。

Windows ストア アプリの

WinJS.Utilities

にも、同様のタスクを実行するためのユーティリティ メソッドがいくつかあります。 setInnerHTMLUnsafe と setOuterHTMLUnsafe です。 execUnsafeLocalFunction と同様に、これらも注意して使用する必要があり、制御できないデータを使用する危険を冒したくない場合に使用する必要があります。 <p>这些实用函数将您想要操作的 DOM 元素以及您想要分配的字符串作为参数。</p> <pre class="brush:javascript;toolbal:false;">WinJS.Utilities.setInnerHTMLUnsafe( $(&quot;#greeting&quot;).get(0), response ); WinJS.Utilities.setOuterHTMLUnsafe( $(&quot;#greeting&quot;).get(0), response ); </pre> <p>这里的区别在于 <code>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 ストア アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。