JavaScript异步调用框架的代码实现-javascript框架

在上一篇文章里，我们说到了要实现一个用于JavaScript异步调用的Async.Operation类，通过addCallback方法传递回调函数，并且通过yield方法返回回调结果。现在我们就来实现这个类吧。

类结构

首先我们来搭一个架子，把需要用到的似有变量都列出来。我们需要一个数组，来保存回调函数列表；需要一个标志位，来表示异步操作是否已完成；还可以学IAsyncResult，加一个state，允许异步操作的实现者对外暴露自定义的执行状态；最后加一个变量保存异步操作结果。

Async = {  
  Operation: {  
    var callbackQueue = [];  
    this.result = undefined;  
    this.state = "waiting";  
    this.completed = false;  
  }  
}

addCallback方法

接下来，我们要实现addCallback方法，它的工作职责很简单，就是把回调函数放到callbackQueue中。此外，如果此时completed为true，说明异步操作已经yield过了，则立即调用此回调。

this.yield = function(callback) {  
  callbackQueue.push(callback);  
  if (this.completed) {  
    this.yield(this.result);  
  }  
  return this;  
}

我们假设yield方法会把callbackQueue中的回调函数逐个取出来然后调用，因此如果compeleted为true，则使用已有的result再调用一次yield就可以了，这样yield自然会调用这次添加到callbackQueue的回调函数。

至于最后的return this;，只是为了方便jQuery风格的链式写法，可以通过点号分隔连续添加多个回调函数来实现JavaScript异步调用：

asyncOperation(argument)  
  .addCallback(firstCallback)  
  .addCallback(secondCallback);

yield方法

最后，我们要实现yield方法。它需要将callbackQueue中的回调函数逐个取出来，然后都调用一遍，并且保证这个操作是异步吧。

this.yield = function(result) {  
  var self = this;  
  setTimeout(function() {  
    self.result = result;  
    self.state = "completed";  
    self.completed = true;  
    while (callbackQueue.length > 0) {  
      var callback = callbackQueue.shift();  
      callback(self.result);  
    }  
  }, 1);  
  return this;  
}

通过使用setTimeout，我们确保了yield的实际操作是异步进行的。然后我们把用户传入yield的结果及相关状态更新到对象属性之上，最后遍历callbackQueue调用所有的回调函数。

小结

这样我们就做好了一个简单的JavaScript异步调用框架，完整的代码如下：

Async = {  
    Operation: function() {  
        var callbackQueue = [];  
        this.result = undefined;  
        this.state = "running";  
        this.completed = false;  
 
        this.yield = function(result) {  
            var self = this;  
            setTimeout(function() {  
                self.result = result;  
                self.state = "completed";  
                self.completed = true;  
 
                while (callbackQueue.length > 0) {  
                    var callback = callbackQueue.shift();  
                    callback(self.result);  
                }  
            }, 1);  
            return this;  
        };  
 
        this.addCallback = function(callback) {  
            callbackQueue.push(callback);  
            if (this.completed) {  
                this.yield(this.result);  
            }  
            return this;  
        };  
    }  
};

这个框架能够很好的解决调用栈中出现同步异步操作并存的情况，假设所有函数都返回Async.Operation，框架的使用者可以使用一种统一的模式来编写代码，处理函数返回，而无需关心这个函数实际上是同步返回了还是异步返回了。

对于串行调用多个异步函数的情况，我们现在可以用嵌套addCallback的方式来书写，但随着嵌套层数的增多，代码会变得越来越不美观：

firstAsyncOperation().addCallback(function() {  
  secondAsyncOperation().addCallback(function() {  
    thirdAsyncOperation().addCallback(function() {  
      finalSyncOperation();  
    });  
  });  
});

我们能否把嵌套形式改为jQuery风格的链式写法呢？这是我们接下来要思考的问题。

【编辑推荐】