Windows 8 应用程序开发人员博客

关于 promise（用于使用 JavaScript 编写的 Windows 应用商店应用）

Windows 8 Team — Wed, 26 Jun 2013 15:51:09 GMT

当您使用 JavaScript 编写 Windows 应用商店应用时，一旦执行涉及异步 API 的操作时，就会遇到称为 promise 的构造。此外，无需很长时间，为顺序异步操作编写 promise 链就会成为您的一种习惯。

但是，在开发的过程中，您可能会遇到其他使用 promise 的情形，此时您可能无法完全了解具体情况。为 ListView 控件优化项目呈现功能就是一个很好的例子，如在 HTML ListView 优化性能示例中所示。我们将在随后的一篇博文中继续探究这一主题。或者，您也可以了解一下 Josh Williams 在 //build 2012 大会的深入探讨 WinJS 讨论（略有修改）中展示的以下重要代码段：

list.reduce(function callback (prev, item, i) {
    var result = doOperationAsync(item);
    return WinJS.Promise.join({ prev: prev, result: result}).then(function (v) {
        console.log(i + ", item: " + item+ ", " + v.result);
    });
})

该代码段将加入到 promise 来完成并行异步操作，并根据 list 中的命令按顺序提供结果。如果您一看到该代码就可以立即了解其功能，那么您完全可以跳过本博文！否则，让我们来仔细看一下 promise 的真正工作原理，以及其在 WinJS（Windows JavaScript 库）中的表达式，以便了解这些模式类型。

promise 究竟是什么？承诺关系

首先，让我们来了解一下基本情况：promise 实际上无非就是一个代码构造或一个调用约定（如果您愿意）。因此，promise 与异步操作没有内在的关系，它们在这方面非常有用实属巧合！promise 只是一个对象，代表着可能会在将来某一时间可用（或现已可用）的值。这样，promise 的含义就像我们在人际关系中使用该术语一样。如果我说，“我承诺投递给您一打甜甜圈”，则很明显我无需即刻得到这些甜甜圈，而毫无疑问我假定自己可以在将来得到它们。一旦得到甜甜圈，我就会投递给您。

Promise 故暗示着两个代理方之间的关系：承诺发货的发货人与既是承诺的接受方又是收货人的消费者。发货人如何获得这些货物是其自己的事情。同样，消费者可以随意处理承诺和投递的货物。消费者甚至可与其他的消费者分享承诺。

在发货人和消费者之间，也存在着两个关系阶段，创建和履行。全部内容如下图所示。

通过该图中显示的流程，我们可以了解到分为两个阶段的关系是 promise 通过异步交货的方式得以履行的原因所在。这个过程的关键部分是一旦消费者认可请求（即 promise），其可以继续生活（异步），而不是等待（同步）。这意味着消费者在等待承诺履行的同时可以做其他的事情，例如响应其他的请求，而这也是异步 API 的初衷。如果已得到货物，情况会怎样？此时，promise 将立即履行，就像是一种同步调用约定。

当然，对于这一关系，我们还要考虑一些额外的东西。在日常生活中，您一定作出过承诺，并且别人也对您作出过承诺。尽管许多承诺已经履行，但许多承诺无法兑现也是事实，例如快递员在为您送披萨的途中发生了交通事故！背弃的承诺是无法改变的事实，无论是在我们的个人生活还是异步编程方面，我们都必须接受。

在承诺关系中，这意味着发货人需要一种表达，“对不起，我无法兑现该承诺”的方式，而消费者也需要一种了解该事实的方式。其次，作为消费者，我们有时会对别人向我们作出的承诺失去耐心！因此，如果发货人可以在履行承诺的过程中跟踪进展情况，消费者也需要一种获得该信息的方式。第三，消费者还可以取消订单，并告知发货人其不再需要该货物。

将这些要求添加到图中之后，我们就会看到完整的关系：

现在，我们来看看这些关系如何通过代码来体现。

promise 构造和 promise 链

事实上，promise 有着许多不同的建议或规范。Windows 和 WinJS 中使用的 promise 称为 Common JS/Promises A，表示 promise（由发货人返回并代表一个在未来提供的值）是一个包含 then 函数的对象。消费者通过调用 then 表示订阅承诺的履行。（Windows 中的 promise 还支持称为 done 的类似函数，不久我们将会看到其用于 promise 链。）

消费者可向该函数传递三个作为参数的可选函数，具体顺序如下：

completed 处理程序。当承诺的值可用时，发货人将调用该函数，而当该值现已可用时，completed 处理程序将从 then 中被立即调用（同步）。
可选的 error 处理程序。它将在获取承诺的值失败时调用。对于任何特定的承诺，均无法在调用 error 处理程序的情况下调用 completed 处理程序。
可选的 progress 处理程序。在操作支持的情况下，它将通过中间结果定期调用。（在 WinRT 中，这意味着 API 包含一个 IAsync[Action | Operation]WithProgress 的返回值；而 IAsync[Action | Operation] 则没有该值。）

请注意，您可以为任何这些参数传递 null，例如当您只想附加 error 处理程序，而不是 completed 处理程序的时候。

就关系中的另一方而言，消费者可通过多次调用 then，对同一个 promise 订阅任意数量的处理程序。另外，消费者还可与其他可随意调用 then 的消费者分享 promise。这完全受支持。

这意味着 promise 必须管理其收到的所有处理程序的列表，并在适当的时候调用它们。Promise 还需要允许取消，如完整关系中所述。

Promises A 规范中的另一项要求是 then 方法本身返回 promise。当传递给第一个 promise.then 的 completed 处理程序返回时，履行第二个 promise，并且返回值将作为第二个 promise 的结果提供。请看以下代码段：

var promise1 = someOperationAsync();
var promise2 = promise1.then(function completedHandler1 (result1) { return 7103; } );
promise2.then(function completedHandler2 (result2) { });

此处的执行链是启动 someOperationAsync，并返回 promise1。当操作进行时，我们调用 promise1.then，其将立即返回 promise2。除非异步操作的结果已经可用，否则 completedHandler1 不会被调用，请务必明确这一点。假定我们仍然在等待，因此我们直接调用 promise2.then，此时 completedHandler2 也不会调用。

过了一段时间后，someOperationAsync 完成并提供一个值（例如 14618）。现在，promise1 将履行，其将使用该值调用 completedHandler1，因而 result1 是 14618。现在，completedHandler1 执行并返回值 7103。此时，promise2 将履行，因此其使用等于 7103 的 result2 调用 completedHandler2。

如果 completed 处理程序返回其他 promise 会怎样呢？这种情况的处理方式有些不同。假设上述代码中的 completedHandler1 返回了以下 promise：

var promise2 = promise1.then(function completedHandler1 (result1) {
    var promise2a = anotherOperationAsync();
    return promise2a;
});

在此情况下，completedHandler2 中的 result2 本身将不会成为 promise2a，而是会成为 promise2a 的 fulfillment 值。也就是说，由于 completed 处理程序返回了一个 promise，promise1.then 返回的 promise2 将使用 promise2a 的结果履行。

准确地说，正是这一特性使顺序异步操作能够链接在一起，每个操作的结果将提供给下一个操作。在没有中间变量或命名的处理程序的情况下，您通常会看到 promise 链的这一模式：

operation1().then(function (result1) {
    return operation2(result1)
}).then(function (result2) {
    return operation3(result2);
}).then(function (result3) {
    return operation4(result3);
}).then(function (result4) {
    return operation5(result4)
}).then(function (result5) {
    //And so on
});

当然，每个 completed 处理程序可能会使用其收到的结果执行更多的操作，但在所有的链中，您都可以看到该核心构造。此处一个接一个执行的 then 方法亦是如此，它们所做的一切就是单独保存特定的 completed 处理程序并返回其他 promise。因此，当到达代码结尾处时，operation1 将已启动，并且不会调用 completed 处理程序。但是，来自所有 then 调用的大量中间 promise 将被创建出来并彼此连结在一起，以随着顺序操作的进展对链进行管理。

