jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）

转载http://www.cnblogs.com/aaronjs/p/3356505.html

Deferred的概念请看第一篇

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

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

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

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

jQuery.extend({ 

    Deferred : function(){}

    when : function()

)}

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

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

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

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

Deferred整体结构：

源码精简了部分代码

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. 显而易见Deferred是个工厂类，返回的是内部构建的deferred对象
  2. tuples 创建三个$.Callbacks对象，分别表示成功，失败，处理中三种状态
  3. 创建了一个promise对象，具有state、always、then、primise方法
  4. 扩展primise对象生成最终的Deferred对象，返回该对象

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


具体源码分析:

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

  • 触发回调函数列表执行(函数名)
  • 添加回调函数（函数名）
  • 回调函数列表（jQuery.Callbacks对象）
  • deferred最终状态（第三组数据除外）

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组阵营：

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

done，fail，progress

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

resolve，reject，notify，resolveWith，rejectWith，notifyWith

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

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

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


第一部分将回调函数存入

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

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

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

如果存在deferred最终状态

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

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

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

i ^ 1 按位异或运算符

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

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

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

分别是:

doneList : [changeState, failList.disable, processList.lock]
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

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

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

return 内部的deferred对象了

由此可见我们在

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为例子

var d = $.Deferred();

 setTimeout(function(){
        d.resolve(22)
  },0);

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

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

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

匿名函数并传入参数值 22

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

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

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


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

d.resolve(22)

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

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

最终执行的就是 list.fireWith

callbacks.fireWith()

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


Callbacks会通过

callbacks.add()

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

deferred.then()

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

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

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
  • 链式调用了promise()

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

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

var d = $.Deferred();

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

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

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

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

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

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

我们用个简单图描绘下

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


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

demo 1

var defer = $.Deferred();

  var filtered = defer.then(function( value ) {
        return value * 2;
      });

  defer.resolve( 5 );

  filtered.done(function( value ) {
      console.log(value) //10
  });

demo 2

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

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

API是这么定义的:

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都要被重新设置，那么为什么要这样处理呢？

源码

then: function( /* fnDone, fnFail, fnProgress */ ) {
                    var fns = arguments;
                    //分别为deferred的三个callbacklist添加回调函数，根据fn的是否是函数，分为两种情况
                    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();
                },

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

传递一个回调函数

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

所以newDefer可以看作是

newDefer = $.Deferred();

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

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

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

第一步

分解tuples元素集

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

第二步

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

deferred[ tuple[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() 关联的起来的

我看看源码

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

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

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

deferred.resolve( args )
  • 当延迟对象被 resolved 时，任何通过 deferred.then或deferred.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对象的划分了

源码还是要靠自己去折腾的

思想的提高比较难的，我们可以借鉴设计的思路，代码书写方式都是有益无害的

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

时间： 2024-09-28 21:29:44

jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）的相关文章

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

Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html **构建Deferred对象时候的流程图** **源码解析** 因为callback被剥离出去后,整个deferred就显得非常的精简 jQuery.extend({ Deferred:function(){} when:function() )}对于extend的继承这个东东,在之前就提及过jquery如何处理内部jquery与init相互引用this的问题 对于JQ的

转载Aaron博客 ---- jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize

jQuery 2.0.3 源码分析 Deferrred概念

转载http://www.cnblogs.com/aaronjs/p/3348569.html JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也 是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎.此时我们不能 用if来实现逻辑分支,也不能用while/for/do来实现循环,更不用提异步操作之间的组合.错误处理以及取消操作了.

jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

转:http://www.cnblogs.com/aaronjs/p/3440647.html?winzoom=1 事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行 为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分 网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新

jQuery 2.0.3 源码分析core - 选择器

转载http://www.cnblogs.com/aaronjs/p/3281911.html 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strin

jQuery 2.0.3 源码分析core - 整体架构

转载http://www.cnblogs.com/aaronjs/p/3278578.html 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().hide().html('....').hide(). 从上面的写法上至少可以发现2个问题 1. jQuery对象的构建方式 2 .jQuery方法的调用方式 分析一:jQuery的无new构建 JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概

转载Aaron博客 ---- jQuery 2.0.3 源码分析 回调对象 - Callbacks

源码API:http://api.jquery.com/jQuery.Callbacks/ jQuery.Callbacks()是在版本1.7中新加入的.它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列. 那么jQuery.Callbacks使用场景在哪里? 在很多时候需要控制一系列的函数顺序执行.那么一般就需要一个队列函数来处理这个问题 我们看一段代码 function Aaron(List, callback) { setTimeout(function() { va

jQuery 2.0.3 源码分析 数据缓存

转载http://www.cnblogs.com/aaronjs/p/3370176.html 历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放到EventTarget之上,这会引发循环引用 如果EventTarget是window对象,又会引发全局污染 不同模块之间用不同缓存变量 一般jQuery开发,我们都喜欢便捷式的把很多属性,比如状态标志