Deferred的概念請(qǐng)看第一篇

http://www.cnblogs.com/aaronjs/p/3348569.html

******************構(gòu)建Deferred對(duì)象時(shí)候的流程圖**************************

**********************源碼解析**********************

因?yàn)閏allback被剝離出去后，整個(gè)deferred就顯得非常的精簡(jiǎn)

jQuery.extend({   
 
    Deferred : function(){}  
      
    when : function()  
 
)} 

對(duì)于extend的繼承這個(gè)東東，在之前就提及過(guò)jquery如何處理內(nèi)部jquery與init相互引用this的問(wèn)題

對(duì)于JQ的整體架構(gòu)一定要弄懂 http://www.cnblogs.com/aaronjs/p/3278578.html

所以當(dāng)jQuery.extend只有一個(gè)參數(shù)的時(shí)候，其實(shí)就是對(duì)jQuery靜態(tài)方法的一個(gè)擴(kuò)展

我們?cè)诰唧w看看2個(gè)靜態(tài)方法內(nèi)部都干了些什么：

Deferred整體結(jié)構(gòu)：

源碼精簡(jiǎn)了部分代碼

Deferred: function( func ) {  
        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() {},  
                always: function() {},  
                then: function( /* fnDone, fnFail, fnProgress */ ) { },  
                // Get a promise for this deferred  
                // If obj is provided, the promise aspect is added to the object  
                promise: function( obj ) {}  
            },  
            deferred = {};  
        jQuery.each( tuples, function( i, tuple ) {  
            deferred[ tuple[0] + "With" ] = list.fireWith;  
        });  
        promise.promise( deferred );  
        // All done!  
        return deferred;  
    }, 

1. 顯而易見(jiàn)Deferred是個(gè)工廠類，返回的是內(nèi)部構(gòu)建的deferred對(duì)象
2. tuples 創(chuàng)建三個(gè)$.Callbacks對(duì)象，分別表示成功，失敗，處理中三種狀態(tài)
3. 創(chuàng)建了一個(gè)promise對(duì)象，具有state、always、then、primise方法
4. 擴(kuò)展primise對(duì)象生成最終的Deferred對(duì)象，返回該對(duì)象

這里其實(shí)就是3個(gè)處理,但是有個(gè)優(yōu)化代碼的地方,就是把共性的代碼給抽象出來(lái),通過(guò)動(dòng)態(tài)生成了

具體源碼分析:

Deferred自身則圍繞這三個(gè)對(duì)象進(jìn)行更高層次的抽象

• 觸發(fā)回調(diào)函數(shù)列表執(zhí)行(函數(shù)名)
• 添加回調(diào)函數(shù)（函數(shù)名）
• 回調(diào)函數(shù)列表（jQuery.Callbacks對(duì)象）
• deferred最終狀態(tài)（第三組數(shù)據(jù)除外）

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") ]  
    ], 

這里抽象出2組陣營(yíng)：

1組：回調(diào)方法/事件訂閱  

done，fail，progress 

2組：通知方法/事件發(fā)布    

resolve，reject，notify，resolveWith，rejectWith，notifyWith 

tuples 元素集 其實(shí)是把相同有共同特性的代碼的給合并成一種結(jié)構(gòu)，然后通過(guò)一次處理

jQuery.each( tuples, function( i, tuple ) {  
            var list = tuple[ 2 ],  
                stateString = tuple[ 3 ];  
            promise[ tuple[1] ] = list.add;  
            if ( stateString ) {  
                list.add(function() {  
                    state = stateString;  
 
                // [ reject_list | resolve_list ].disable; progress_list.lock  
                }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );  
            }  
            deferred[ tuple[0] ] = function() {  
                deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );  
                return this;  
            };  
            deferred[ tuple[0] + "With" ] = list.fireWith;  
        }); 

對(duì)于tuples的3條數(shù)據(jù)集是分2部分處理的

第一部分將回調(diào)函數(shù)存入

promise[ tuple[1] ] = list.add; 

其實(shí)就是給promise賦予3個(gè)回調(diào)函數(shù)

promise.done = $.Callbacks("once memory").add 

promise.fail = $.Callbacks("once memory").add 

promise.progressl = $.Callbacks("memory").add 

