移动web app开发必备 - 异步队列 Deferred

背景

移动web app开发,异步代码是时常的事,好比有常见的异步操做：

• Ajax（XMLHttpRequest）
• Image Tag，Script Tag，iframe（原理相似）
• setTimeout/setInterval
• CSS3 Transition/Animation
• HTML5 Web Database
• postMessage
• Web Workers
• Web Sockets
• and more…

后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操做

好比本人的一个phonegap项目,操做HTML5本地数据库（HTML5 Web Database）就是一个异步的过程,若是同时执行多个查询,势必同步代码要等待数据查询结束后调用

附项目源码：执行屡次异步查询

   /**
     * 初始化操做
     * @return 
     */
    proto.initProcess = function(){
        var self = this,
            prev = null ,
            curr = null ,
            next = null ;
        debug.group("start of init process");
        var idx = self.chapterIndex;
        debug.info("PageBase: 执行初始化以前的操做!");
        self.initProcessBefore();

        if(idx == 0){
            debug.info("PageBase: 初始化入口点从第一章开始进入");
            debug.info("PageBase: 解析器解析第一章数据!");
            curr = self.process(self.chapters[idx]);
            curr.then(function(pages){
                debug.info(self.format("PageBase: 第一章数据解析完成,解析页面数为{0}" , pages.length));
                self.cPages = pages;
                if(self.isChangeFont){
                  self.idx = Math.ceil((pages.length - 1) * self.idx);                  
                }

                self.cPages.idx = idx;

                /////////////////////////////////////////////////
                //
                // 2013.1.10修改
                //   若是只有一个章节的状况下
                //
                if(1 === self.chapters.length){
                  deferred.all([curr]).then(self.steup.bind(self));   
                }else{
                  debug.info("PageBase:解析器解析后一章数据!");
                  next = self.loadNextData(idx + 1);
                  next.then(function(args){
                      debug.info(self.format("PageBase: 后一章数据解析完成,解析页面数为{0}" , args.pages.length));
                      self.nPages = args.pages;
                      self.nPages.idx = idx + args.index;
                      debug.info(self.format("PageBase: 初始化数据解析完成, 当章索引{0} 当章页数{1} 下章索引{2}  下章页数{3}" 
                              , self.cPages.idx , self.cPages.length , self.nPages.idx , self.nPages.length));
                
                      debug.info("PageBase: 初始化数据解析完成，即将生成结构操做!");
                  });
                  deferred.all([curr , next]).then(self.steup.bind(self));   
                }

            });
        }else if(idx == self.chapters.length -1){
            debug.info("PageBase: 初始化入口点从最后一章开始进入");
            debug.info("PageBase:解析器解析最后一章数据!");
            prev = self.loadPrevData(idx - 1);
            prev.then(function(args){
                self.pPages = args.pages;
                self.pPages.idx = args.index + 1;
                debug.info(self.format("PageBase: 最后一章的前一章数据解析完成,解析页面数为{0}" , args.pages.length));
                curr = self.process(self.chapters[idx]);
                curr.then(function(pages , data){
                    if(self.isChangeFont){
                      self.idx = Math.ceil((pages.length - 1) * self.idx);                  
                    }
                    self.cPages = pages ;
                    self.cPages.idx = idx;
                    debug.info(self.format("PageBase: 最后一章数据解析完成,解析页面数为{0}" , pages.length));
                    debug.info(self.format("PageBase: 初始化数据解析完成, 前章索引{0} 前章页数{1} 当章索引{2} 当章页数{3} " 
                            , self.pPages.idx , self.pPages.length , self.cPages.idx , self.cPages.length ));
              
                    debug.info("PageBase: 初始化数据解析完成，即将生成结构操做!");
                });
                deferred.all([prev , curr]).then(self.steup.bind(self));
            });
        }else{
            debug.info("PageBase: 初始化入口点从中间章开始进入");
            prev = self.loadPrevData(idx - 1);
            debug.info("PageBase:解析器解析中间章的前一章数据!");
            prev.then(function(args){
                self.pPages = args.pages ;
                self.pPages.idx = args.index;
                debug.info(self.format("PageBase: 中间章前一章数据解析完成,解析页面数为{0}" , args.pages.length));
                debug.info("PageBase:解析器解析中间章数据!");
                curr = self.process(self.chapters[idx]);
                curr.then(function(pages , data){
                    if(self.isChangeFont){
                        self.idx = Math.ceil((pages.length) * self.idx); 
                        // console.log("spages.length - 1",pages.length)      
                        // console.log("self.idx",self.idx)             
                    }
                    self.cPages = pages ;
                    self.cPages.idx = idx;
                    debug.info(self.format("PageBase: 中间章数据解析完成,解析页面数为{0}" ,pages.length));
                    debug.info("PageBase:解析器解析中间章的后一章数据!");
                    next = self.loadNextData(idx + 1);
                    next.then(function(args){
                        self.nPages = args.pages ;
                        self.nPages.idx = idx + args.index;
                        debug.info(self.format("PageBase: 中间章后一章数据解析完成,解析页面数为{0}" , args.pages.length));
                        debug.info(self.format("PageBase: 初始化数据解析完成, 前章索引{0} 前章页数{1} 当章索引{2} 当章页数{3} 下章索引{4}  下章页数{5}" 
                            , self.pPages.idx , self.pPages.length , self.cPages.idx , self.cPages.length , self.nPages.idx , self.nPages.length));
                        debug.info("PageBase: 初始化数据解析完成，即将生成结构操做!")
                    });
                    deferred.all([prev , curr , next]).then(self.steup.bind(self));  
                });
            });
       }

 

如何组织代码

可是对于异步+回调的模式，当须要对一系列异步操做进行流程控制的时候彷佛必然会面临着回调嵌套。所以怎么把异步操做“拉平”，用更好的方法去优化异步编程的体验，同时也写出更健壮的异步代码，是这两年来前端圈子里很火的话题。

表明的

1. 消息驱动——表明：@朴灵 的EventProxy
2. Promise模式——表明：CommonJS Promises，jQuery，Dojo 
3. 二次编译——表明：@老赵 的Jscex
4. jQuery 是惟一的实现了这种 when 方法的库。其余的 promises 库，例如  Q, Dojo, 和  when 依照  Promises/B spec 实现了 when 方法, 可是并无实现注释者说起的 when 方法。可是，Q 库有一个   all方法，when.js 也有一个  parallel方法，与上面的 jQuery.when 方法做用同样，只是它们接受一个数组类型的参数，而不是任意数量的参数。

 回顾Jquery Deferred

• 从1.5版本开始，jQuery加入了Deferred功能，让事件处理队列更加的完善。并用 这个机制重写了Ajax模块。虽然还没轮到Ajax，可是接下来的事件处理函数中牵扯到了 这个机制
• Deferred把回调函数注册到一个队列中，统一管理，而且能够同步或者异步地调用 这些函数。jQuery.Deferred()用来构造一个Deferred对象。该对象有状态值，共有三种: Rejected, Resolved和初始状态。其中Resolved表示该操做成功完成了，而Rejected 则表示出现了错误，调用失败。Deferred对象的主要成员以下：
• done(callback): 注册一个callback函数，当状态为resolved时被调用。
• fail(callback): 注册一个callback函数，当状态为rejected时被调用。
• always(callback): 注册一个callback函数，不管是resolved或者rejected都会被 调用。
• then(successCallback, failureCallback): 同时传入成功和失败的回调函数。
• pipe(successFilter, failureFilter): 在调用成功和失败的回调函数前先调用pipe 指定的函数。算是一种管道机制，拦截了函数调用。
• resolve(args): 把状态设置为Resolved。
• reject(args): 把状态设置为Rejected。
• promse(): 返回的是一个不完整的Deferred的接口，没有resolve和reject。即不能 修改Deferred对象的状态。能够看做是一种只读视图。这是为了避免让外部函数提前触发 回调函数。好比$.ajax在1.5版本后再也不返回XMLHttpRequest，而是返回一个封装了 XMLHttpRequest和Deferred对象接口的object。其中Deferred部分就是promise()获得 的，这样不让外部函数调用resolve和reject，防止在ajax完成前触发回调函数。把这 两个函数的调用权限保留给ajax内部。

 deferred-js

本人在项目中使用 Promise/A 规范实现的 deferred-js , 比较简单轻巧.

如何使用？

API:

  var DeferredAPI = {
      deferred     : deferred,
      all          : all,
      Deferred     : Deferred,
      DeferredList : DeferredList,
      wrapResult   : wrapResult,
      wrapFailure  : wrapFailure,
      Failure      : Failure
  }

最简单经常使用的案例

           //Deferred对象建立
           var d = new deferred.Deferred()

           //添加一个回调到递延的回调链
           d.then(function(result) {
               console.log('Hello ' + result)
               return result
           })

           //等待回调后触发
           d.resolve('World')

每一个连接在一个回调链能够是两个函数,表明一个成功，一个失败

只有一个成功回调

d.then(function(result) {
    // 本身的代码
    return result
})

 

失败回调

d.fail(function(failure) {
    // optionally do something useful with failure.value()
    return failure
});

 

添加一个成功方法和一个失败方法

d.then(function(result) {
    // do something useful with the result
    return result
}, function(failure) {
    // optionally do something useful with failure.value()
    return failure
})

无论回调成功或者失败都执行同一份代码

d.both(function(result) {
    // in the case of failure, result is a Failure
    // do something in either case
    return result
})

 

若是许多异步在操做,好比提供的案例,在要执行HTML5数据库N次后,如何操做呢？

 请仔细对照下案例中的

 deferred.all([prev , curr , next]).then(self.steup.bind(self));  

all的方法等待全部的延时队列加载完毕后，才执行后续代码

 

使用起来很方便,很精简没有那么多复杂的概念

使用教程以后，下一节附源码的实现