值得一提的是，通过在之前的 completed 处理程序中嵌套各个顺序操作，可以获得相同的顺序，这样您就可以避免使用大量的 return 语句。但是，这种嵌套会遇到严重的缩进问题，特别是在您开始向 then 添加包含每个调用的 progress 处理程序和 error 处理程序的情况下。

说到这里，WinJS 中的 promise 的特性之一就是，当链中的任一环节发生错误时，错误即会自动传播至链的末端。这意味着您应该在最后一次调用 then 时附加一个单个的 error 处理程序，而不是在每一个级别都附加它。不过需要引起注意的是，出于各种微妙的原因，如果链中的最后一环是 then 调用，则这些错误就会消失。因此，WinJS 还提供了 promise 的 done 方法。该方法可接受与 then 相同的参数，但表明链已结束（它将返回 undefined，而不是其他 promise）。因此，附加到 done 的 error 处理程序会针对整个链中的任意错误进行调用。此外，在没有 error 处理程序的情况下，done 将向应用级别抛出异常，以便由 WinJS.Application.onerror 事件的 window.onerror 进行处理。简而言之，理想的情况下，所有链都应结束于 done，以确保出现的异常可以得到妥善的处理。

当然，如果您编写的函数的目的是从长长的 then 调用链中返回最后一个 promise，则您仍然需要在结尾处使用 then：接下来，将由可能在其他链中使用该 promise 的调用者来完全负责处理错误。

创建 promise：WinJS.Promise 类

尽管您始终可以基于 Promises A 规范创建您自己的 promise 类，但实际上要有大量的工作要做，因此最后交给库来完成。为此，WinJS 提供了强大、灵活且经过良好测试的 promise 类，称为 WinJS.Promise。这样，您就可以基于不同的值和操作轻松创建 promise，而无需管理发货人/消费者关系的详细信息或 then 的行为。

当需要时，您可以（应该）使用 new WinJS.Promise 或合适的 helper 函数（如下一节中所述）来基于异步操作和现有的（同步）值创建 promise。请记住，promise 只是一个代码构造：没有要求规定 promise 必须封装异步操作或其他任何异步内容。同样，仅仅在 promise 中封装一些代码无法使其自动异步运行。当您自己创建 promise 类时，情况依然如此。

作为直接使用 WinJS.Promise 的简单示例，假设我们希望执行一个长时间的计算（把从 1 到某最大值之间的大量数字加起来），但通过异步方式完成。我们可以为该例程创建我们自己的回调机制，但如果我们将其封装在 promise 中，则允许它被链接起来或加入到其他 API 中的其他 promise。（除此之外，WinJS.xhr 函数还在 promise 中封装了 JavaScript 的异步 XmlHttpRequest，从而您无需处理后者的特定事件构造。）

当然，我们也可以使用 JavaScript worker 进行长时间的计算，但为了便于说明，我们将其保留在 UI 线程上，并使用 setImmediate 将操作拆分为多个步骤。以下显示了在 promise 构造中使用 WinJS.Promise 的具体实施方法：

function calculateIntegerSum(max, step) {
    //The WinJS.Promise constructor's argument is an initializer function that receives 
    //dispatchers for completed, error, and progress cases.
    return new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
        var sum = 0;

        function iterate(args) {
            for (var i = args.start; i < args.end; i++) {
                sum += i;
            };

            if (i >= max) {
                //Complete--dispatch results to completed handlers
                completeDispatch(sum);
            } else {
                //Dispatch intermediate results to progress handlers
                progressDispatch(sum);
                setImmediate(iterate, { start: args.end, end: Math.min(args.end + step, max) });
            }
        }
            
        setImmediate(iterate, { start: 0, end: Math.min(step, max) });
    });
}

当调用 new WinJS.Promise 时，其构造函数中的唯一参数是一个 initializer 函数（此时为匿名函数）。initializer 可以封装要执行的操作，但请务必明确该函数将在 UI 线程上同步执行。因此，如果我们在不使用 setImmediate 的情况下执行长时间的计算，就会阻塞整个这段时间的 UI 线程。另外，将代码放到 promise 中无法使其自动异步运行 — 需要使用 initializer 函数进行相应的设置。

就参数而言，initializer 函数可针对“已完成”、“错误”和“进行中”的情况收到三个调度程序（受 promise 支持）。显而易见，在操作过程中，我们可以使用适当的参数在适当的时间调用这些调度程序。

我将这些函数称为“调度程序”，这是因为它们与消费者向 promise 订阅的 then 方法（或 done，但为不会一直提醒您）完全不同。在系统内部，WinJS 管理着大量的处理程序，这正是任意数量的消费者可订阅任意数量的处理程序的原因所在。当您调用这些调度程序之一时，WinJS 通过其内部列表进行迭代，并以您的名义调用所有这些处理程序。WinJS.Promise 也可以确保它的 then 按照链接的要求返回其他 promise。

简而言之，WinJS.Promise 提供了与 promise 有关的所有详细信息。这样，您就可以将精力集中放在 promise 所代表的核心操作上，这在 initializer 函数中得到了很好的体现。

创建 promise 的 helper

创建 promise 的主要 helper 函数是静态方法 WinJS.Promise.as，其可以将 any 值封装到 promise 中。基于已存在的值的封装程序反过来可以调用传递到 then 的任何 completed 处理程序。这样，您就可以明确将任意已知值视为 promise，从而能够混合 promise 并（通过加入或链接）将它们与其他 promise 组合。将 as 用于一个现有的 promise 只能返回该 promise。

另一个静态的 helper 函数是 WinJS.Promise.timeout，其可以基于 setTimeout 和 setImmediate 提供便捷的封装程序。当第二个 promise 无法在特定时间（毫秒）内履行时，您也可以创建一个 promise 来将其取消。

请注意，基于 setTimeout 和 setImmediate 的 timeout promise 本身通过 undefined 来履行。于是出现了一个常见的问题，“在超时之后，如何使用这些 promise 来提供一些其他的结果？”答案中包含了一个事实，那就是 then 将返回另一个 promise，该 promise 使用 completed 处理程序的返回值来履行。例如，下面这行代码：

var p = WinJS.Promise.timeout(1000).then(function () { return 12345; });

创建在一秒钟之后使用值 12345 履行的 promise p。换言之，WinJS.Promise.timeout(…).then(function () { return } ) 是在给定超时之后提供的模式。如果本身是另一个 promise，则意味着在超时之后的某个时间点提供该 promise 的履行值。

取消和生成 promise 错误

在我们刚刚看到的代码中，您可能已经注意到了两个缺陷。首先，操作在开始之后将无法被取消。其次，我们无法非常有效地处理错误。

应对这两种情况的技巧是，生成 promise 的函数（例如 calculateIntegerSum 函数）必须始终返回 promise。如果操作无法完成或最初根本未启动，则该 promise 将处于错误状态。这意味着该 promise 没有（也绝不会有）可传递给任何 completed 处理程序的结果：它只会调用其 error 处理程序。实际上，如果消费者调用已处于错误状态的 promise 的 then 方法，则该 promise 将立即（同步）调用传递给 then 的 error 处理程序。

WinJS.Promise 进入错误状态的原因有两个：消费者调用其 cancel 方法或 initializer 函数中的代码调用 error 调度程序。在发生这种情况时，将会向 error 处理程序传递在 promise 中捕获或传播的错误值。如果您正在 WinJS.Promise 中创建操作，则您也可以使用 WinJS.ErrorFromName 的实例。这只是一个 JavaScript 对象，它包含识别错误的 name 属性和包含更多信息的 message 属性。例如，当取消 promise 时，error 处理程序将会收到一个 name 和 message 名称均设置为“Canceled” 的错误对象。

但是，如果您无法从一开始就启动操作，情况会怎样？例如，如果您调用包含错误参数（如 0, 0）的 calculateIntegerSum，其甚至无法尝试启动计数，而是返回一个处于错误状态的 promise。这就是静态方法 WinJS.Promise.wrapError 的用途。它获取 WinJS.ErrorFromName 的实例，并且在此情况下将返回处于错误状态的 promise，而不是新的 WinJS.Promise 实例。