如果存在deferred最終狀態(tài)

默認(rèn)會(huì)預(yù)先向doneList,failList中的list添加三個(gè)回調(diào)函數(shù)

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 );  
} 

*************************************************************
這里有個(gè)小技巧

i ^ 1 按位異或運(yùn)算符

所以實(shí)際上第二個(gè)傳參數(shù)是1、0索引對(duì)調(diào)了，所以取值是failList.disable與doneList.disable

************************************************************* 

通過(guò)stateString有值這個(gè)條件，預(yù)先向doneList,failList中的list添加三個(gè)回調(diào)函數(shù)

分別是:

doneList : [changeState, failList.disable, processList.lock]  
failList : [changeState, doneList.disable, processList.lock] 

• changeState 改變狀態(tài)的匿名函數(shù)，deferred的狀態(tài)，分為三種：pending(初始狀態(tài)), resolved(解決狀態(tài)), rejected(拒絕狀態(tài))
• 不論deferred對(duì)象最終是resolve（還是reject），在首先改變對(duì)象狀態(tài)之后，都會(huì)disable另一個(gè)函數(shù)列表failList(或者doneList)
• 然后lock processList保持其狀態(tài)，最后執(zhí)行剩下的之前done（或者fail）進(jìn)來(lái)的回調(diào)函數(shù)

所以第一步最終都是圍繞這add方法

• done/fail/是list.add也就是callbacks.add，將回調(diào)函數(shù)存入回調(diào)對(duì)象中

第二部分很簡(jiǎn)單，給deferred對(duì)象擴(kuò)充6個(gè)方法

• resolve/reject/notify 是 callbacks.fireWith，執(zhí)行回調(diào)函數(shù)
• resolveWith/rejectWith/notifyWith 是 callbacks.fireWith 隊(duì)列方法引用

最后合并promise到deferred

promise.promise( deferred );  
jQuery.extend( obj, promise ) 

所以最終通過(guò)工廠方法Deferred構(gòu)建的異步對(duì)象帶的所有的方法了

return 內(nèi)部的deferred對(duì)象了

由此可見(jiàn)我們?cè)?/p>

var defer = $.Deferred(); //構(gòu)建異步對(duì)象 

的時(shí)候,內(nèi)部的對(duì)象就有了4個(gè)屬性方法了

