|
|
51CTO旗下网站
|
|
移动端

最细的实现剖析:jQuery 2.0.3源码分析Deferred

源码还是要靠自己去折腾的,思想的提高比较难的,我们可以借鉴设计的思路,代码书写方式都是有益无害的。流程的分析已经比较透彻。

作者:Aaron.来源:博客园|2013-10-10 14:52

Deferred的概念请看第一篇

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

******************构建Deferred对象时候的流程图**************************

**********************源码解析**********************

因为callback被剥离出去后,整个deferred就显得非常的精简

  1. jQuery.extend({   
  2.  
  3.     Deferred : function(){}  
  4.       
  5.     when : function()  
  6.  
  7. )} 

对于extend的继承这个东东,在之前就提及过jquery如何处理内部jquery与init相互引用this的问题

对于JQ的整体架构一定要弄懂 http://www.cnblogs.com/aaronjs/p/3278578.html

所以当jQuery.extend只有一个参数的时候,其实就是对jQuery静态方法的一个扩展

我们在具体看看2个静态方法内部都干了些什么

Deferred整体结构:

源码精简了部分代码

  1. Deferred: function( func ) {  
  2.         var tuples = [  
  3.                 // action, add listener, listener list, final state  
  4.                 [ "resolve""done", jQuery.Callbacks("once memory"), "resolved" ],  
  5.                 [ "reject""fail", jQuery.Callbacks("once memory"), "rejected" ],  
  6.                 [ "notify""progress", jQuery.Callbacks("memory") ]  
  7.             ],  
  8.             state = "pending",  
  9.             promise = {  
  10.                 state: function() {},  
  11.                 always: function() {},  
  12.                 then: function/* fnDone, fnFail, fnProgress */ ) { },  
  13.                 // Get a promise for this deferred  
  14.                 // If obj is provided, the promise aspect is added to the object  
  15.                 promise: function( obj ) {}  
  16.             },  
  17.             deferred = {};  
  18.         jQuery.each( tuples, function( i, tuple ) {  
  19.             deferred[ tuple[0] + "With" ] = list.fireWith;  
  20.         });  
  21.         promise.promise( deferred );  
  22.         // All done!  
  23.         return deferred;  
  24.     }, 
  1. 显而易见Deferred是个工厂类,返回的是内部构建的deferred对象
  2. tuples 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种状态
  3. 创建了一个promise对象,具有state、always、then、primise方法
  4. 扩展primise对象生成最终的Deferred对象,返回该对象

这里其实就是3个处理,但是有个优化代码的地方,就是把共性的代码给抽象出来,通过动态生成了

具体源码分析:

Deferred自身则围绕这三个对象进行更高层次的抽象

  • 触发回调函数列表执行(函数名)
  • 添加回调函数(函数名)
  • 回调函数列表(jQuery.Callbacks对象)
  • deferred最终状态(第三组数据除外)
  1. var tuples = [  
  2.         // action, add listener, listener list, final state  
  3.         [ "resolve""done", jQuery.Callbacks("once memory"), "resolved" ],  
  4.         [ "reject""fail", jQuery.Callbacks("once memory"), "rejected" ],  
  5.         [ "notify""progress", jQuery.Callbacks("memory") ]  
  6.     ], 

这里抽象出2组阵营:

1组:回调方法/事件订阅  

  1. done,fail,progress 

2组:通知方法/事件发布    

  1. resolve,reject,notify,resolveWith,rejectWith,notifyWith 

tuples 元素集 其实是把相同有共同特性的代码的给合并成一种结构,然后通过一次处理

  1. jQuery.each( tuples, function( i, tuple ) {  
  2.             var list = tuple[ 2 ],  
  3.                 stateString = tuple[ 3 ];  
  4.             promise[ tuple[1] ] = list.add;  
  5.             if ( stateString ) {  
  6.                 list.add(function() {  
  7.                     state = stateString;  
  8.  
  9.                 // [ reject_list | resolve_list ].disable; progress_list.lock  
  10.                 }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );  
  11.             }  
  12.             deferred[ tuple[0] ] = function() {  
  13.                 deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );  
  14.                 return this;  
  15.             };  
  16.             deferred[ tuple[0] + "With" ] = list.fireWith;  
  17.         }); 

