Ruby's Louvre

每天学习一点点算法

导航

统计

javascript 异步编程2

好像有这么一句名言——"每一个优雅的接口,背后都有一个龌龊的实现"。最明显的例子,jQuery。之所以弄得这么复杂,因为它本来就是那复杂。虽然有些实现相对简明些,那是它们的兼容程度去不了那个地步。当然,世上总有例外,比如mootools,但暴露到我们眼前的接口,又不知到底是那个父类的东西,结构清晰但不明撩。我之所以说这样的话,因为异步列队真的很复杂,但我会尽可能让API简单易用。无new实例化,不区分实例与类方法,链式,等时髦的东西都用上。下面先奉上源码:

;(function(){
    var dom = this.dom = this.dom || {
        mix : function(target, source ,override) {
            var i, ride = (override === void 0) || override;
            for (i in source) {
                if (ride || !(i in target)) {
                    target[i] = source[i];
                }
            }
            return target;
        }
    }
    //////////////////////////////////////////////////////////////////////
    //=======================异步列队模块===================================
    var Deferred = dom.Deferred = function (fn) {
        return this instanceof Deferred ? this.init(fn) : new Deferred(fn)
    }
    var A_slice = Array.prototype.slice;
    dom.mix(Deferred, {
        get:function(obj){//确保this为Deferred实例
            return  obj instanceof Deferred ? obj : new Deferred
        },
        ok : function (r) {//传递器
            return r
        },
        ng : function (e) {//传递器
            throw  e
        }
    });
    Deferred.prototype = {
        init:function(fn){//初始化,建立两个列队
            this._firing = [];
            this._fired = [];
            if(typeof fn === "function")
                return this.then(fn)
            return this;
        },
        _add:function(okng,fn){
            var obj = {
                ok:Deferred.ok,
                ng:Deferred.ng,
                arr:[]
            }
            if(typeof fn === "function")
                obj[okng] = fn;
            this._firing.push(obj);
            return this;
        },
        then:function(fn){//_add的包装方法1,用于添加正向回调
            return  Deferred.get(this)._add("ok",fn)
        },
        once:function(fn){//_add的包装方法2,用于添加负向回调
            return  Deferred.get(this)._add("ng",fn)
        },
        wait:function(timeout){
            var self = Deferred.get(this);
            self._firing.push(~~timeout)
            return self
        },
        _fire:function(okng,args,result){
            var type = "ok",
            obj = this._firing.shift();
            if(obj){
                this._fired.push(obj);//把执行过的回调函数包,从一个列队倒入另一个列队
                var self = this;
                if(typeof obj === "number"){//如果是延时操作
                    var timeoutID = setTimeout(function(){
                        self._fire(okng,self.before(args,result))
                    },obj)
                    this.onabort = function(){
                        clearTimeout(timeoutID );
                    }
                }else if(obj.arr.length){//如果是并行操作
                    var i = 0, d;
                    while(d = obj.arr[i++]){
                        d.fire(args)
                    }
                }else{//如果是串行操作
                    try{//
                        result = obj[okng].apply(this,args);
                    }catch(e){
                        type = "ng";
                        result = e;
                    }
                    this._fire(type,this.before(args,result))
                }
            }else{//队列执行完毕,还原
                (this.after || Deferred.ok)(result);
                this._firing = this._fired;
                this._fired = [];
            }
            return this;
        },
        fire:function(){//执行正向列队
            return this._fire("ok",this.before(arguments));
        },
        error:function(){//执行负向列队
            return this._fire("ng",this.before(arguments));
        },

        abort:function(){//中止列队
            (this.onabort || Deferred.ok)();
            return this;
        },
        //每次执行用户回调函数前都执行此函数,返回一个数组
        before:function(args,result){
           return result ? result instanceof Array ? result : [result] : A_slice.call(args)
        },
        //并行操作,并把所有的子线程的结果作为主线程的下一个操作的参数
        paiallel : function (fns) {
            var self = Deferred.get(this),
            obj = {
                ok:Deferred.ok,
                ng:Deferred.ng,
                arr:[]
            },
            count = 0,
            values = {}
            for(var key in fns){//参数可以是一个对象或数组
                if(fns.hasOwnProperty(key)){
                    (function(key,fn){
                        if (typeof fn == "function")
                            fn = Deferred(fn);
                        fn.then(function(value){
                            values[key] = value;
                            if(--count <= 0){
                                if(fns instanceof Array){//如果是数组强制转换为数组
                                    values.length = fns.length;
                                    values = A_slice.call(values)
                                }
                                self._fire("ok",[values])
                            }
                        }).once(function(e){
                            self._fire("ng",[e])
                        });
                        obj.arr.push(fn);
                        count++
                    })(key,fns[key])
                }
            }
            self.onabort = function(){
                var i = 0, d;
                while(d = obj.arr[i++]){
                    d.abort();
                }
            }
            self._firing.push(obj);
            return self
        },
        //处理相近的迭代操作
        loop : function (obj, fn, result) {
            obj = {
                begin : obj.begin || 0,
                end   : (typeof obj.end == "number") ? obj.end : obj - 1,
                step  : obj.step  || 1,
                last  : false,
                prev  : null
            }
            var step = obj.step,
            _loop = function(i,obj){
                if (i <= obj.end) {
                    if ((i + step) > obj.end) {
                        obj.last = true;
                        obj.step = obj.end - i + 1;
                    }
                    obj.prev = result;
                    result = fn.call(obj,i);
                    Deferred.get(result).then(_loop).fire(i+step,obj);
                }else{
                    return result;
                }
            }
            return (obj.begin <= obj.end) ? Deferred.get(this).then(_loop).fire(obj.begin,obj) : null;
        }
    }
    //将原型方法转换为类方法
    "loop wait then once paiallel".replace(/\w+/g, function(method){
        Deferred[method] = Deferred.prototype[method]
    });
})();

