jQuery1.9.1源码分析Deferred对象和Promise对象

jQuery.extend({
        Deferred: function(func) {
            // 数据集中管理
            var tuples = [
                ['resolve', 'done', jQuery.Callbacks('once memory'), 'resolved'],
                ['reject', 'fail', jQuery.Callbacks('once memory'), 'rejected'],
                ['notify', 'progress', jQuery.Callbacks('memory')]
            ],
                state = 'pending',
                promise = {
                    /**
                     * 返回一个字符串，代表Deferred（延迟）对象的当前状态
                     *
                     * @returns {string} "pending"( Deferred对象是尚未完成状态) || "rejected"(Deferred对象是在被拒绝的状态) || "resolved"(Deferred对象是在解决状态)
                     */
                    state: function() {
                        return state;
                    },
                    /**
                     * 当Deferred（延迟）对象解决或拒绝时，调用添加处理程序
                     * 即如果调用后不管成功还是失败，都会执行该回调
                     */
                    always: function() {
                        deferred.done(arguments).fail(arguments);
                        return this;
                    },
                    /**
                     * 
                     * then方法会返回一个新的Deferred对象
                     * 如果then方法的参数是deferred对象，
                     * 上一链的旧deferred会调用[ done | fail | progress ]方法注册回调，该回调内容是：执行when方法对应的参数回调（fnDone, fnFail, fnProgress）。
                     * 1）如果参数回调执行后返回的结果是一个deferred对象，我们就给该deferred对象相应的回调列表添加回调，该回调是触发when方法返回的新deferred对象的成功，失败，处理中（done，fail，progress）的回调列表中的所有回调。
                     * 当我们再给then方法进行链式地添加回调操作（done,fail,progress,always,then）时，就是给新deferred对象注册回调到相应的回调列表。
                     * 如果我们then参数fnDoneDefer, fnFailDefer, fnProgressDefer得到了解决，就会执行后面链式添加回调操作中的参数函数。
                     * 
                     * 2）如果参数回调执行后返回的结果不是deferred对象，就立刻触发新deferred对象相应回调列表的所有回调。
                     * 当我们再给then方法进行链式地添加回调操作（done,fail,progress,always,then）时，就会立刻触发我们添加的相应的回调。
                     * 
                     * 可以多个then连续使用，此功能相当于顺序调用异步回调。
                     *
                     * @example
                     * $.ajax({
                           url: 't2.html',
                           dataType: 'html',
                           data: {
                              d: 4
                           }
                        }).then(function(){
                            console.log('success');
                        },function(){
                            console.log('failed');
                        }).then(function(){
                            console.log('second');
                            return $.ajax({
                                url: 'jquery-1.9.1.js',
                                dataType: 'script'
                            });
                        }, function(){
                            console.log('second f');
                            return $.ajax({
                                url: 'jquery-1.9.1.js',
                                dataType: 'script'
                            });
                        }).then(function(){
                            console.log('success2');
                        },function(){
                            console.log('failed2');
                        });
                        @notification 当前面的deferred没有被解决即失败，后面的就会执行失败回调，如果then方法中传了两个可返回deferred对象的回调，上一个deferred失败就会触发第二个返回的deferred，如果只传了一个返回deferred的回调，则后面都会报错。后面的失败却不会影响前面的。
                     * @returns {*}
                     */
                    then: function( /* fnDone, fnFail, fnProgress */ ) {
                        var fns = arguments;
                        // 返回一个新的Deferred对象的promise对象
                        return jQuery.Deferred(function(newDefer) {
                            // newDefer其实就是一个新的deferred对象
                            jQuery.each(tuples, function(i, tuple) {
                                var
                                // "resolve" | "reject" | "notify"
                                action = tuple[0],
                                    fn = jQuery.isFunction(fns[i]) && fns[i];

                                // 运行deferred[ done | fail | progress ]方法，
                                // 将回调函数添加到相应回调列表
                                deferred[tuple[1]](function() {
                                    // 执行当前参数回调并获取其返回值
                                    var returned = fn && fn.apply(this, arguments);
                                    // 如果returned有返回值且有promise方法，
                                    // 说明是一个deferred对象，
                                    // 则将newDefer对象的三个回调列表的触发器添加到returned对象的相应列表中
                                    if (returned && jQuery.isFunction(returned.promise)) {
                                        returned.promise().
                                        done(newDefer.resolve).
                                        fail(newDefer.reject).
                                        progress(newDefer.notify);
                                    } else {
                                        // 否则就触发newDefer对象的相应回调列表触发器
                                        // 同时确保this指向newDefer的promise对象
                                        // 要是这个newDefer有内容触发需要再在后面将回调添加到响应列表中，
                                        // 所以这个是执行下一个deferred的操作
                                        newDefer[action + 'With'](this === promise ? newDefer.promise() : this, fn ? [returned] : arguments);
                                    }
                                });
                            });
                            // 销毁对象
                            fns = null;
                        }).promise();
                    },
                    /*
                     如果有参数返回参数对象继承了promise对象属性的对象，
                     否则返回该Deferred对象中的promise对象
                     */
                    promise: function(obj) {
                        return obj != null ? jQuery.extend(obj, promise) : promise;
                    }
                },
                deferred = {};

            // 备份原始对象
            promise.pipe = promise.then;

            // 给deferred对象添加方法
            jQuery.each(tuples, function(i, tuple) {
                var
                // jQuery.Callbacks()
                list = tuple[2],
                    // "resolved" or "rejected"
                    stateString = tuple[3];

                // 给promise对象添加"done", "fail", "progress"方法
                // 当使用这些方法实际上就是给所在回调列表添加回调
                // 注意：list.add方法里面的this已经指向了promise
                // 因此可以deferred.done(arguments).fail(arguments)的链式操作
                promise[tuple[1]] = list.add;

                // 如果是"resolved"或者"rejected"
                if (stateString) {
                    // 给相应的回调列表添加以下三个回调函数，回调列表状态机
                    // 第一个是将异步队列状态传给state变量
                    // 第二个方法是将其他状态的列表禁用
                    // 第三个是锁定“progress”的回调列表
                    // 例如是“resolved”则禁用“rejected”的回调列表，
                    // 锁定“progress”的回调列表
                    list.add(function() {
                        state = stateString;
                    }, tuples[i ^ 1][2].disable, tuples[2][2].lock);
                }

                // 添加deferred[ resolve | reject | notify ]方法
                deferred[tuple[0]] = function() {
                    // 实际上是运行deferred[ resolveWith | rejectWith | notifyWith ]方法
                    // 同时确保上下文是deferred对象
                    deferred[tuple[0] + 'With'](this === deferred ? promise : this, arguments);
                    // 链式操作
                    return this;
                };
                // 添加deferred[ resolveWith | rejectWith | notifyWith ]方法
                // 这些方法就是所在回调列表的fireWith方法
                // 通过给定上下文触发列表所有回调函数
                deferred[tuple[0] + 'With'] = list.fireWith;
            });

            // 给deferred对象添加promise对象的所有属性
            promise.promise(deferred);

            if (func) {
                // 运行该函数，this和arguments都是deferred对象
                func.call(deferred, deferred);
            }

            // 返回deferred对象
            // 该对象现有 [ resolve | reject | notify | resolveWith | rejectWith | notifyWith ]
            // 以及从promise继承的 [ done | fail | then | promise | pipe | always | progress | state ]
            // 这些方法
            return deferred;
        },
        /**
         * 对多个deferred对象进行并行化操作，当所有deferred对象都得到解决就执行后面添加的相应回调。
         */
        when: function(subordinate /* , ..., subordinateN */ ) {
            var i = 0,
                // 把arguments转换成数组
                resolveValues = core_slice.call(arguments),
                // 参数的长度
                length = resolveValues.length,
                // 如果长度不等于1或者第一个参数是deferred对象，
                // 返回true，最后返回正常长度
                // 否则返回0
                // 说明参数必须是deferred对象，而remaining是记录执行剩余的长度
                remaining = length !== 1 || (subordinate && jQuery.isFunction(subordinate.promise)) ? length : 0,
                // 主要的Deferred对象。如果resolveValues只有一个Deferred对象
                // 使用该对象，否则新建一个Deferred对象
                deferred = remaining === 1 ? subordinate : jQuery.Deferred(),
                // 当为resolve或者progress的情况时的处理函数
                updateFunc = function(i, contexts, values) {
                    return function(value) {
                        contexts[i] = this;
                        // values是when参数数组或者progressValues
                        // 如果参数大于一，values[i]为参数数组
                        // 以$.ajax为例，$.ajax的解决回调的参数values[i] = [response, 'success', jqXHR]
                        // 所以在下次我们给列表添加回调时，回调的参数类似于这样[firsetAjaxCallbackArgs, secondAjaxCallbackArgs]
                        // firsetAjaxCallbackArgs为第一个ajax的[resposne, 'success', jqXHR]
                        // 以此类推
                        /**
                         * $.when(
                               $.ajax({
                                url: 't2.html'
                            }),
                             $.ajax({
                                url: 'jquery-1.9.1-study.js'
                            })
                            ).then(function(                    FirstAjaxSuccessCallbackArgs, SecondAjaxSuccessCallbackArgs){
                                 console.log('success');
                            }, function(){
                                console.log('failed');
                            });
                         */
                        values[i] = arguments.length > 1 ? core_slice.call(arguments) : value;
                        // progress
                        if (values === progressValues) {
                            deferred.notifyWith(contexts, values);

                            // 将remaining减一，说明该when参数的deferred已经回调注册完毕
                            // 如果这时remaining小于等于0，
                            // 说明我们正在解决最后一个参数deferred，
                            // 就立刻触发deferred的回调，注意这里的deferred不是参数的deferred
                            // 这里就达到了并行的效果了
                        } else if (!(--remaining)) {
                            // deferred需要在外部给回调列表注册回调
                            // resolve
                            deferred.resolveWith(contexts, values);
                        }
                    };
                },
                progressValues, progressContexts, resolveContexts;

            // 当至少有两个Deferred对象时
            if (length > 1) {
                progressValues = new Array(length);
                progressContexts = new Array(length);
                resolveContexts = new Array(length);
                for (; i < length; i++) {
                    // 遍历，如果是deferred对象，给when参数中当前的deferred的回调列表添加回调
                    if (resolveValues[i] && jQuery.isFunction(resolveValues[i].promise)) {
                        resolveValues[i].promise()
                            .done(updateFunc(i, resolveContexts, resolveValues))
                            .fail(deferred.reject)
                            .progress(updateFunc(i, progressContexts, progressValues));
                    } else {
                        // 否则不是deferred对象直接将remaining的长度-1
                        --remaining;
                    }
                }
            }

            // 当remaining为0的时候，也就是length===1或者when参数没有deferred对象时，立刻触发
            if (!remaining) {
                deferred.resolveWith(resolveContexts, resolveValues);
            }

            // 返回promise对象
            return deferred.promise();
        }
    });

　　

 这有一篇有关Deferred的讲得很好的文章，阮老师的：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

