深刻分析，理解jQuery.Deferred源碼

前言: 若是你對jQuery.Callback回調對象不瞭解，或者只掌握其方法，可是沒有經過閱讀源碼理解，能夠先閱讀

前一章jQuery.Callbacks源碼解讀二，由於只有徹底理解jQuery.Callback源碼，才能真正的理解並掌握jQuery.Deferred遞延對象。

 

源碼：

// jQuery 1.10.2
jQuery.extend({

    Deferred: function( func ) {
        /*
            tuples包含三個數組
            三個數組前三項分別表明jQuery回調對象中的 fire, add, jQuery.Callbacks( flag ), 後面擴展的
            deferred[ resolve | resolveWith | done ],promise[ done ]爲一組,
            deferred[ reject | rejectWith | fail ],promise[ fail ]爲一組,
            deferred[ notify | notifyWith | progress ]爲一組，分別爲三個不一樣的回調對象提供操做其內部的接口。
            
            首次看能夠忽略下面註釋，then中的代碼放到最後結合下面的註釋理解。

            注意: deferred與promise爲同一jQuery.Deferred做用域中的，其中在then方法中，又生成了另一個域中的deferred與promise
            例如: var df = $.Deferred(); var df2 = df.then(args); 其中df2(一個新的promise)與newDefer(一個新的deferred)對應於同一域,理解了
            這一點，才能更好的理解then中的代碼。
        */
        var tuples = [
                // action, add listener, listener list, final state
                [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
                [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
                [ "notify", "progress", jQuery.Callbacks("memory") ]
            ],

            state = "pending",
            promise = {
                state: function() {
                    return state;
                },
                always: function() {
                    deferred.done( arguments ).fail( arguments );
                    return this;
                },
                then: function( /* fnDone, fnFail, fnProgress */ ) {
                    var fns = arguments;
                    return jQuery.Deferred(function( newDefer ) {
                        // this === deferred; // true;
                        jQuery.each( tuples, function( i, tuple ) {
                            var action = tuple[ 0 ],
                                fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
                            // deferred[ done | fail | progress ] for forwarding actions to newDefer
                            deferred[ tuple[1] ](function() {
                                // 說明遞延對象狀態被改變時,fn纔會被調用
                                var returned = fn && fn.apply( this, arguments );
                                /*
                                    知足該條件的有如下幾種狀況:
                                    一、fn爲then; 二、fn爲Deferred; 1,2排除
                                    三、在fn中顯示返回遞延對象, 則returned === deferred
                                    在jQuery.Callbacks源碼中咱們知道 正在執行的回調執行了add操做，則更新firingLength,
                                    所以newDefer[ resolve | reject | notify ]也將執行, 相似fn.apply( this, arguments )
                                */
                                if ( returned && jQuery.isFunction( returned.promise ) ) {
                                    returned.promise()
                                        .done( newDefer.resolve )
                                        .fail( newDefer.reject )
                                        .progress( newDefer.notify );
                                }
                                /*
                                    與deferred[ resolve | reject | notify ]註釋同理
                                    若是deferred[ resolve | reject | notify ]沒有被借用，默認第一個參數爲promise(即this)，這裏傳遞新的newDefer.promise
                                    若是then中傳遞了函數，則第二個參數爲一個數組(元素爲該函數的返回值)，反之則使用deferred[ resolve | resolveWith ]等傳遞的參數
                                */
                                else {
                                    // 爲何這樣寫[ returned ],緣由是它做爲apply的第二個參數
                                    newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
                                }
                            });
                        });
                        fns = null;
                    }).promise();
                },
                // Get a promise for this deferred
                // If obj is provided, the promise aspect is added to the object
                promise: function( obj ) {
                    return obj != null ? jQuery.extend( obj, promise ) : promise;
                }
            },
            deferred = {};

        // Keep pipe for back-compat
        // 兼容以前版本,保留pipe方法
        promise.pipe = promise.then;

        // Add list-specific methods
        jQuery.each( tuples, function( i, tuple ) {
            var list = tuple[ 2 ],
                stateString = tuple[ 3 ];

            // promise[ done | fail | progress ] = list.add
            promise[ tuple[1] ] = list.add;

            // Handle state
            // 若是tuples中一個數組的回調對象被觸發時，則改變狀態，第三個數組中的回調對象被鎖定，另外一個被禁用
            // 所以，若是state = 'resolved',執行reject,將不會觸發fail執行時添加的回調,由於對應的回調對象被禁用
            if ( stateString ) {
                list.add(function() {
                    // state = [ resolved | rejected ]
                    state = stateString;

                // [ reject_list | resolve_list ].disable; progress_list.lock
                }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
            }

            // deferred[ resolve | reject | notify ]
            deferred[ tuple[0] ] = function() {
                /*
                    解釋一下第一個參數中的條件運算符
                    若是deferred[ resolve | reject | notify ]方法沒有被借用( 即deferred.resolve.call(指定對象, args); ),
                    默認第一個參數爲 已經擴展的promise對象，不然爲借用方法時指定的對象
                */
                deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
                return this;
            };
            deferred[ tuple[0] + "With" ] = list.fireWith;
        });

        // Make the deferred a promise
        // 擴展deferred，使其擁有promise中的全部方法
        promise.promise( deferred );

        // Call given func if any
        // 將在deferred.then中執行
        if ( func ) {
            func.call( deferred, deferred );
        }

        // All done!
        return deferred;
    }
});

 

完整實例1：

var fn1 = function(){
        console.log('resolved');
    },
    fn2 = function(){
        console.log('rejected');
    },
    fn3 = function(){
        console.log('pending');
    };

var defer = $.Deferred();

 

第一種用法：

1 defer.done(fn1);
2 defer.resolve(); // resolved

若是再調用resolve,fn1將不會再執行,由於jQuery.Callbacks('once memory')回調對象中傳入標誌once

1 defer.resolve(); // fn1再也不執行

 

第二種寫法：

1 defer.resolve();
2 // defer.done(fn1).done(fn1).done(fn1);
3 defer.done(fn1);  // resolved
4 defer.done(fn1);  // resolved
5 defer.done(fn1);  // resolved

上面寫法是由於對應的jQuery.Callbacks('once memory')回調對象中傳入了標誌memory，回調纔會觸發；

如下操做不起做用，緣由是fail,reject操做對應的回調對象被禁用

1 defer.fail(fn2);
2 defer.reject();

如下操做也不起做用，緣由是progress,notify操做對應的回調對象被鎖定；
這裏有一個疑問，爲何在源碼中第三個回調對象只是鎖定呢，而不是禁用？由於它傳入的flag中沒有memory，執行鎖定實際是禁用

1 defer.progress(fn3);
2 defer.notify();

 

完整實例2：

var fn1 = function(str){
        console.log(str + ':' + 'resolved');
    },
    fn2 = function(str){
        console.log(str + ':' + 'rejected');
    },
    fn3 = function(str){
        console.log(str + ':' + 'pending');
    },
    fn4 = function(str){
        console.log(str + ':' + 'resolved' + ' ' + 'again');
    },
    defer, filterd, filterd2;

defer = $.Deferred();
defer.resolve('state');
filterd = defer.then(fn1); // state:resolved
filterd.done(fn4);  // undefined:resolved again

fn4爲何會執行,由於在then中已經執行了newDefer.resolveWith,而filterd爲一個newDefer.promise對象,且對應的jQuery.Callbacks('once memory')回調對象中傳入了標誌memory;再次,結果第一個子串爲何是undefined,由於then中已經傳遞了函數,而該函數沒有顯示返回值,默認返回undefined；

反之,若是then中沒有傳遞參數,那麼回調就能夠獲取resolve傳遞過來的參數

1 filterd2 = defer.then();
2 filterd2.done(fn4); // state:resolved again

 

完整實例3：

var fn1 = function(str){
        console.log(str + ':' + 'resolved');
        // 在回調中顯示返回一個遞延對象
        return defer;
    },
    fn4 = function(str){
        console.log(str + ':' + 'resolved' + ' ' + 'again');
    },
    defer, filterd;

defer = $.Deferred();
defer.resolve('state');
filterd = defer.then(fn1); // state:resolved
filterd = defer.done(fn4); // state:resolved again

 

轉載請註明出處：博客園華子yjh