JavaScript异步调用框架的jQuery风格链式调用

我们已经实现了一个简单的JavaScript异步调用框架，然而还有一些美中不足，那就是顺序执行的异步函数需要用嵌套的方式来声明。

成都创新互联公司公司2013年成立，先为莎车等服务建站，莎车等地企业，进行企业商务咨询服务。为莎车企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

现实开发中，要按顺序执行一系列的同步异步操作又是很常见的。还是用百度Hi网页版中的例子，我们先要异步获取联系人列表，然后再异步获取每一个联系人的具体信息，而且后者是分页获取的，每次请求发送10个联系人的名称然后取回对应的具体信息。这就是多个需要顺序执行的异步请求。

为此，我们需要设计一种新的操作方式来优化代码可读性，让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅。

传统做法

大多数程序员都能够很好的理解顺序执行的代码，例如这样子的：

 
 
 
    
  
  
  
  1. var firstResult = firstOperation(initialArgument); 
    2. 
  
  
  
  2. var secondResult = secondOperation(firstResult); 
    3. 
  
  
  
  3. var finalResult = thirdOperation(secondResult); 
    4. 
  
  
  
  4. alert(finalResult);
    5.

其中先执行的函数为后执行的函数提供所需的数据。然而使用我们的JavaScript异步调用框架后，同样的逻辑必须变成这样子：

 
 
 
    
  
  
  
  1. firstAsyncOperation(initialArgument).addCallback(function(firstResult) { 
    2. 
  
  
  
  2.   secondAsyncOperation(firstResult).addCallback(function(secondResult) { 
    3. 
  
  
  
  3.     thirdAsyncOperation(secondResult).addCallback(function(finalResult) {   
    4. 
  
  
  
  4.       alert(finalResult); 
    5. 
  
  
  
  5.     }); 
    6. 
  
  
  
  6.   }); 
    7. 
  
  
  
  7. });
    8.

链式写法

我认为上面的代码实在是太不美观了，并且希望能够改造为jQuery风格的链式写法。为此，我们先构造一个用例：

 
 
 
    
  
  
  
  1. Async.go(initialArgument) 
    2. 
  
  
  
  2.   .next(firstAsyncOperation) 
    3. 
  
  
  
  3.   .next(secondAsyncOperation) 
    4. 
  
  
  
  4.   .next(thirdAsyncOperation) 
    5. 
  
  
  
  5.   .next(function(finalResult) { alert(finalResult); })
    6.

在这个用例当中，我们在go传入初始化数据，然后每一个next后面传入一个数据处理函数，这些处理函数按顺序对数据进行处理。

同步并存

上面的用例调用到的全部都是异步函数，不过我们***能够兼容同步函数，让使用者无需关心函数的具体实现，也能使用这项功能。为此我们再写一个这样的用例：

 
 
 
    
  
  
  
  1. Async.go(0) 
    2. 
  
  
  
  2.   .next(function(i) { alert(i); return i + 1; }) 
    3. 
  
  
  
  3.   .next(function(i) { 
    4. 
  
  
  
  4.     alert(i); 
    5. 
  
  
  
  5.     var operation = new Async.Operation(); 
    6. 
  
  
  
  6.     setTimeout(function() { operation.yield(i + 1); }, 1000); 
    7. 
  
  
  
  7.     return operation; 
    8. 
  
  
  
  8.   }) 
    9. 
  
  
  
  9.   .next(function(i) { alert(i); return i + 1; }) 
    10. 
  
  
  
  10.   .next(function(i) { alert(i); return i; });
    11.

在上述用例中，我们期待能够看到0, 1, 2, 3的提示信息序列，并且1和2之间间隔为1000毫秒。

异步本质

一个链式调用，本质上也是一个异步调用，所以它返回的也是一个Operation实例。这个实例自然也有result、state和completed这几个字段，并且当整个链式调用完成时，result等于***一个调用返回的结果，而completed自然是等于true。