可以帮助更好了解Deferred对象的作用。

USAGE:

下面是部分Deferred对象的API使用方法：
1.deferred.done(doneCallbacks[,doneCallbacks])与deferred.fail(failCallbacks[,failCallbacks])

一旦jQuery.get方法返回一个jqXHR对象，这是从一个递延所得，可以附加的成功和失败回调使用deferrred.done()和deferred.fail()方法。

$.get("test.php")
  .done(function(){ alert("$.get succeeded"); })//延迟成功
  .fail(function(){ alert("$.get failed!"); });//延迟失败


2.deferred.then(doneCallbacks,failCallbacks[, progressCallbacks])

一旦jQuery.get方法返回一个来自延迟的对象的jqXHR对象，我们可以附加一个成功回调使用.then方法。

$.get("test.php").then(
    function(){ alert("$.get succeeded"); },
    function(){ alert("$.get failed!"); }
);


3.deferred.always(alwaysCallbacks,[alwaysCallbacks])

jQuery.get（）方法返回一个来自一个延迟的对象的jqXHR对象，我们可以附加一个成功和错误使用deferred.always（）方法的回调。

$.get("test.php").always( function() { 
  alert("$.get completed with success or error callback arguments"); 
} );

1.jQuery.when(deferreds)

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ 
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

$.when( { testing: 123 } ).done(
   function(x){ alert(x.testing); } /* alerts "123" */
);

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
        page1 and page2 ajax requests, respectively */
   var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
   if ( /Whip It/.test(jqXHR.responseText) ) {
      alert("First page has 'Whip It' somewhere.");
   }
});

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
  .then(myFunc, myFailure);