对于tuples的3条数据集是分2部分处理的

第一部分将回调函数存入

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

其实就是给promise赋予3个回调函数

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

如果存在deferred最终状态

默认会预先向doneList,failList中的list添加三个回调函数

  1. if ( stateString ) {  
  2.     list.add(function() {  
  3.         // state = [ resolved | rejected ]  
  4.         state = stateString;  
  5.  
  6.     // [ reject_list | resolve_list ].disable; progress_list.lock  
  7.     }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );  

*************************************************************
这里有个小技巧

i ^ 1 按位异或运算符

所以实际上第二个传参数是1、0索引对调了,所以取值是failList.disable与doneList.disable

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

通过stateString有值这个条件,预先向doneList,failList中的list添加三个回调函数

分别是:

  1. doneList : [changeState, failList.disable, processList.lock]  
  2. failList : [changeState, doneList.disable, processList.lock] 
  • changeState 改变状态的匿名函数,deferred的状态,分为三种:pending(初始状态), resolved(解决状态), rejected(拒绝状态)
  • 不论deferred对象最终是resolve(还是reject),在首先改变对象状态之后,都会disable另一个函数列表failList(或者doneList)
  • 然后lock processList保持其状态,最后执行剩下的之前done(或者fail)进来的回调函数

所以第一步最终都是围绕这add方法

  • done/fail/是list.add也就是callbacks.add,将回调函数存入回调对象中

第二部分很简单,给deferred对象扩充6个方法

最后合并promise到deferred

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

所以最终通过工厂方法Deferred构建的异步对象带的所有的方法了

return 内部的deferred对象了

由此可见我们在

  1. var defer = $.Deferred(); //构建异步对象 

的时候,内部的对象就有了4个属性方法了

  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]

构造图

以上只是在初始化构建的时候,我们往下看看动态执行时候的处理

*****************执行期***********************

一个最简单的demo为例子

  1. var d = $.Deferred();  
  2.  
  3.  setTimeout(function(){  
  4.         d.resolve(22)  
  5.   },0);  
  6.  
  7.  d.then(function(val){  
  8.       console.log(val);  
  9.  }) 

当延迟对象被 resolved 时,任何通过 deferred.then或deferred.done 添加的 doneCallbacks,都会被调用。回调函数的执行顺序和它们被添加的顺序是一样的。传递给 deferred.resolve() 的 args 参数,会传给每个回调函数。当延迟对象进入 resolved 状态后,再添加的任何 doneCallbacks,当它们被添加时,就会被立刻执行,并带上传入给 .resolve()的参数

换句话说,我们调用d.resolve(22) 就等于是调用。

匿名函数并传入参数值 22

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

当前实际的使用中会有各种复杂的组合情况,但是整的外部调用流程就是这样的

***************** resolve的实现 *******************

我们回顾下,其实Deferred对象,内部的实现还是Callbacks对象,只是在外面再封装了一层API,供接口调用

  1. d.resolve(22) 

实际上调用的就是通过这个代码生成的

  1. deferred[ tuple[0] ] = function() {  
  2.     deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );  
  3.     return this;  
  4. };  
  5.  
  6. deferred[ tuple[0] + "With" ] = list.fireWith; 
  1. deferred.resolveWith() 

最终执行的就是 list.fireWith

  1. callbacks.fireWith() 

所以最终又回到回调对象callbacks中的私有方法fire()了

Callbacks会通过

callbacks.add()

把回调函数给注册到内部的list = []上,我们回来过看看

deferred.then()

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

***************** then的实现 *******************

  1. then: function/* fnDone, fnFail, fnProgress */ ) {  
  2.     var fns = arguments;  
  3.     return jQuery.Deferred(function( newDefer ) {  
  4.         jQuery.each( tuples, function( i, tuple ) {  
  5.             var action = tuple[ 0 ],  
  6.                 fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];  
  7.             // deferred[ done | fail | progress ] for forwarding actions to newDefer  
  8.             deferred[ tuple[1] ](function() {  
  9.                    //省略............  
  10.             });  
  11.         });  
  12.         fns = null;  
  13.     }).promise();  
  14. }, 
  • 递归jQuery.Deferred
  • 传递了func
  • 链式调用了promise()