另一方面，尽管调用 promise 的 cancel 方法会使 promise 本身处于错误状态，但我们如何停止已经开始的异步操作呢？在之前的 calculateIntegerSum 实施中，将一直调用 setImmediate，直到操作完成为止，无论我们创建的 promise 的状态如何。事实上，如果操作在 promise 已取消之后调用 complete 调度程序，则 promise 将忽略操作完成。

因此，需要使用一种方法来让 promise 告知操作其不再需要继续工作。为此，WinJS.Promise 构造函数需要在取消 promise 的情况下调用的第二个函数参数。在我们的示例中，对该函数的调用需要避免接下来调用 setImmediate，从而停止计算的情况。下方显示了具体的情形和正确的处理方法：

function calculateIntegerSum(max, step) {
    //Return a promise in the error state for bad arguments
    if (max < 1 || step < 1) {
        var err = new WinJS.ErrorFromName("calculateIntegerSum", "max and step must be 1 or greater");
        return WinJS.Promise.wrapError(err);
    }

    var _cancel = false;

    //The WinJS.Promise constructor's argument is an initializer function that receives 
    //dispatchers for completed, error, and progress cases.
    return new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
        var sum = 0;

        function iterate(args) {
            for (var i = args.start; i < args.end; i++) {
                sum += i;
            };

            //If for some reason there was an error, create the error with WinJS.ErrorFromName
            //and pass to errorDispatch
            if (false /* replace with any necessary error check -- we don’t have any here */) {
                errorDispatch(new WinJS.ErrorFromName("calculateIntegerSum (scenario 7)", "error occurred"));
            }

            if (i >= max) {
                //Complete--dispatch results to completed handlers
                completeDispatch(sum); 
            } else {
                //Dispatch intermediate results to progress handlers
                progressDispatch(sum);

                //Interrupt the operation if canceled
                if (!_cancel) {
                    setImmediate(iterate, { start: args.end, end: Math.min(args.end + step, max) });
                }
            }
        }
            
        setImmediate(iterate, { start: 0, end: Math.min(step, max) });
    },
    //Cancellation function for the WinJS.Promise constructor
    function () {
        _cancel = true;
    });
}

总而言之，创建 WinJS.Promise 的实例有许多用途。例如，如果您有一个通过一些其他的异步方法与 Web 服务通信的库，则您可以将这些操作封装在 promise 中。您还可能还需要使用新的 promise 将来自不同源的多个异步操作（或其他 promise）合并到一个单一的 promise 中，以便控制所涉及的所有关系。在 WinJS.Promise 的 initializer 的代码中，毫无疑问您可以包含面向其他异步操作及其 promise 的您自有的处理程序。您可以使用这些处理程序封装针对网络超时等情况的自动重试机制、挂接到一般进程更新程序 UI，或者添加底层日志记录或分析。通过这些方式，您的其余代码无需了解详细信息，并且可以直接处理来自消费者一方的 promise。

除此之外，将 JavaScript worker 封装到 promise 中的过程也变得相当简单，这样一来其外观和行为均变得与 WinRT 中的其他异步操作相同。如您所知，worker 通过 postMessage 调用提供他们的结果，该调用将引发应用程序中 worker 对象的 message 事件。以下代码可将该事件与履行的 promise 相关联，无论该消息中提供何种结果：

// This is the function variable we're wiring up.
var workerCompleteDispatch = null;

var promiseJS = new WinJS.Promise(function (completeDispatch, errorDispatch, progressDispatch) {
    workerCompleteDispatch = completeDispatch;
});

// Worker is created here and stored in the 'worker' variable

// Listen for worker events
worker.onmessage = function (e) {
    if (workerCompleteDispatch != null) {
        workerCompleteDispatch(e.data.results); /* event args depends on the worker */
    }
}

promiseJS.done(function (result) {
    // Output for JS worker
});

要扩展该代码以处理 worker 中的错误，您需要在其他变量中保存 error 调度程序，使用 message 事件处理程序检查其事件参数中的错误信息，并在适当的时候调用 error 调度程序，而不是 complete 调度程序。

加入并行的 promise

由于 promise 通常用来封装异步操作，您完全可以并行执行多个操作。此时，您可能想知道是在履行组中的一个 promise 还是在履行组中的所有 promise 时执行。静态函数 WinJS.Promise.any 和 WinJS.Promise.join 为此提供了解决方案。

这两种函数可接受一组值或一个包含值属性的对象。这些值可以是 promise 和任何使用 WinJS.Promise.as 封装，从而让整个数组或对象由 promise 组成的非 promise 值。

以下是 any 的特性：

any 在履行一个其他的 promise 或在该 promise 遇到错误（逻辑“或”）而失败时，创建一个单一的 promise。本质上，any 将 completed 处理程序附加到所有 promise，而一旦调用 completed 处理程序，其将调用 any promise 本身收到的任何 completed 处理程序。
在履行 any promise 之后（也就是履行列表中的第一个 promise 之后），列表中的其他操作将继续运行，并调用向这些 promise 单独分配的任何 completed、error 或 progress 处理程序。
如果您从 any 中取消 promise，则列表中的所有 promise 都将被取消。

关于 join：

join 在履行所有其他的 promise 或在这些 promise 遇到错误（逻辑“或”）而失败时，创建一个单一的 promise。本质上，join 将 completed 和 error 处理程序附加到所有这些 promise，并等待所有处理程序调用完成，然后调用其本身收到的 completed 处理程序。
join promise 还将向您提供的任何 progress 处理程序报告进度。此时，中间结果是来自到目前为止已履行的各个 promise 的一系列结果。
如果您从 join 中取消 promise，则它将取消仍然处于挂起状态的所有其他的 promise。

除 any 和 join 之外，您还需要了解一下可派上用场的其他两种静态 WinJS.Promise 方法：

is 确定是否任意值是返回布尔值的 promise。它主要确保对象包含名为“then”的函数；但不会测试“done”。
theneach 将 completed、error 和 progress 处理程序应用于一组 promise（使用 then），并在 promise 中将结果返回为另一组值。任何处理程序都可以为 null。

包含顺序结果的并行 promise

借助 WinJS.Promise.join 和 WinJS.Promise.any，我们能够处理并行 promise，也就是处理并行异步操作。另外，join 返回的 promise 将在整个数组中的 promise 全部履行之后履行。但是，这些 promise 可能将以随机顺序完成。当您有一组可通过此方式执行的操作，但您想以精心定义的顺序（即按照它们出现在数组中的顺序）处理其结果时，该怎么办？

为此，您需要将每个后续 promise 加入到以前出现的所有 promise 的 join 中，本文开始处的那一小段代码可准确地完成此操作。下方再次显示了该代码，但经过了重新编写以使 promise 变得更加明确。（假定 list 是一组某种类型的值，并作为参数用于假设的生成 promise 的异步调用 doOperationAsync）：

list.reduce(function callback (prev, item, i) {
    var opPromise = doOperationAsync(item);
    var join = WinJS.Promise.join({ prev: prev, result: opPromise});

    return join.then(function completed (v) {
        console.log(i + ", item: " + item+ ", " + v.result);
    });
})

要了解该代码，我们必须首先了解该数组的 reduce 方法的工作原理。对于数组中的每个项目，reduce 将调用函数参数（此处称为 callback），它将收到四个参数（本代码中只用到三个）：

prev 该值是之前对 callback 的调用的返回值（对于第一个项目，该值为 null）。
item 数组中的当前值。
i 列表中的项目索引。
source 原始数组。

对于第一个项目，我们将获得我称之为 opPromise₁ 的 promise。由于 prev 是 null，我们将加入 [WinJS.Promise.as(null), opPromise₁]。但是，请注意我们将不会返回 join 本身。而是向该 join 附加一个 completed 处理程序（我已调用 completed），并从它的 then 返回 promise。

请记住，从 then 返回的 promise 将在 completed 处理程序返回时履行。这意味着我们从 callback 返回的 promise 将在第一个项目的 completed 处理程序已处理 opPromise₁ 的结果之后完成。如果您回顾 join 的结果，就会发现它是通过一个包含原始列表中 promise 的结果的对象实现的。这意味着履行值 v 将包含一个 prev 属性和一个 result 属性，其中后者是 opPromise₁ 的结果。

