javascript - 在 SharePoint 中调用 'SP.ClientContext.executeQueryAsync' 的最佳/首选方式

Question

我一直在学习客户端对象模型并遇到了方法 executeQueryAsync .我发现有很多方法可以调用此方法。我发现的一些是这些:

var context = new SP.ClientContext.get_current();

// Option 1
context.executeQueryAsync(
    function(sender, args){ },
    function(sender, args){ }
);

// Option 2
context.executeQueryAsync(
    Function.createDelegate(this, _onSucceed), 
    Function.createDelegate(this, _onFail)
);

// Option 3
context.executeQueryAsync(
    Function.createDelegate(this, this._onSucceed), 
    Function.createDelegate(this, this._onFail)
);

// Option 4
context.executeQueryAsync(_onSucceed, _onFail);

哪种方式是最佳/首选方式？另外，语句 Function.createDelegate 做了什么？ documentation for this function对我来说似乎很神秘。

Answer 1

首先，我要说的是没有“最佳方式”，因为它们的行为都略有不同...其次，我要补充的是，这并不是 SharePoint 或 executeQueryAsync 特定的东西，因为它通常是 JS 的东西。 ..

接下来我们需要了解 executeQueryAsync 需要两个函数作为参数:第一个是 executeQueryAsync 成功时要执行的函数，第二个是如果方法遇到错误。这些函数传递的参数(来自 executeQueryAsync，而不是来自您的 JS)表示发送对象以及可以包含一些数据的参数对象(args.get_message() 和args.get_stackTrace() 在调用失败的情况下很常见)

在您的“选项 1”示例中，executeQueryAsync 被赋予两个匿名函数，您将无法在任何地方重复使用它们，但如果行为很简单，这可能就足够了。

在选项 2 中，您使用 createDelegate 方法为成功和失败回调提供上下文——这说明 JavaScript 中的范围；如果您需要引用一个只能在调用 executeQueryAsync 的函数中访问的变量，则需要使用这种模式，以便回调中的 this 引用调用 executeQueryAsync 的函数，而不是您现在所在的成功或失败函数。您可以将创建委托(delegate)视为调用其他函数的调用函数，但说“我希望该函数能够看到我能看到的东西，无论它位于代码中的什么位置。这可能看起来有点神秘，但这就是 JavaScript 中的作用域……您可以通过在更高作用域级别引用变量来完全避免这样做的需要(比如在包含调用方法以及成功和成功的函数内部)故障方法)

选项 3 就像选项 2，除了它只是指定 _onSucceed 或 _onFail 函数应该包含在调用对象中

选项 4 与选项 1 类似，只是您为函数命名(并且它们在当前范围内可用)并按名称调用它们。

我通常使用选项 2 或选项 4 之类的东西——但我希望您能看到它实际上仅取决于您尝试构建代码的方式。

编辑:回应关于 Function.createDelagate() 的评论——它似乎只是 ASP.NET 脚本资源中的一个助手；除了调用 apply()(这是执行此操作的标准 JS 方式 -- see MDN documentation here)，它什么都不做。它还可能在 ASP.NET 的某处提供一些向后兼容性，但我不太确定!

这是我的 SP 环境中脚本资源文件中的函数代码:

Function.createDelegate = function(a, b) {
    return function() {
        return b.apply(a, arguments)
    }
};

作为奖励，我在考虑如何使用 executeQueryAsync 并且我意识到我实际上更频繁地使用它，就像选项 1，使用 jQuery 延迟的 promise 模式，如下所示:

function getSPDataAsync(context) {
    var deferred = $.Deferred();
    context.executeQueryAsync(function(sender, args) {
        deferred.resolve(sender, args);
    }, function(sender, args) {
        deferred.reject(sender, args);
    });
    return deferred.promise();
}

然后你可以做一些不太像意大利面条的事情，比如:

...
ctx.load(items);
getSPDataAsync(ctx).then(function() {
    //do some stuff with the data when the promise resolves
});

以防万一有人关心! :)