上篇：Javascript 異步編程

　　好像有這么一句名言——"每一個(gè)優(yōu)雅的接口，背后都有一個(gè)齷齪的實(shí)現(xiàn)"。最明顯的例子，jQuery。之所以弄得這么復(fù)雜，因?yàn)樗緛?lái)就是那復(fù)雜。雖然有些實(shí)現(xiàn)相對(duì)簡(jiǎn)明些，那是它們的兼容程度去不了那個(gè)地步。當(dāng)然，世上總有例外，比如mootools，但暴露到我們眼前的接口，又不知到底是那個(gè)父類的東西，結(jié)構(gòu)清晰但不明撩。我之所以說這樣的話，因?yàn)楫惒搅嘘?duì)真的很復(fù)雜，但我會(huì)盡可能讓API簡(jiǎn)單易用。無(wú)new實(shí)例化，不區(qū)分實(shí)例與類方法，鏈?zhǔn)剑葧r(shí)髦的東西都用上。下面先奉上源碼：

;(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;
        }
    }
    //////////////////////////////////////////////////////////////////////
    //=======================異步列隊(duì)模塊===================================
    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實(shí)例
            return  obj instanceof Deferred ? obj : new Deferred
        },
        ok : function (r) {//傳遞器
            return r
        },
        ng : function (e) {//傳遞器
            throw  e
        }
    });
    Deferred.prototype = {
        init:function(fn){//初始化,建立兩個(gè)列隊(duì)
            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,用于添加正向回調(diào)
            return  Deferred.get(this)._add("ok",fn)
        },
        once:function(fn){//_add的包裝方法2,用于添加負(fù)向回調(diào)
            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);//把執(zhí)行過的回調(diào)函數(shù)包,從一個(gè)列隊(duì)倒入另一個(gè)列隊(duì)
                var self = this;
                if(typeof obj === "number"){//如果是延時(shí)操作
                    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{//隊(duì)列執(zhí)行完畢,還原
                (this.after || Deferred.ok)(result);
                this._firing = this._fired;
                this._fired = [];
            }
            return this;
        },
        fire:function(){//執(zhí)行正向列隊(duì)
            return this._fire("ok",this.before(arguments));
        },
        error:function(){//執(zhí)行負(fù)向列隊(duì)
            return this._fire("ng",this.before(arguments));
        },

        abort:function(){//中止列隊(duì)
            (this.onabort || Deferred.ok)();
            return this;
        },
        //每次執(zhí)行用戶回調(diào)函數(shù)前都執(zhí)行此函數(shù),返回一個(gè)數(shù)組
        before:function(args,result){
           return result ? result instanceof Array ? result : [result] : A_slice.call(args)
        },
        //并行操作,并把所有的子線程的結(jié)果作為主線程的下一個(gè)操作的參數(shù)
        paiallel : function (fns) {
            var self = Deferred.get(this),
            obj = {
                ok:Deferred.ok,
                ng:Deferred.ng,
                arr:[]
            },
            count = 0,
            values = {}
            for(var key in fns){//參數(shù)可以是一個(gè)對(duì)象或數(shù)組
                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){//如果是數(shù)組強(qiáng)制轉(zhuǎn)換為數(shù)組
                                    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;
        }
    }
    //將原型方法轉(zhuǎn)換為類方法
    "loop wait then once paiallel".replace(//w+/g, function(method){
        Deferred[method] = Deferred.prototype[method]
    });
})();        

        

        
        
      
        
it知識(shí)庫(kù)：javascript 異步編程2，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。