对于 list 中的下一个项目，callback 将收到包含上一个 join.then 中的 promise 的 prev。接下来，我们创建 opPromise₁.then 和 opPromise₂ 的新的 join。因此，该 join 将在已经履行 opPromise₂，并且 opPromise₁ 的 completed 处理程序已返回之后完成。就是这样！我们向该 join 附加的 completed₂ 处理程序将不会被调用，直至 completed₁ 已返回。

这种相同的依赖关系将针对 list 中的每个项目而构建 — 项目 n 的 join.then 中的 promise 将不会被履行，直至 completed_n 返回。这样可以保证 completed 处理程序以与 list 相同的顺序调用。

结束语

在本博文中，我们已了解到 promise 本身只是一个代码构造或一个调用约定（尽管其很强大），它代表发货人和消费者之间的特定关系，发货人将在以后的任意时间点提供值，而消费者想知道他们何时可以获得这些值。因而，promise 非常适用于代表异步操作的结果，并可广泛用于使用 JavaScript 编写的 Windows 应用商店应用。promise 的规范还允许将顺序异步操作链接在一起，使每个中间结果从一个链接流向下一个。

Windows JavaScript 库 (WinJS) 提供了可靠的 promise 实现，您可以使用它来封装您的任何类型的操作。另外，它还为常见的应用场景（例如，拼接并行操作的 promise）提供了 helper。借助这些，WinJS 可允许使用更加有效和高效的方式处理异步操作。

Kraig Brockschmidt
Windows 生态系统团队项目经理
使用 HTML、CSS 和 JavaScript 编程 Windows 8 应用作者

优化 ListView 条目呈现

Windows 8 Team — Tue, 25 Jun 2013 14:25:09 GMT

对于许多使用 JavaScript 编写的 Windows 应用商店应用（可以处理数据集合），与 WinJS ListView 控件很好地协同工作是获得出色应用性能的基础。这并不奇怪：当处理数以千计的条目的管理和显示时，您对这些条目进行的每个数位的优化可能都发挥着重要的作用。最重要的是每个条目的呈现方式，也就是说，如何呈现以及何时呈现，ListView 控件中的每个条目都会构建于 DOM 中，并成为应用的可见部分。实际上，当用户在列表内快速平移时并且希望列表能够跟进平移的速度时，何时呈现就成为一个重要的要素。

通过 HTML 中定义的声明性模板或通过一个自定义的 JavaScript 呈现函数（将会为列表中的每个条目调用该函数），就可以在 ListView 中呈现条目。尽管使用声明性模板是最简单的，但是它不能对整个过程提供太多具体的控制。另一方面，呈现函数允许逐条目自定义呈现，并实现一定量的优化，HTML ListView 优化性能示例中演示了其中的一些示例。优化包括：

允许异步传输条目数据和已呈现的元素（基本呈现函数支持该功能）。
将条目形状的创建与内部元素的创建分开，条目形状对于 ListView 的整体数据布局是必不可少的要素。这是通过一个占位符呈现器提供对该功能的支持。
重用以前创建的条目元素（及其子集），方法是替换数据、避免大部分元素创建步骤，此功能是通过一个循环占位符呈现器提供支持。
延迟耗费资源的可视性操作（如图片加载和动画显示）直到条目可见，并且 ListView 没有快速平移，此功能是通过一个多级呈现器来完成。
将这些相同的可视性操作同时进行批处理操作，以便利用多级批处理呈现器将重新呈现 DOM 的工作量最小化。

在本篇博文中，我们将逐一介绍所有这些阶段，并了解它们是如何与 ListView 的条目呈现过程相互配合。您可以想象得到，围绕着何时呈现条目所进行的优化涉及大量的异步操作，因此会有大量的承诺。因此在这个过程中，基于先前发表的关于承诺博文，我们还会对承诺本身有更深入的理解。

作为一条适用于所有呈现器的一般原则，令核心条目呈现时间（不包括延迟的操作）尽量最短非常重要。因为 ListView 的最终性能表现很大程度上取决于它的更新与屏幕刷新间隔的吻合程度，在条目呈现器上花费的额外的几个毫秒可能会使 ListView 的整体呈现时间推迟到下一个刷新间隔，导致丢失帧和视觉效果波动。也就是说，条目呈现器就是一个用于优化您的 JavaScript 代码的位置。

基本呈现器

我们先快速了解一下条目呈现函数（我简单地称为呈现器）是什么样的。呈现器是您分配给 ListView 的 itemTemplate 属性而不是模板名称的一个函数，将会在必要时为 ListView 希望包括在 DOM 中的条目调用该函数。（另外，您可以在 itemTemplate 页查找到呈现器的基础说明文档，不过它是切实显示优化的示例。）

您可能希望条目呈现函数仅仅获得一个来自 ListView 数据源的条目。然后它将会创建该特定条目所需的 HTML 元素，然后返回根路径元素，ListView 可以将该根路径元素添加到 DOM。这是确凿出现的情况，但是还有两个额外的注意事项。首先，条目数据本身可以异步加载，因此，将元素创建与该数据的可用性相关联起来就很有必要。另外，呈现条目本身的过程可能还涉及其他异步操作，例如从远程 URI 加载图片，或者在条目数据中标识的其他文件中读取数据。事实上，我们将看到不同的优化级别，在条目元素请求和这些元素的实际传输之间允许任意数量的异步操作。

因此，重申一下，您可以看到呈现器会涉及到承诺。举例来说，ListView 并不直接为呈现器提供条目数据，它为该数据提供承诺。并非函数直接返回该条目的根路径元素，而是返回该元素的承诺。这允许 ListView 同时加入许多条目呈现承诺，并且等待（异步）直到整个页面得以呈现。事实上，它执行此操作以智能地管理构建不同页面的方式，首先构建可视条目的页面，然后构建用户最有可能下次向前平移和向后平移到的两个屏幕外页面。此外，具有所有这些承诺意味着，如果用户平移走，则 ListView 可以轻松地取消未完成条目的呈现，这样可以避免不必要的元素创建。

我们可以查看在示例的 simpleRenderer 函数中是如何使用这些承诺的：

function simpleRenderer(itemPromise) {
    return itemPromise.then(function (item) {
        var element = document.createElement("div");
        element.className = "itemTempl";
        element.innerHTML = " + item.data.thumbnail +
            "' alt='Databound image' />" + item.data.title + "
";
        return element;
    });
}

此代码首先会将已完成处理程序附加到 itemPromise。当条目数据可用并且有效地创建元素时，将调用该处理程序。不过，再次强调，我们实际上并没有直接返回元素 — 而是返回了利用该元素履行的承诺。也就是说，从 itemPromise.then()的返回值是利用该元素履行的承诺（ListView 是否需要以及何时需要）。

返回承诺允许我们在必要时执行其他异步操作。在这种情况下，呈现器可以仅将这些中间承诺链接起来，从链中的最后一个 then 中返回承诺。例如：

function someRenderer(itemPromise) {
    return itemPromise.then(function (item) {
        return doSomeWorkAsync(item.data);
    }).then(function (results) {
        return doMoreWorkAsync(results1);
    }).then(function (results2) {
        var element = document.createElement("div");
        // use results2 to configure the element
        return element;
    });
}

请注意，这是一种我们在链的末尾不使用 done 的情况，因为我们从最后一个 then 调用中返回了承诺。ListView 负责处理这个过程中可能引发的任何错误。

占位符呈现器

ListView 优化的下一个阶段使用占位符呈现器，可以将元素构建分到两个不同阶段进行。这样将允许 ListView 只要求对于定义列表的整体布局必要的元素，而无需在每个条目内构建所有元素。因此，ListView 可以快速完成其布局过程，并且对后续的输入继续保持高度及时响应的状态。然后它可以在以后要求提供元素的其余部分。

占位符呈现器会返回一个具有两个属性的对象，而不是承诺：

element 条目结构中的顶级元素，足以定义条目的大小和形状，它不依赖于条目数据。
renderComplete 当构建其余的元素内容时要履行的承诺，即，依旧会从 itemPromise.then 开始从您拥有的任意链处返回承诺。

