使用Jscex增强SharePoint 2010 JavaScript Client Object Model (JSOM)

SharePoint 2010提供了JSOM，来让我们可以直接在页面上通过JavaScript代码与SharePoint系统直接进行交互。在Web 2.0已经日益普及的今天，JavaScript在Web开发中越来越重要，所以JSOM对于SharePoint程序员来说，是一个非常好用的利器。

SharePoint 2010 JSOM对于服务器端的请求都是采用的异步方式。如果你使用过JSOM，那么对它的异步调用方式应该很熟悉了。SP.ClientContext对象有一个executeQueryAsync()方法，JSOM都是通过调用它来完成最终的服务器端请求，这个方法有2个参数，分别是成功后的回调函数和失败后的回调函数：

var ctx = SP.ClientContext.get_current();
// ...
ctx.executeQueryAsync(function() {
    // 服务器端请求成功完成
}, function() {
    // 服务器端请求失败
});

其实这种回调函数的方式，在JavaScript中算得上是最常见的一种异步代码风格。但这种风格的问题是，一旦代码的逻辑需要我们将多个异步方法“串接”起来，那么我们的JavaScript代码就会变成回调套回调，无论是编写还是阅读，都变得困难起来。

现在很多JavaScript库都开始使用Promises模型来简化异步模型，包括jQuery中新增的Deferred特性，其实都是Promises模型的一种实现。Windows 8中的WinJS默认也采用了Promises风格。但Promises模型实际上并没有彻底改变对回调函数的依赖。

嗯，说了这么多，当当当，浓重介绍Jscex，Jeffery Zhao同志精心打造的用来简化JavaScript异步代码开发的一个扩展。Jscex用一种精巧的方式，在JavaScript中实现了类似.NET 4.0 TPL的异步模型。下面，我们来看看如何使用Jscex来增强SharePoint 2010 JSOM。

我选择对JSOM的扩展方式，是为SP.ClientContext添加一个方法，作为对内置executeQueryAsync()方法的替代。我们就使用executeAsync()作为新方法的名称吧。

SP.ClientContext.prototype.executeAsync = function () {
    var that = this;
    return Jscex.Async.Task.create(function (t) {
        that.executeQueryAsync(function () {
            t.complete('success');
        }, function () {
            t.complete('failure');
        });
    });
};

在为SP.ClientContext对象扩展了这个新的executeAsync()方法之后，我们就可以使用它来替代原有的executeQueryAsync()了。

我们以上一篇博客《使用JSOM创建一个SharePoint网站计数器》为例，来改造webHitCounter.js中的几个函数。

首先是getWebHitCountAsync()函数，这是这个函数之前的写法(使用了jQuery中的Deferred特性进行了封装)如下所示：

function getWebHitCountAsync() {
    return $.Deferred(function (dtd) {
        var ctx = SP.ClientContext.get_current();
        var web = ctx.get_web();
        var webProps = web.get_allProperties();
        ctx.load(webProps);
        ctx.executeQueryAsync(function () {
            var hitCount = webProps.get_fieldValues()['webHitCount'];
            if (!hitCount) {
                hitCount = 0;
            }
            dtd.resolve(hitCount);
        }, function () {
            dtd.reject(0);
        });
    }).promise();
}

这是使用Jscex对其进行了改造之后的写法：

var getWebHitCountAsync = eval(Jscex.compile('async', function () {
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var webProps = web.get_allProperties();
    ctx.load(webProps);
    $await(ctx.executeAsync());
    var hitCount = webProps.get_fieldValues()['webHitCount'];
    if (!hitCount) {
        hitCount = 0;
    }
    return hitCount;
}));

是不是清晰多了呢？函数体内，完全没有了回调函数。

接下来是increaseWebHitCountAsync()函数。由于这个函数首先需要调用getWebHitCountAsync()函数来得到当前网站计数器值，然后给这个值加一，然后再异步更新回SharePoint服务器，所以之前的代码就不得不“回调套回调”了：

function increaseWebHitCountAsync() {
    return $.Deferred(function (dtd) {
        getWebHitCountAsync().done(function (hitCount) {
            var ctx = SP.ClientContext.get_current();
            var web = ctx.get_web();
            var webProps = web.get_allProperties();
            webProps.set_item('webHitCount', ++hitCount);
            web.update();
            ctx.executeQueryAsync(function () {
                dtd.resolve();
            }, function () {
                dtd.reject();
            });
        });
    }).promise();
}

换成使用Jscex之后：

var increaseWebHitCountAsync = eval(Jscex.compile('async', function () {
    var hitCount = $await(getWebHitCountAsync());
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var webProps = web.get_allProperties();
    webProps.set_item('webHitCount', ++hitCount);
    web.update();
    $await(ctx.executeAsync());
}));

不得不说，代码比之前的版本好看多了。

我不想把本文变成一篇介绍Jscex的文章，你可以访问Jscex在github上的主页：https://github.com/JeffreyZhao/jscex，来详细了解Jscex的用法。