因为在异步对象的方法都是嵌套找作用域属性方法的

这里我额外的提及一下作用域

  1. var d = $.Deferred(); 

这个异步对象d是作用域是如何呢?

第一层:无可争议,浏览器环境下最外层是 window

第二层:jquery本身是一个闭包

第三层: Deferred工厂方法产生的作用域

如果用d.then()方法呢?

很明显then方法又是嵌套在内部的函数,所以执行的时候都默认会包含以上三层作用域+自己本身函数产生的作用域了

我们用个简单图描绘下

演示文稿1

根据规则,在最内部的函数能够访问上层作用域的所有的变量

我们先从使用的层面去考虑下结构设计:

demo 1

  1. var defer = $.Deferred();  
  2.  
  3.   var filtered = defer.then(function( value ) {  
  4.         return value * 2;  
  5.       });  
  6.  
  7.   defer.resolve( 5 );  
  8.  
  9.   filtered.done(function( value ) {  
  10.       console.log(value) //10  
  11.   }); 

demo 2

  1. var defer = $.Deferred();  
  2.  
  3.   defer.then(function(value) {  
  4.     return value * 2;  
  5.   }).then(function(value) {  
  6.     return value * 2;  
  7.   }).done(function(value) {  
  8.       alert(value)  //20  
  9.   });  
  10.  
  11.   defer.resolve( 5 ); 

其实这里就是涉及到defer.then().then().done()  链式调用了

API是这么定义的:

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

从jQuery 1.8开始, 方法返回一个新的promise(承诺),通过一个函数,可以过滤deferred(延迟)的状态和值。替换现在过时的deferred.pipe()方法。 doneFilter 和 failFilter函数过滤原deferred(延迟)的解决/拒绝的状态和值。 progressFilter 函数过滤器的任何调用到原有的deferred(延迟)的notify 和 notifyWith的方法。 这些过滤器函数可以返回一个新的值传递给的 promise(承诺)的.done() 或 .fail() 回调,或他们可以返回另一个观察的对象(递延,承诺等)传递给它的解决/拒绝的状态和值promise(承诺)的回调。 如果过滤函数是空,或没有指定,promise(承诺)将得到与原来值相同解决(resolved)或拒绝(rejected)。

我们抓住几点:

  • 返回的是新的promise对象
  • 内部有一个滤器函数

从demo 1中我们就能看到

经过x.then()方法处理的代码中返回的this(filtered ),不是原来的$.Deferred()所有产生的那个异步对象(defer )了

所以,每经过一个then那么内部处理的this都要被重新设置,那么为什么要这样处理呢?

源码

  1. then: function/* fnDone, fnFail, fnProgress */ ) {  
  2.                     var fns = arguments;  
  3.                     //分别为deferred的三个callbacklist添加回调函数,根据fn的是否是函数,分为两种情况  
  4.                     return jQuery.Deferred(function( newDefer ) {  
  5.                         jQuery.each( tuples, function( i, tuple ) {  
  6.                             var action = tuple[ 0 ],  
  7.                                 fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];  
  8.                             // deferred[ done | fail | progress ] for forwarding actions to newDefer  
  9.                             deferred[ tuple[1] ](function() {  
  10.                                 var returned = fn && fn.apply( this, arguments );  
  11.                                 if ( returned && jQuery.isFunction( returned.promise ) ) {  
  12.                                     returned.promise()  
  13.                                         .done( newDefer.resolve )  
  14.                                         .fail( newDefer.reject )  
  15.                                         .progress( newDefer.notify );  
  16.                                 } else {  
  17.                                     newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );  
  18.                                 }  
  19.                             });  
  20.                         });  
  21.                         fns = null;  
  22.                     }).promise();  
  23.                 }, 

在Deferred传递实参的时候,支持一个flag,jQuery.Deferred(func)