ListView 足够智能，可以检查您的呈现器是返回一个承诺（如上基本情况），还是返回具有 element 和 renderComplete 属性的对象（更为高级的情况）。因此先前 simpleRenderer 的同等占位符呈现器（在示例中）如下所示：

function placeholderRenderer(itemPromise) {
    // create a basic template for the item that doesn't depend on the data
    var element = document.createElement("div");
    element.className = "itemTempl";
    element.innerHTML = "...
";

    // return the element as the placeholder, and a callback to update it when data is available
    return {
        element: element,

        // specifies a promise that will be completed when rendering is complete
        // itemPromise will complete when the data is available
        renderComplete: itemPromise.then(function (item) {
            // mutate the element to include the data
            element.querySelector(".content").innerText = item.data.title;
            element.insertAdjacentHTML("afterBegin", " +
                item.data.thumbnail + "' alt='Databound image' />");
        })
    };
}

请注意，element.innerHTML 分配可以移到 renderComplete 内，因为示例的 css/scenario1.css 文件中的itemTempl 类会直接指定条目的宽度和高度。在 element 属性中包括该类的原因是它在占位符中提供默认的 “…” 文本。您可以就像轻松地使用一个引用了在所有条目间共享的小型包内资源的 img 元素那样（因此可以快速呈现）。

循环占位符呈现器

下一个优化是循环占位符呈现器，不会在涉及承诺的位置添加任何新的内容。它会将第二个参数的感知度添加到名为 recycled 的呈现器，它是以前呈现过但现在不再可见的条目的根路径元素。即，循环的元素已经有自己的子元素，因为您可以简单地替换该数据，可能需要对一些元素进行微调。对于全新条目所需的调用，可以避免大部分成本高昂的其他方式的元素创建调用，这样在呈现的过程中可以节省不少时间。

当它的 loadingBehavior 设置为“randomaccess”时，ListView 可能会提供一个循环的元素。如果指定循环，则您可以将数据清除出元素（及其子元素），将其返回为占位符，然后在 renderComplete 内填充数据并创建所有其他子元素（如果需要）。如果未提供循环的元素（当 ListView 首次创建或者当 loadingBehavior 为“incremental”时），您将再次创建该元素。下面是针对此种变化情况的示例代码：

function recyclingPlaceholderRenderer(itemPromise, recycled) {
    var element, img, label;
    if (!recycled) {
        // create a basic template for the item that doesn't depend on the data
        element = document.createElement("div");
        element.className = "itemTempl";
        element.innerHTML = "" +
            "...
";
    }
    else {
        // clean up the recycled element so that we can reuse it 
        element = recycled;
        label = element.querySelector(".content");
        label.innerHTML = "...";
        img = element.querySelector("img");
        img.style.visibility = "hidden";
    }
    return {
        element: element,
        renderComplete: itemPromise.then(function (item) {
            // mutate the element to include the data
            if (!label) {
                label = element.querySelector(".content");
                img = element.querySelector("img");
            }
            label.innerText = item.data.title;
            img.src = item.data.thumbnail;
            img.style.visibility = "visible";
        })
    };
}

在 renderComplete 中，请确保检查存在着您不是为新占位符创建的元素，例如 label，如果需要请在此处创建他们。

如果您希望以更常规地方式清除循环的条目，请注意，您可以为 ListView 的 resetItem 属性提供一个函数。此函数将包含与上面所示类似的代码。对于 resetGroupHeader 属性也是同样，因为您可以对组标头以及条目使用模板功能。我们尚未涉及太多此话题，是因为组标头非常少，并且通常没有相同的性能影响。不过，此功能仍然强大。

多级呈现器

现在我们来看倒数第二级的优化，多级呈现器。这会令循环占位符呈现器延迟加载图片和其他媒体，直到条目的其他部分已经在 DOM 中完全呈现。它还会延迟诸如动画显示之类的效果，直到条目确实完全显示在屏幕上。这是意识到用户会经常在 ListView 内快速平移，所以异步延迟很多耗费资源的操作直到 ListView 达到一种稳定的状态和位置，这是非常有意义的。

ListView 提供必要的挂钩作为来自 itemPromise 的 item 结果的成员：名为 ready 的属性（承诺）和两个方法 loadImage 和 isOnScreen，都会返回（更多！）承诺。即：

renderComplete: itemPromise.then(function (item) {
    // item.ready, item.loadImage, and item.isOnScreen available
})

下面是它们的使用方式：

ready 从链内第一个已完成处理程序中返回此承诺。当元素的整体结构已经被呈现并且可见时，就履行了此承诺。这意味着您可以利用一个已完成处理程序来链接另一个 then，在该处理程序中您可以执行其他可视化后操作，诸如加载图片。
loadImage 从 URI 中下载图片，并在指定的 img 元素中显示该图片，然后返回一个利用同一元素履行的承诺。您可以将已完成处理程序附加到此承诺，它本身会从 isOnScreen 返回承诺。请注意，loadImage 将创建一个 img 元素（如果未提供该元素的话），并且将其提供给您的已完成处理程序。
isOnScreen 返回一个承诺，其履行值为一个布尔值，指示该条目是否可见。在当前的实施中，这是一个已知值，因此将同步履行承诺。尽管是打包在一个承诺中，但是该值可以用在一个较长的链中。

我们会在示例的 multistageRenderer 函数中查看到所有情形，其中图片加载的完成用于启动一个淡出动画。下面的内容是从 renderComplete 承诺中返回的结果：

renderComplete: itemPromise.then(function (item) {
    // mutate the element to update only the title
    if (!label) { label = element.querySelector(".content"); }
    label.innerText = item.data.title;

    // use the item.ready promise to delay the more expensive work
    return item.ready;
    // use the ability to chain promises, to enable work to be cancelled
}).then(function (item) {
    // use the image loader to queue the loading of the image
    if (!img) { img = element.querySelector("img"); }
    return item.loadImage(item.data.thumbnail, img).then(function () {
        // once loaded check if the item is visible
        return item.isOnScreen();
    });
}).then(function (onscreen) {
    if (!onscreen) {
        // if the item is not visible, don't animate its opacity
        img.style.opacity = 1;
    } else {
        // if the item is visible, animate the opacity of the image
        WinJS.UI.Animation.fadeIn(img);
    }
})

尽管有很多内容，我们仍然还有一个基本承诺链在这里。呈现器中的第一个异步操作更新了条目元素结构的简单部分，比如文本。然后它会在 item.ready 中返回承诺。当履行该承诺时，或者更准确地说，如果该承诺被履行后，我们使用条目的异步 loadImage 方法开始图片的加载，从已完成处理程序中返回 item.isOnScreen 承诺。这意味着 onscreen 可见性标志会在链中传递到最终的已完成处理程序。是否履行以及何时履行了 isOnScreen 承诺，意味着该条目确实可见，我们可以执行类似动画等相关操作。

我强调是否履行了承诺，是因为当所有这一切正发生的时候，很可能又是用户在 ListView 内平移。将所有这些承诺链在一起，令 ListView 可能在这些条目平移出视图和/或任何缓存页面时取消异步操作。只要说 ListView 控件已经经历了很多性能测试，这就足矣！

另外一点也很重要，就是要再次提醒我们自己在所有这些链中使用 then，因为我们仍会在 renderComplete 属性内的呈现函数中返回了承诺。我们永远不会是这些呈现器中链的末尾，因此我们永远不会在末尾使用 done。

缩略图批处理

最后的优化确实是 ListView 控件的杀手锏。在名为 batchRenderer 的函数中，我们发现了 renderComplete 的此结构（已省略了大部分代码）：

renderComplete: itemPromise.then(function (item) {
    // mutate the element to update only the title
    if (!label) { label = element.querySelector(".content"); }
    label.innerText = item.data.title;

    // use the item.ready promise to delay the more expensive work
    return item.ready;
    // use the ability to chain promises, to enable work to be cancelled
}).then(function (item) {
    // use the image loader to queue the loading of the image
    if (!img) { img = element.querySelector("img"); }
    return item.loadImage(item.data.thumbnail, img).then(function () {
        // once loaded check if the item is visible
        return item.isOnScreen();
    });
}).then(function (onscreen) {
    if (!onscreen) {
        // if the item is not visible, don't animate its opacity
        img.style.opacity = 1;
    } else {
        // if the item is visible, animate the opacity of the image
        WinJS.UI.Animation.fadeIn(img);
    }
})

