JSDeferred 源码分析

不经意看到了一个构思非常惊人的异步流程控制库，发出来分享下

http://cho45.stfuawsc.com/jsdeferred/ 

关于CommonJS Promises请看另一个异步库 http://www.cnblogs.com/aaronjs/p/3168588.html

整个代码非常简洁，易用，不过呢是小日本写的东西…

API手册：

加载jsdeferred定义延迟对象。为方便起见，我们用Deferred.define()方法把接口导出到全局作用于中

Deferred.define();

通过这样做，你就能使用如 next(), loop(), call(), parallel() and wait() 这样的全局函数方法，让我们抒写一些异步的流程

next(function () {
    alert("Hello!");
    return wait(5);
}).
next(function () {
    alert("World!");
});

这个流程中，开始会弹出 “Hello”,然后过5秒接着会弹出 “world”

Deferred.next(function () {
    alert("Hello!");
    return Deferred.wait(5);
}).
next(function () {
    alert("World!");
});

上面是抒写同上

 

个人分析：

用Deferred.define()方法，无疑污染了全局作用域，入侵性太强了，跟mootools,prototype一样, 不过好处嘛，很明显，简单易用了

还好JSDeferred也提供了无侵入的写法

亮源码：

Deferred.define = function (obj, list) {
    if (!list) list = Deferred.methods;
    if (!obj)  obj = (function getGlobal() {
        return this
    })();
    for (var i = 0; i < list.length; i++) {
        var n = list[i];
        obj[n] = Deferred[n];
    }
    return Deferred;
};

可以传入一个对象，用作上下文

var o = {}; //定义一个对象 
Deferred.define(o);//把Deferred的方法加持到它上面，让o成为一个Deferred子类。
o.next(function(){ 
  /* 处理 */
})

Deferred.methods = ["parallel", "wait", "next", "call", "loop", "repeat", "chain"];

 

next方法

• next方法是可以进行链式操作，链式的原理很简单就是要返回当前的的this上下文才可以
• 所以很明显第一个next我们必须要建一个上下文对象提供给后面next引用，其实跟jquery链式一个道理

根据源码看来Deferred.next其实就是一个静态方法

Deferred.next = Deferred.next_faster_way_readystatechange 
    || Deferred.next_faster_way_Image 
    || Deferred.next_tick 
    || Deferred.next_default;

显而易见，next方法是有四种选择优先级，为什么要这样呢？

• 目的是用于提供了一个JSDeferred实例与实现第一个异步操作。
• 异步操作在JSDeferred中有许多实现方法，如setTimeout，img.onerror或 script.onreadystatechange ，
• 它会视浏览器选择最快的异步方式

我是基于webkit的游览器，所以我们就直接看Deferred.next_faster_way_Image

// Modern Browsers
    var d = new Deferred();
    var img = new Image();
    var handler = function () {
        d.canceller();
        d.call();
    };
    img.addEventListener("load", handler, false);
    img.addEventListener("error", handler, false);
    d.canceller = function () {
        img.removeEventListener("load", handler, false);
        img.removeEventListener("error", handler, false);
    };
    img.src = "data:image/png," + Math.random();
    if (fun) d.callback.ok = fun;
    return d;

流程：

• 创建一个Deferred对象
• 创建Image对象，实现异步
• 监听事件
• if (fun) d.callback.ok = fun;  放置回调处理对象
• 返回当前deferred对象

由此可见

next(fn).next(fn).next(fn)

其实就是

第一个 next()    Deferred.next_faster_way_Image () 返回 d

第二个 next()   d.next()

第二个next(),其实就是实例Deferred类的原型方法了

具体我们看

next: function (fun) {
        return this._post("ok", fun)
    },

_post: function (okng, fun) {
        this._next = new Deferred();
        this._next.callback[okng] = fun;
        return this._next;
    },

看到_post方法，就有拨开云雾见月明的感觉了

其实内部会有重新生成一个 Deferred对象挂到父实例的 next上，在绑定回调..

如此依次循环处理

 

所以初始化的时候其实内部就生成了这么一个队列

_next 上都挂着下一个队列处理

此时都是在初始化准备好的了，在执行的时候 Image 在成功回调中，我们调用了 d.call();

执行实例的call方法

call: function (val) {
        return this._fire("ok", val)
    },

_fire: function (okng, value) {
        var next = "ok";
        try {
            value = this.callback[okng].call(this, value);
        } catch (e) {
            next = "ng";
            value = e;
            if (Deferred.onerror) Deferred.onerror(e);
        }
        if (Deferred.isDeferred(value)) {
            value._next = this._next;
        } else {
            if (this._next) this._next._fire(next, value);
        }
        return this;
    }

• 取出当前实例的回调方法，传入参数
• 返回的value 是否还是一个isDeferred对象
• 如果没有返回值，继续调用内部的_next上的Deferred实例，依次循环

 

总结：

构思很特别，把每次链式的回调挂到内部的next子属性中，在处理上也保持了一条线的引用关系，而不是常规的用数组的方式存起来

当然上面仅仅只是同步方法的处理分析，也不是标准的遵循CommonJS Promises规范去抒写的