传递一个回调函数

  1. // Call given func if any  
  2. if ( func ) {  
  3.     func.call( deferred, deferred );  

所以newDefer可以看作是

  1. newDefer = $.Deferred(); 

那么func回调的处理的就是过滤函数了

  1. deferred[ tuple[1] ](function() {  
  2.     var returned = fn && fn.apply( this, arguments );  
  3.     if ( returned && jQuery.isFunction( returned.promise ) ) {  
  4.         returned.promise()  
  5.             .done( newDefer.resolve )  
  6.             .fail( newDefer.reject )  
  7.             .progress( newDefer.notify );  
  8.     } else {  
  9.         newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );  
  10.     }  
  11. }); 

这里其实也有编译函数的概念,讲未来要执行的代码,预先通过闭包函数也保存起来,使其访问各自的作用域

第一步

分解tuples元素集

  1. jQuery.each( tuples, function( i, tuple ) {  
  2.    //过滤函数第一步处理  
  3. }) 

第二步

分别为deferred[ done | fail | progress ]执行对应的add方法,增加过滤函数给done | fail | progress 方法

  1. deferred[ tuple[1] ](  
  2. 传入过滤函数  
  3. //过滤函数 执行的时候在分解 

代码即

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

第三步

返回return jQuery.Deferred().promise()

此时构建了一个新的Deferred对象,但是返回的的是经过promise()方法处理后的,返回的是一个受限的promise对象

所以整个then方法就处理了2个事情

  • 构建一个新的deferred对象,返回受限的promise对象
  • 给父deferred对象的[ done | fail | progress ]方法都增加一个过滤函数的方法

我们知道defer.then方法返回的是一个新的jQuery.Deferred().promise()对象

那么我们把defer.then返回的称之为子对象,那么如何与父对象var defer = $.Deferred() 关联的起来的

我看看源码

  1. deferred[ tuple[1] ](//过滤函数//) 

deferred其实就是根级父对象的引用,所以就嵌套再深,其实都是调用了父对象deferred[ done | fail | progress 执行add罢了

从图中就能很明显的看到 2个不同的deferred对象中 done fail progress分别都保存了不同的处理回调了

deferred.resolve( args )

  • 当延迟对象被 resolved 时,任何通过 deferred.thendeferred.done 添加的 doneCallbacks,都会被调用
  • 回调函数的执行顺序和它们被添加的顺序是一样的
  • 传递给 deferred.resolve() 的 args 参数,会传给每个回调函数
  • 当延迟对象进入 resolved 状态后,再添加的任何 doneCallbacks,当它们被添加时,就会被立刻执行,并带上传入给.resolve()的参数

流程如图

 

流程解析:

1 执行fire()方法,递归执行list所有包含的处理方法

2 执行了默认的 changeState, disable, lock 方法、

3 执行过滤函数

根据 var returned = fn.apply( this, arguments )的返回值(称作returnReferred)是否是deferred对象

  • 返回值是deferred对象,那么在returnReferred对象的三个回调函数列表中添加newDeferred的resolve(reject,notify)方法,也就是说newDeferrred的执行依赖returnDeferred的状态

  • 不是函数的情况(如值为undefined或者null等),直接链接到newDeferred的resolve(reject,notify) 方法,也就是说  newDeferrred的执行依赖外层的调用者deferred的状态或者说是执行动作(resolve还是reject或者是notify)  此时deferred.then()相当于将自己的callbacklist和newDeferred的callbacklist连接起来

下面就是嵌套deferred对象的划分了

image

源码还是要靠自己去折腾的,思想的提高比较难的,我们可以借鉴设计的思路,代码书写方式都是有益无害的。

流程的分析已经比较透彻了,下一章在讲解when的实现。

原文链接:http://www.cnblogs.com/aaronjs/p/3356505.html

【编辑推荐】

  1. 15个实用的HTML5、JavaScript工具和jQuery插件
  2. 有jQuery背景的我,该如何用AngularJS编程思想?
  3. jQuery 2.0.3源码分析Sizzle引擎
  4. 10 款提高开发效率的 jQuery/CSS3 组件
  5. 不定义JQuery插件,不要说会JQuery
【责任编辑:小林 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Windows Forms 编程实战

本书由浅入深地介绍Windows Forms编程的技巧和各种实用方法。本书先详细介绍了菜单、状态条、可复用类库、文件对话框、文本框、按钮、列表...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