jQuery 2.0을 사용하여 Windows 스토어 앱 빌드-JS 튜토리얼-php.cn

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

Windows 8 출시와 함께 Microsoft는 기존 웹 언어를 사용하여 작성할 수 있고 Internet Explorer 10을 구동하는 기본 엔진을 활용할 수 있는 Windows 스토어 앱을 도입했습니다. 즉, jQuery 2.0은 최신 브라우저에서 가장 잘 실행되도록 설계되었으며 집에서 사용하기에 적합한 Windows 스토어 앱입니다!

맥락을 이해하세요

Windows 스토어 앱은 웹과 다르며 로컬과 웹이라는 두 가지 컨텍스트가 있습니다. 로컬 컨텍스트의 코드는 Windows 런타임 API에 액세스할 수 있으므로 새로운 보안 모델이 필요합니다.

최상의 결과를 얻으려면 jQuery를 다운로드하여 로컬 컨텍스트에 로드합니다. 원격 위치(예: CDN)에서 로드를 시도하면 "애플리케이션이 로컬 컨텍스트에서 원격 웹 콘텐츠를 로드할 수 없습니다."와 유사한 메시지가 표시됩니다.

"안전하지 않은" 코드 이해하기

DOM 조작은 브라우저와 비교하여 Windows 스토어 앱에서 jQuery를 사용할 때 직면하게 되는 가장 큰 변화 중 하나입니다.

웹에서는 HTML 문자열을 jQuery의 .append() 메소드에 전달하여 양식에 요소를 추가하는 것이 일반적입니다.

으아아아

사용자 컴퓨터에 쉽게 액세스할 수 있는 Windows 스토어 앱에서는 위험이 훨씬 더 높으며 익숙할 수 있는 많은 작업을 재고해야 합니다. 위의 내용은 name 속성으로 인해 안전하지 않은 것으로 간주됩니다. 안전하지 않은 것으로 간주되는 다른 요소, 속성, 프로토콜 등이 많이 있습니다.

안전한 것과 그렇지 않은 것에 대한 자세한 목록은 HTML을 더 안전하게 만들기: toStaticHTML을 참조하세요.

이는 동적 항목으로 컨테이너를 프로그래밍 방식으로 채울 수 없다는 의미가 아니라 프로그래밍 방식으로 동적 항목을 컨테이너에 채울 수 없다는 의미입니다. 약간 다른 접근 방식을 취해야합니다. 예를 들어, 문자열로 전달하는 대신 jQuery를 사용하여 입력 요소 자체를 생성할 수 있습니다.

으아아아

위의 예에서는 jQuery의 html 속성 시그니처를 사용하여 입력 요소를 생성합니다. 이는 요소, 해당 속성 및 해당 값을 완벽하게 제어할 수 있음을 보안 모델에 나타냅니다. 이 패턴은 브라우저에서도 작동하며 버전 1.4부터 jQuery에 존재했습니다.

잠재적으로 안전하지 않은 콘텐츠를 정리하세요

원격 엔드포인트에서 콘텐츠를 수신하는 경우 DOM에 배치하기 전에 콘텐츠를 삭제하는 것이 좋습니다. 문자열에서 모든 동적 항목을 제거하는 toStaticHTML와 같은 도우미 함수를 사용하여 다양한 방법으로 이 작업을 수행할 수 있습니다.

현재 사용자에 대한 인사말이 포함된 토큰 문자열을 원격 서비스에서 요청한다고 가정해 보겠습니다. 서비스가 변조되어 실제로 예상보다 더 많은 콘텐츠를 애플리케이션에 반환할 가능성이 있습니다.

아래 코드에서는 숨겨진 양식 필드가 응답에 추가된 것을 볼 수 있습니다.

으아아아

이를 양식에 주입하면 재앙적인 결과를 초래할 수 있습니다. 따라서 먼저 toStaticHTML를 통해 전달하여 양식 데이터를 조작하거나 기타 승인되지 않은 작업을 수행하는 데 사용할 수 있는 모든 요소, 속성 또는 값을 삭제해야 합니다.

으아아아

메서드가 입력 요소 태그를 확인하면 동적 name 属性，从而防止任何意外数据进入表单提交。要更详细地了解 toStaticHTML 속성을 식별하고 제거하여 예상치 못한 데이터가 양식 제출에 포함되는 것을 방지합니다.

메서드에서 보존할 수 있는 것과 보존할 수 없는 것에 대해 자세히 알아보려면 HTML을 더 안전하게 만들기: toStaticHTML을 확인하세요.

당신이 가장 잘 알 때

때로는 안전하지 않아 보이는 일을 불가피하게 수행해야 하는 경우도 있습니다. 예를 들어 HTML 조각을 템플릿으로 사용하여 새 요소를 만들 수 있습니다. 이러한 상황에서 Microsoft는 필요할 때 그리고 수행 중인 작업이 사용자를 위험에 빠뜨리지 않는다고 확신할 때 사용할 수 있는 방법을 제공합니다.

MSApp 对象上，存在 execUnsafeLocalFunction Windows 스토어 앱의 전역

기능으로, 제안된 대로 정확하게 수행됩니다. 즉, 사례별로 안전하지 않은 기능을 실행할 수 있도록 허용하는 것입니다. 사용자 이름을 편집하기 위해 입력 필드를 추가하고 싶을 수도 있습니다. 코드는 이전 예와 매우 유사할 수 있습니다.

으아아아 innerHTML익명 함수를 통해

속성에 할당할 수 있습니다.

으아아아

이 기능의 범위 내에서 환경의 방해를 받지 않고 안전한 모델에서 벗어나 다른 안전하지 않은 작업을 수행할 수 있습니다. 이 방법을 주의해서 사용해야 하는 이유는 매우 분명합니다.

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

처럼 이 앱도 통제할 수 없는 데이터를 사용하는 위험을 감수하고 싶지 않을 때 주의해서 사용해야 합니다. 🎜

这些实用函数将您想要操作的 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 标记、设置标头或通过服务器端脚本进行代理即可实现此目的。