Deferred提供的接口其实不算多,then once loop wait paialle就这五个,我们可以new一个实例出来,用它的实例方法,可以直接用类名加方法名,其实里面还是new了一个实例。另外,还有两个专门用于复写的方法,before与after。before执行于每个回调函数之前,after执行于所有回调之后,相当于complete了。既然是列队,就有入队操作与出队操作,我不可能使用queue与dequeue这样土的命名。queue换成两个时间状语,then与once,相当于jQuery的done、fail,或dojo的addCallback、addErrback。dequeue则用fire与error取替,jQuery1.5的beta版也曾经用过fire,不知为何换成resolve这样难记的单词。好了,我们先不管其他API,现在就试试身手吧。

      var log = function (s) {
        window.console && window.console.log(s);
      }
      dom.Deferred(function () {
        log(1);//1
      })
      .then(function () {
        log(2);//2
      })
      .then(function () {
        log(3);//3
      })
      .fire();
//如果不使用异步列队,实现这种效果,就需要用套嵌函数
/*
      var fun = function(fn){
        fn()
      };
      fun(function(){
        log(1);
        fun(function(){
          log(2);
          fun(function(){
            log(3);
          })
        });
      });
*/

当然,现在是同步操作。注意,第一个回调函数是作为构造器的参数传入,可以节约了一个then^_^。

默认如果回调函数存在返回值,它会把它作为下一个回调函数的参数传入,如:

      dom.Deferred(function (a) {
        a +=  10
        log(a);//11
        return a
      })
      .then(function (b) {
        b += 12
        log(b);//23
        return b
      })
      .then(function (c) {
        c += 130
        log(c);//153
      })
      .fire(1);

我们可以重载before函数,让它的结果不影响下一个回调函数。在多投事件中,我们也可以在before中定义,如果返回false,就中断队列了。

我们再来看它如何处理异常。dom.Deferred的负向列队与jQuery的是完全不同的,jQuery的只是正向列队的一个克隆,而在dom.Deferred中,负向列队只是用于突发情况,是配角。

      dom.Deferred(function () {
        log(1111111111)//11111111111
      }).
        then(function () {
        throw "error!";//发生错误
      }).
        then(function (e) {//这个回调函数不执行
        log(e+"222222")
        return 2222222
      }).
        once(function(e){//直到 遇上我们自定义的负向回调
        log(e+'333333')//error!333333
        return 333333333
      }).
        then(function (c) {//回到正向列队中
        log(c)//33333333
      }).
        fire()

上面几个例子严格来说是同步执行,想实现异步就要用到setTimeout。当然除了setTimeout,我们还有许多方案,img.onerror script.onreadystatechange script.onload xhr.onreadystatechange self.postMessage……但它们 都有一个缺点,就是不能指定回调函数的执行时间。更何况setTimeout是没有什么兼容问题,如img.onerrot就不能用于IE6-8,postMessage虽然很快,但只支持非常新的浏览器版本。我说过,异步就是延时,延时就是等待,因此这方法叫做wait。

                dom.Deferred(function(){
                    log(1)
                }).wait(1000).then(function(){
                    log(2)
                }).wait(1000).then(function(){
                    log(3)
                }).wait(1000).then(function(){
                    log(4)
                }).fire()

好了,我们看异步列队中最难的部分,并行操作。这相当于模拟线程了,两个不相干的东西各自做自己的事,互不干扰。当然在时间我们还是能看出先后顺序来的。担当这职责的方法为paiallel。

      dom.Deferred.paiallel([function(){
          log("司徒正美")
          return 11
        },function(i){
          log("上官莉绮")
          return 12
        },function(i){
          log("朝沐金风")
          return 13
        }]).then(function(d){
        log(d)
      }).fire(10)

不过,上面并没有用到异步,都是同步,这时,paiallel就相当于一个map操作。

        var d = dom.Deferred
        d.paiallel([
          d.wait(2000).then(function(a){
            log("第1个子列队");
            return 123
          }),
          d.wait(1500).then(function(a){
            log("第2个子列队");
            return 456
          }),
          d.then(function(a){
            log("第3个子列队")
            return 789
          })]).then(function(a){
          log(a)
        }).fire(3000);

最后要介绍的是loop方法,它只要改变一下就能当作animate函数使用。

 d.loop(10, function(i){
        log(i);
        return d.wait(500)
  });

添加多个列队,让它们交错进行,模拟“多线程”效果。

      d.loop(10, function(i){
        log("第一个列队的第"+i+"个操作");
        return d.wait(100)
      });
      d.loop(10, function(i){
        log("第二个列队的第"+i+"个操作");
        return d.wait(100)
      });
      d.loop(10, function(i){
        log("第三个列队的第"+i+"个操作");
        return d.wait(100)
      });

当然这些例子都很简单,下次再结合ajax与动画效果说说。

posted on 2011-03-18 09:44 司徒正美 阅读(...) 评论(...) 编辑 收藏