这与 multistageRenderer 基本相同，除了在 item.loadImage 调用和 item.isOnScreen 检查之间对名为 thumbnailBatch 函数的神秘调用以外。在链中放置 thumbnailBatch 指示其返回值必须是已完成处理程序，其本身会返回另一个承诺。

有点糊涂了？好，我们现在就来探个究竟！不过首先需要一些有关我们将要完成内容的更多背景内容。

如果我们的 ListView 只具有一个条目，则各种不同的加载优化的效果可能不会那么显著。但 ListViews 通常具有很多条目，并且将会为每个条目调用呈现函数。在前面的 multistageRenderer 部分中，每个条目的呈现都会启动异步 item.loadImage 操作，从任意 URI 下载其缩略图，每个操作所需花费的时间都不固定。因此对于整个表，我们可能会同时调用一批 loadImage，等待其特定缩略图完成时会呈现每个条目。到目前为止一切顺利。

在 multistageRenderer 中并不是全部可见的一个重要特征是缩略图的 img 元素已经在 DOM 中，下载一经完成，loadImage 函数会设置该图片的 src 属性。当我们一经从承诺链的其余部分返回时，这反过来也会触发呈现引擎的更新，会在该点后同步。

然后，在可能的情况下，一批缩略图也会在很短的时间内返回到 UI 线程。这会导致呈现引擎的过度繁忙，以及低劣的视觉效果。为了避免这种混乱，我们希望在这些 img 元素位于 DOM 之前完全创建它们，然后成批添加它们，以便可以在单一的呈现过程中处理这些元素。

该示例利用名为 createBatch 的函数通过一些承诺魔力代码来完成上述操作。仅会为整个应用调用一次 createBatch，其结果（另一个函数）会存储在名为 thumbnailBatch 的变量中：

var thumbnailBatch;
thumbnailBatch = createBatch();

对此 thumbnailBatch 函数的调用（就像我在这里引用它一样）会再次插入到呈现器的承诺链中。考虑到我们马上要看到的批处理代码的性质，此插入的目的就是将一组已加载的 img 元素分组到一起，然后在适合的间隔释放它们以便进一步处理。只需要在呈现器中查看承诺链，对 thumbnailBatch() 的调用就必须返回已完成处理程序函数，该函数会返回一个承诺，该承诺的履行值（查看链中的下一步）必须是 img 元素，可以添加到 DOM。在进行批处理后将这些图片添加到 DOM，我们会将整个组添合并到同一呈现过程。

这是 batchRenderer 和上述 multistageRenderer 之间的重要区别：后来，缩略图的 img 元素已经存在于 DOM 中，会作为第二个参数传递给 loadImage。因此当 loadImage 设置了图片的 src 属性，将会触发呈现更新。不过，在 batchRenderer 内，该 img 元素是在 loadImage 内单独创建的（其中 src 也得到了设置），但是 img 尚未在 DOM 中设置。它只是在 thumbnailBatch 步骤完成后添加到 DOM，令其成为单一布局过程内的一个组。

因此现在让我们来看一下批处理是如何工作的。下面是整个 createBatch 函数：

function createBatch(waitPeriod) {
    var batchTimeout = WinJS.Promise.as();
    var batchedItems = [];

    function completeBatch() {
        var callbacks = batchedItems;
        batchedItems = [];
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i]();
        }
    }

    return function () {
        batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

        var delayedPromise = new WinJS.Promise(function (c) {
            batchedItems.push(c);
        });

        return function (v) {
            return delayedPromise.then(function () {
                return v;
            });
        };
    };
}

再强调一次，createBatch 仅调用一次，将会为列表中的每个已呈现条目调用一次其 thumbnailBatch 结果。然后将会调用 thumbnailBatch 生成的已完成处理程序，不论何时 loadImage 操作完成。

就好像已完成处理程序已经直接轻松地插入呈现函数一样，但是我们在这里要执行的是跨多个条目之间的协调活动，而不是按条目执行。通过在 createBatch 开始处创建和初始化的两个变量来实现协调：batchedTimeout,（初始化为一个空承诺）和 batchedItems（初始化一个最初为空的函数数组）。createBatch 还会声明一个函数，completeBatch 只是清空 batchedItems 在数组中调用每个函数：

function createBatch(waitPeriod) {
    var batchTimeout = WinJS.Promise.as();
    var batchedItems = [];

    function completeBatch() {
        var callbacks = batchedItems;
        batchedItems = [];
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i]();
        }
    }

    return function () {
        batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

        var delayedPromise = new WinJS.Promise(function (c) {
            batchedItems.push(c);
        });

        return function (v) {
            return delayedPromise.then(function () {
                return v;
            });
        };
    };
}

现在让我们看 thumbnailBatch（从 createBatch 返回的函数）内发生的情况，将会为每个要呈现的条目再次调用该函数。首先，我们取消所有现有 batchedTimeout 并立即重新创建它：

batchTimeout.cancel();
        batchTimeout = WinJS.Promise.timeout(waitPeriod || 64).then(completeBatch);

第二行显示在“关于承诺”博文中介绍的未来的传输/履行模式：它会在延迟 waitPeriod 毫秒后（默认值为 64ms）调用 completeBatch。这意味着只要在前一次调用的 waitPeriod 内再次调用 thumbnailBatch，batchTimeout 将被重设为另一个 waitPeriod。因为仅在 item.loadImage 调用完成之后才会调用 thumbnailBatch，我们可以有把握地说，在上次调用的 waitPeriod 内完成的任何 loadImage 操作都将包括在同一批处理中。当时间超过 waitPeriod 时，就会处理该批处理 — 图片会添加到 DOM — 下一批处理开始。

在处理此超时业务后，thumbnailBatch 创建了一个新的承诺，只是将完成的调度程序函数推送到 batchedItems 数组：

var delayedPromise = new WinJS.Promise(function (c) {
         batchedItems.push(c);
     });

请注意，在“关于承诺”中承诺只是一个代码构造，如此而已。新创建的承诺内及其自身没有异步行为：我们只是将完成的调度程序函数 c 添加到 batchedItems。不过，当然，我们在 batchedTimeout 异步完成前不会利用该调度程序执行任何操作，因此事实上这里存在着异步关系。当发生超时时，我们清除了批处理（在 completeBatch 内），我们会将在别处指定的已完成处理程序调用到 delayedPromise.then。

这将会为我们带来 createBatch 中的最后一行代码，是 thumbnailBatch 实际返回的函数。此函数正是已完成处理程序，将会插入到呈现器的整个承诺链：

return function (v) {
           return delayedPromise.then(function () {
               return v;
           });
       };

事实上，让我们把这段代码直接放到承诺链中，因为我们可以看到产生的关系：