1. deferred: Object
   1. always: function () {
   2. done: function () {
   3. fail: function () {
   4. notify: function () {
   5. notifyWith: function ( context, args ) {
   6. pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
   7. progress: function () {
   8. promise: function ( obj ) {
   9. reject: function () {
   10. rejectWith: function ( context, args ) {
   11. resolve: function () {
   12. resolveWith: function ( context, args ) {
   13. state: function () {
   14. then: function ( /* fnDone, fnFail, fnProgress */ ) {
2. promise: Object
   1. always: function () {
   2. done: function () {
   3. fail: function () {
   4. pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
   5. progress: function () {
   6. promise: function ( obj ) {
   7. state: function () {
   8. then: function ( /* fnDone, fnFail, fnProgress */ ) {
3. state: "pending"
4. tuples: Array[3]

構(gòu)造圖

以上只是在初始化構(gòu)建的時(shí)候，我們往下看看動(dòng)態(tài)執(zhí)行時(shí)候的處理

#p#

*****************執(zhí)行期***********************

一個(gè)最簡(jiǎn)單的demo為例子

var d = $.Deferred();  
 
 setTimeout(function(){  
        d.resolve(22)  
  },0);  
 
 d.then(function(val){  
      console.log(val);  
 }) 

當(dāng)延遲對(duì)象被 resolved 時(shí)，任何通過(guò) deferred.then或deferred.done 添加的 doneCallbacks，都會(huì)被調(diào)用?；卣{(diào)函數(shù)的執(zhí)行順序和它們被添加的順序是一樣的。傳遞給 deferred.resolve() 的 args 參數(shù)，會(huì)傳給每個(gè)回調(diào)函數(shù)。當(dāng)延遲對(duì)象進(jìn)入 resolved 狀態(tài)后，再添加的任何 doneCallbacks，當(dāng)它們被添加時(shí)，就會(huì)被立刻執(zhí)行，并帶上傳入給 .resolve()的參數(shù)

換句話說(shuō)，我們調(diào)用d.resolve(22) 就等于是調(diào)用。

匿名函數(shù)并傳入?yún)?shù)值 22

function(val){  
      console.log(val); //22  
 } 

當(dāng)前實(shí)際的使用中會(huì)有各種復(fù)雜的組合情況，但是整的外部調(diào)用流程就是這樣的

***************** resolve的實(shí)現(xiàn) *******************

我們回顧下，其實(shí)Deferred對(duì)象，內(nèi)部的實(shí)現(xiàn)還是Callbacks對(duì)象，只是在外面再封裝了一層API，供接口調(diào)用

d.resolve(22) 

實(shí)際上調(diào)用的就是通過(guò)這個(gè)代碼生成的

deferred[ tuple[0] ] = function() {  
    deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );  
    return this;  
};  
 
deferred[ tuple[0] + "With" ] = list.fireWith; 

deferred.resolveWith() 

最終執(zhí)行的就是 list.fireWith

callbacks.fireWith() 

所以最終又回到回調(diào)對(duì)象callbacks中的私有方法fire()了

Callbacks會(huì)通過(guò)

callbacks.add()

把回調(diào)函數(shù)給注冊(cè)到內(nèi)部的list = []上,我們回來(lái)過(guò)看看

deferred.then()

d.then(function(val){  
      console.log(val);  
 }) 

***************** then的實(shí)現(xiàn) *******************

then: function( /* fnDone, fnFail, fnProgress */ ) {  
    var fns = arguments;  
    return jQuery.Deferred(function( newDefer ) {  
        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() {  
                   //省略............  
            });  
        });  
        fns = null;  
    }).promise();  
}, 

• 遞歸jQuery.Deferred
• 傳遞了func
• 鏈?zhǔn)秸{(diào)用了promise()

因?yàn)樵诋惒綄?duì)象的方法都是嵌套找作用域?qū)傩苑椒ǖ?/strong>

var d = $.Deferred(); 

var defer = $.Deferred();  
 
  var filtered = defer.then(function( value ) {  
        return value * 2;  
      });  
 
  defer.resolve( 5 );  
 
  filtered.done(function( value ) {  
      console.log(value) //10  
  }); 

var defer = $.Deferred();  
 
  defer.then(function(value) {  
    return value * 2;  
  }).then(function(value) {  
    return value * 2;  
  }).done(function(value) {  
      alert(value)  //20  
  });  
 
  defer.resolve( 5 ); 

deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) 

then: function( /* fnDone, fnFail, fnProgress */ ) {  
                    var fns = arguments;  
                    //分別為deferred的三個(gè)callbacklist添加回調(diào)函數(shù)，根據(jù)fn的是否是函數(shù)，分為兩種情況  
                    return jQuery.Deferred(function( newDefer ) {  
                        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() {  
                                var returned = fn && fn.apply( this, arguments );  
                                if ( returned && jQuery.isFunction( returned.promise ) ) {  
                                    returned.promise()  
                                        .done( newDefer.resolve )  
                                        .fail( newDefer.reject )  
                                        .progress( newDefer.notify );  
                                } else {  
                                    newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );  
                                }  
                            });  
                        });  
                        fns = null;  
                    }).promise();  
                }, 

// Call given func if any  
if ( func ) {  
    func.call( deferred, deferred );  
} 

newDefer = $.Deferred(); 

deferred[ tuple[1] ](function() {  
    var returned = fn && fn.apply( this, arguments );  
    if ( returned && jQuery.isFunction( returned.promise ) ) {  
        returned.promise()  
            .done( newDefer.resolve )  
            .fail( newDefer.reject )  
            .progress( newDefer.notify );  
    } else {  
        newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );  
    }  
}); 

jQuery.each( tuples, function( i, tuple ) {  
   //過(guò)濾函數(shù)第一步處理  
}） 

deferred[ tuple[1] ]（  
傳入過(guò)濾函數(shù)  
）//過(guò)濾函數(shù) 執(zhí)行的時(shí)候在分解 

deferred[done] = list.add = callback.add 

deferred[ tuple[1] ](//過(guò)濾函數(shù)//)