我们可以扩展一下上一个用例，得到如下用例代码：

 
 
 
    
  
  
  
  1. var chainOperation = Async.go(0) 
    2. 
  
  
  
  2.   .next(function(i) { alert(i); return i + 1; }) 
    3. 
  
  
  
  3.   .next(function(i) { 
    4. 
  
  
  
  4.     alert(i); 
    5. 
  
  
  
  5.     var operation = new Async.Operation(); 
    6. 
  
  
  
  6.     setTimeout(function() { operation.yield(i + 1); }, 1000); 
    7. 
  
  
  
  7.     return operation; 
    8. 
  
  
  
  8.   }) 
    9. 
  
  
  
  9.   .next(function(i) { alert(i); return i + 1; }) 
    10. 
  
  
  
  10.   .next(function(i) { alert(i); return i; }); 
    11. 
  
  
  
  11. 
  
  
  
  12. setTiemout(function() { alert(chainOperation.result; }, 2000); 
    13.

把链式调用的返回保存下来，在链式调用完成时，它的result应该与***一个操作的返回一致。在上述用例中，也就是3。

调用时机

尽管我们提供了一种链式调用方式，但是用户不一定会按照这种固定的方式来调用，所以我们仍然要考虑兼容用户的各种可能用法，例如说异步地用next往调用链添加操作：

 
 
 
    
  
  
  
  1. var chainOperation = Async.go(0); 
    2. 
  
  
  
  2. chainOperation.next(function(i) { alert(i); return i + 1; }); 
    3. 
  
  
  
  3. setTimeout(function() { 
    4. 
  
  
  
  4.   chainOperation.next(function(i) { 
    5. 
  
  
  
  5.     alert(i); 
    6. 
  
  
  
  6.     var operation = new Async.Operation(); 
    7. 
  
  
  
  7.     setTimeout(function() { operation.yield(i + 1); }, 2000); 
    8. 
  
  
  
  8.     return operation; 
    9. 
  
  
  
  9.   }) 
    10. 
  
  
  
  10. }, 1000); 
    11. 
  
  
  
  11. setTimeout(function() { 
    12. 
  
  
  
  12.   chainOperation.next(function(i) { alert(i); return i + 1; }); 
    13. 
  
  
  
  13. }, 2000);
    14.

在这个用例当中，用户每隔1000毫秒添加一个操作，而其中第二个操作耗时2000毫秒。也就是说，添加第三个操作时第二个操作还没返回。作为一个健壮的框架，必须要能兼容这样的使用方式。

此外我们还要考虑，用户可能想要先构造调用链，然后再执行调用链。这时候用户就会先使用next方法添加操作，再使用go方法执行。

 
 
 
    
  
  
  
  1. var chainOperation = Async 
    2. 
  
  
  
  2.   .chain(function(i) { alert(i); return i + 1; }) 
    3. 
  
  
  
  3.   .next(function(i) { 
    4. 
  
  
  
  4.     alert(i); 
    5. 
  
  
  
  5.     var operation = new Async.Operation(); 
    6. 
  
  
  
  6.     setTimeout(function() { operation.yield(i + 1); }, 2000); 
    7. 
  
  
  
  7.     return operation; 
    8. 
  
  
  
  8.   }) 
    9. 
  
  
  
  9.   .go(0) 
    10. 
  
  
  
  10. setTimeout(function() { 
    11. 
  
  
  
  11.   chainOperation.next(function(i) { alert(i); return i + 1; }) 
    12. 
  
  
  
  12. }, 1000);
    13.

在上述用例中，用户通过chain和next添加了头同步操作和异步操作各一个，然后用go执行调用链，在调用链执行完毕之前又用next异步追加了一个操作。一个健壮的框架，在这样的用例当中应该能够如同用户所期望的那样提示0, 1, 2。

小结

针对链式调用的需求，我们设计了如此多的用例，包括各种奇怪的JavaScript异步调用方式。具体实现方法，将在下文中讲述。

文章名称：JavaScript异步调用框架的jQuery风格链式调用
新闻来源：http://www.csdahua.cn/qtweb/news19/522369.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站设计公司知识

各行业网站

成都商城网站建设公司　　 　网站SEO优化　　 　成都雨棚定制　　 　做网站　　 　重庆水土双线托管　　 　四川锦华橡塑　　 　宣威网站建设　　 　香港虚拟主机空间　　 　成都商城网站建设　　 　网站建设推广　　 　成都电信光华数据中心　　 　航空文化传媒　　 　网站方案　　 　成都网站建设　　 　成都画册制作　　 　巴中倍辉科技　　 　服务器机柜租用　　 　成都网站建设推广　　 　成都全屋定制　　 　成都服务器租赁