return item.loadImage(item.data.thumbnail);
          }).then(function (v) {
              return delayedPromise.then(function () {
                  return v;
              });
          ).then(function (newimg) {

现在，我们可以看到参数 v 是 item.loadImage 的结果，是 img 元素为我们创建的。如果我们不想执行批处理，我们可以就说 return WinJS.Promise.as(v)，整个链将仍可以工作：然后将同步传递 v，并且在下一步骤中显示为 newimg。

尽管如此，我们将会从 delayedPromise.then 返回承诺，将不会利用 v 履行该承诺，直到履行了当前的 batchedTimeout。这时 — 当 loadImage 完成之间存在 waitPeriod 的间隙时 — 那些 img 元素将会传输到链中的下一步，在那里它们会被添加到 DOM。

就先介绍这么多内容！

结语

HTML ListView 优化性能示例中演示的五个不同的呈现函数都有一个共同的通性：他们显示 ListView 和呈现器之间的异步关系 — 通过承诺表示 — 为呈现器在如何以及何时为列表中的条目生成元素方面提供了极大的灵活性。在编写自己的应用时，您为 ListView 优化使用的策略很大程度上取决于您数据源的大小、条目本身的复杂性，以及您为这些条目异步获取的数据量（例如下载远程图片）。很明显，您希望在达到性能目标的前提下将条目呈现器尽量保持简单。但是，无论如何，您现在具有帮助 ListView — 和您的应用 — 达到性能最佳所需的所有工具。

Kraig Brockschmidt
Windows 生态系统团队项目经理
使用 HTML、CSS 和 JavaScript 编程 Windows 8 应用作者

参与Game On Virtual Event

Windows 8 Team — Wed, 12 Jun 2013 11:36:26 GMT

游戏软件是 Windows 应用商店的重要组成部分。如果您计划在 Windows 应用商店发布您的游戏，我们将非常荣幸的为您推荐这次有关于游戏开发的虚拟活动。无论您是游戏制作新手还是专业人士，这次的活动都将会是免费的和开放的。

我们将会使用 YoYo Game 的GameMaker: Studio 来告诉您如何在最短的时间里发布一个高质量的游戏。GameMaker:Studio 拥有强大的内建设计功能和抓取工具，即便您没有相关的游戏开发经验它也能让您以最快的速度进入角色。如果您已经是拥有一定经验的游戏制作人，那么它的高级工具将会更加丰富您的经验，让您能够制作出独一无二的游戏。

网上活动将会在太平洋时间的6月15日星期六启动，其将包括一个发布会和在线交流。在带您探索如何去开发游戏的同时，您将会有机会了解到更多形式的游戏以及如何加入图片，关卡以及游戏背景音乐等等。我们还会采用一对一的模式在整周连续不断的通过 GameMaker 论坛向您提供帮助。

无论您是一个初学者或者是第一次经历开发，又或者您是一个经验丰富的专业人士，这次的活动将会协助您开始游戏的制作，上传并最终发布到Windows 应用商店。想要了解更多的信息或是查看免费的资源和工具，您可以登录 http://msdnevents.com/gameon/.

--Robert Rodriguez-Lawson, 高级内容发布经理，Windows 内容制作人

凭据保险箱：在 Windows 应用商店应用中处理用户和密码的解决方案

Windows 8 Team — Tue, 04 Jun 2013 19:40:00 GMT

如果您还未听说过 Windows 应用商店应用可用的凭据保险箱，现在就来了解一下相关信息吧。为什么呢？因为不仅可以简化存储和检索用户凭据的任务，它还可以安全地存储用户凭据，并且凭据可以随着用户的 Microsoft 帐户一起“免费”漫游。

假设您有一个应用，该应用会连接到一个服务以访问受保护的资源（如媒体文件、社交网络等）。您的服务需要每个用户的登录信息。因此，您已经在应用内构建了 UI，可以获取用户的用户名和密码，以便使用户登录到服务。这一切都运行流畅无误。

现在您希望为您的用户提供更好的功能，安全地存储他们的登录信息，这样，他们不必在每次使用您的应用时都需要登录一次。输入凭据保险箱。只需几次简单地调用凭据保险箱 API，您可以为用户存储用户名和密码，并可方便地检索用户名和密码，在下次用户打开应用时帮助用户方便地登录。

安全存储

凭据保险箱的一个显著优势就在于可以实现，应用将用户凭据存储在一个安全的位置，当存储在磁盘上时，凭据信息是加密保存的。您当然可以将应用的用户凭据存储在本地存储中的一个文件内，但是以纯文本的形式存储用户凭据会带来潜在的安全漏洞。如果用户的系统因某种方式受到了损害，则用户的用户名和密码就会被轻易地访问和控制。如果使用凭据保险箱来存储用户名和密码，则恶意来源最多就是得到一个加过密的文件。

每个 Windows PC 用户的凭据保险箱都是独一无二的，只有存储凭据的应用才可以访问凭据。也就是说，您只能检索为您的应用存储的凭据。类似地，其他任何应用都不能获取您的应用在保险箱中存储的凭据。

漫游凭据

用户可以获得的另一项好处是，当您使用凭据保险箱存储用户的用户名和密码时，存储的凭据可以随用户的 Microsoft 帐户漫游到他们使用该 Microsoft 帐户的任何其他可信机器。这可以令安全应用对您的用户来说更为方便，因为您的应用可以自动为用户登录 - 无需重新提示用户输入凭据 - 在他们已经利用 Microsoft 帐户安装了您的应用并且有相关 Microsoft 帐户的任何可信电脑上。

其工作方式与域帐户有一点不同。如果存在利用 Microsoft 帐户存储的凭据，并且您将该帐户与域帐户相关联（例如您工作时使用的帐户），则您的凭据将漫游到该域帐户。不过，利用域帐户登录时添加的任何新凭据将不会漫游。这可以确保该域的私有凭据不会在域以外公开。

存储用户凭据

在凭据保险箱中存储用户凭据是一个快捷的两步过程。首先，您使用来自 Windows.Security.Credentials 命名空间中的 PasswordVault 对象获取对凭据保险箱的引用。然后，您创建一个 PasswordCredential 对象，其中包含您的应用的标识符、用户名和密码，并将这些信息传递给 PasswordVault.Add() 方法以便将凭据添加到保险箱。

var vault = new Windows.Security.Credentials.PasswordVault();
vault.Add(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

JavaScript

var vault = new Windows.Security.Credentials.PasswordVault();
vault.add(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

检索用户凭据

在拥有对 PasswordVault 对象的引用后，您可以有几种方式来从凭据保险箱检索用户凭据。

您可以利用 PasswordVault.RetrieveAll() 方法在保险箱中检索用户为您的应用提供的所有凭据。
如果您知道已存储凭据的用户名，则可以利用 PasswordVault.FindAllByUserName() 方法为该用户名检索所有凭据。
如果您知道已存储凭据的资源名称，则可以利用 PasswordVault.FindAllByResource() 方法为该资源名称检索所有凭据。
最后，如果您既知道凭据的用户名又知道资源名称，则可以利用 PasswordVault.Retrieve() 方法只检索该凭据。

让我们来看一个我们在应用中全局存储资源名称，并且如果我们为用户发现了凭据就会为用户自动登录的示例。如果我们为用户查找发现了多个凭据，我们会询问用户选择一个在登录时使用的默认凭据。

private string resourceName = "My App";
private string defaultUserName;

private void Login()
{
    var loginCredential = GetCredentialFromLocker();

    if (loginCredential != null)
    {
        // There is a credential stored in the locker.
        // Populate the Password property of the credential
        // for automatic login.
        loginCredential.RetrievePassword();
    }
    else
    {
        // There is no credential stored in the locker.
        // Display UI to get user credentials.
        loginCredential = GetLoginCredentialUI();
    }

    // Log the user in.
    ServerLogin(loginCredential.UserName, loginCredential.Password);
}


private Windows.Security.Credentials.PasswordCredential GetCredentialFromLocker()
{
    Windows.Security.Credentials.PasswordCredential credential = null;

    var vault = new Windows.Security.Credentials.PasswordVault();
    var credentialList = vault.FindAllByResource(resourceName);
    if (credentialList.Count > 0)
    {
        if (credentialList.Count == 1)
        {
            credential = credentialList[0];
        }
        else
        {
            // When there are multiple usernames,
            // retrieve the default username. If one doesn’t
            // exist, then display UI to have the user select
            // a default username.

            defaultUserName = GetDefaultUserNameUI();

            credential = vault.Retrieve(resourceName, defaultUserName);
        }
    }

    return credential;
}

JavaScript

var resourceName = "My App";
var defaultUserName;

function login() {
    var loginCredential = getCredentialFromLocker();

    if (loginCredential != null) {
        // There is a credential stored in the locker.
        // Populate the Password property of the credential
        // for automatic login.
        loginCredential.retrievePassword();
    } else {
        // There is no credential stored in the locker.
        // Display UI to get user credentials.
        loginCredential = getLoginCredentialUI();
    }

    // Log the user in.
    serverLogin(loginCredential.userName, loginCredential.password);
}


function GetCredentialFromLocker() {
    var credential = null;

    var vault = new Windows.Security.Credentials.PasswordVault();
    var credentialList = vault.findAllByResource(resourceName);
    if (credentialList.length > 0) {
        if (credentialList.length == 1) {
            credential = credentialList[0];
        } else {
            // When there are multiple usernames,
            // retrieve the default username. If one doesn’t
            // exist, display UI to have the user select
            // a default username.

            defaultUserName = getDefaultUserNameUI();
            credential = vault.retrieve(resourceName, defaultUserName);
        }
    }

    return credential;
}

删除用户凭据

在凭据保险箱中删除用户凭据也是一个快捷的两步过程。再一次，您使用来自 Windows.Security.Credentials 命名空间中的 PasswordVault 对象获取对凭据保险箱的引用。然后，您将要删除的凭据传递给 PasswordVault.Remove() 方法。

var vault = new Windows.Security.Credentials.PasswordVault();
vault.Remove(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

JavaScript

var vault = new Windows.Security.Credentials.PasswordVault();
vault.remove(new Windows.Security.Credentials.PasswordCredential(
    "My App", username, password));

安全且易用

正如您所见，凭据保险箱是一种易于使用的功能，可以实现验证用户身份以及存储用户凭据以便将来使用这些任务的简化 - 所有这些都是在非常安全的方式下实现。

其他 Windows 8 应用身份验证主题包括 Web 身份验证代理，您可以使用该代理从网站（例如 OAuth）检索身份验证标记，并基于用户的 Microsoft 帐户来个性化您的应用。

有关更多信息，请参阅：

--Windows 开发者内容，高级内容开发者 Doug Rothaus

特别感谢 Yashar Bahman 对本篇博文撰写所作出的贡献。

使用地理位置和 Bing 地图创建位置感知应用

Windows 8 Team — Tue, 28 May 2013 11:01:44 GMT

通过将用户的位置一并键入您的应用的业务逻辑，您可以方便地为用户提供其当前所在地理位置的天气、优惠券、体育活动及赛事或音乐会等相关信息。您可以使用 Windows 8 的地理位置功能以及 Bing Maps SDK，创建能够感知位置的出色 Windows 应用商店应用。

让我们来看一下，您的应用如何利用 IP 地址、WiFi 网络或 GPS 数据使用位置服务来为用户提供特定于位置的信息。一旦您有了位置信息，就可以使用 Bing 地图 SDK 向用户显示他们所在的位置。

检索位置

Windows.Devices.Geolocation 命名空间用于检索您的位置。您使用 GPS、WiFi 网络还是 IP 地址来检索用户的位置取决以下两个主要因素：

所要求的位置精确度级别。这是符合您的应用需求的理想精确度级别。
位置数据的可用性。就是说，并不是所有的设备都内置 GPS。或者，当请求位置时，网络或 Wi-Fi 连接可能不可用。

所需的精确度

请求位置时，您的应用应指定需要的精确度，以便尽快地返回给定范围内的位置数据。每种位置类型具有不同的精确程度：

GPS – GPS 提供的位置精确度最高，可以精确到大约 10 米。不过，如果 GPS 传感器需要“唤醒”并获取卫星数据，然后再对数据进行三角化处理，可能需要一到两分钟返回位置详细信息。不过，GPS 一经获得卫星连接，它就可以快速地获取下一个位置点。当然，使用 GPS 越多，消耗的电量就越大。Geolocator.DesiredAccuracy 属性必须设置为“高”，这样 GPS 才能获取数据。
Wi-Fi – Wi-Fi 连接可以提供 300-500 米的精确度。如果连接正常，则返回位置数据的速度要快于 GPS 获取卫星连接的速度。将 DesiredAccuracy 属性设置为“默认”，可以利用 Wi-Fi 获取位置数据。
IP – IP 级别的分辨力可以达到 1 公里级别的精确度。如果网络连接正常，则返回位置数据的速度会比 GPS 实现卫星连接的速度要快。您还可以将 DesiredAccuracy 属性设置为默认，这样可以利用 IP 获取位置数据。位置服务返回它能获取的最高精度位置数据，并且您可以通过 Geocoordinate.Accuracy 属性知道精确度。

请仔细考虑您所需的精确度值。它会影响您的应用的性能和耗电量。例如，如果您的应用提供天气预报，您几乎无需 GPS 的高精度。还要确保基于返回数据的精确度显示错误半径，以显示您的数据的精确度。下面是 C# 代码来设置您所需的精确度：

Geolocator geolocator = new Geolocator();
geolocator.DesiredAccuracy = Windows.Devices.Geolocation.PositionAccuracy.High;

不论您需要何种精确程度，获取您的位置的数据调用为：

Geoposition pos = await geolocator.GetGeopositionAsync().AsTask(token);

下面是 JavaScript 代码创建 Geolocator 类、设置所需精确度，然后获取当前位置的实例。请注意，下面的 ‘promise’ 变量是 WinJS.Promise 对象 – 您需要使用 done 方法来从对 getGeopositionAsync 的调用中访问数据。

JavaScript

var geolocator = Windows.Devices.Geolocation.Geolocator();
geolocator.desiredAccuracy =
Windows.Devices.Geolocation.PositionAccuracy.high;

// Get the geoposition, capturing the request in a 'promise' object.
var promise = geolocator.getGeopositionAsync();

请记住，如果您将所需的精确度设置为“高”，不能保证用户的设备就可以返回高精确度。他们的电脑可能没有 GPS，也可能关闭了该功能，或者未连接到 Wi-Fi 等。请始终准备好小心地处理这些较低精确度数据的实例。您如何处理取决于您的应用的功能。您要继续使用低精确度的数据吗？您要获取 GPS 级别的精确度吗？请参阅开发位置感知应用的指导性原则了解更多详细信息。

Bing 地图

Bing 地图应用是使自己适应所获得位置数据的精确度的应用。在一台桌面电脑上，通常不会有 GPS 或 Wi-Fi，它会基于 IP 地址查找位置，然后在绘制当前位置的地图时放大到地区级别。笔记本电脑上通常具有一个无线卡，它使用 Wi-Fi 来获取更精确的位置，然后在显示当前位置时进一步放大。如果用户放得更大，则当前位置图标会显示一个错误半径。在具有 GPS 功能的设备上，Bing 地图从 GPS 获取高精确度的位置数据，并显示一个更为精准的位置。

必应 Bing 天气

如上所述，像必应 Bing 天气这样的应用只需要区域信息。因此，它可以指定，它仅需低精确度数据，从而可以更快地获取位置数据值，这使得该应用的响应速度更快。其他只需要区域级别信息的应用的示例包括电台指南、购物信息或当地新闻资讯等。

利用 Bing 地图 SDK 显示位置数据

您调用 GetGeopositionAsync 获得位置信息后，可能希望在地图上显示该位置信息。

首先，请将 Geoposition 转换为 Bing 地图可以使用的位置，使用代码如下：

Location location = new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude);

JavaScript：

promise.done(
  function (pos) {
    // Get the coordinates of the current location.
    var coord = pos.coordinate,
    location = new Microsoft.Maps.Location(coord.latitude, coord.longitude);
 
  },
  function (err) {
    // Handle the error.
  });

接下来，使用 Bing 地图显示位置。您可以在此处获取 Bing 地图 SDK。您还需要在 Bing 地图门户上注册以获取 Bing 地图密钥，并按照获取 Bing 地图密钥中的说明操作。注册时，请确保您查看了每个类型的密钥的使用限制，选择一个适合您的应用的密钥。
为您的设计工具添加 Bing 地图控件，并将密钥插入凭据中。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleMapping"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Bing.Maps"
    x:Class="SimpleMapping.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Maps:Map x:Name="Map" Margin="0,120,0,0" Credentials="Insert Your Bing Maps Key Here"/>
    Grid>
Page>

现在您可以在应用内显示地图的页面中使用以下代码。这会设置地图的缩放级别，并显示位置。请参阅如何在 Bing 地图上显示您的位置了解关于缩放级别的更多详细信息：

double zoomLevel = 13.0f;

Map.SetView(location, zoomLevel);

使用 JavaScript 和 HTML 向您的应用添加 Bing 地图控件所需的工作更多一些。将以下