`
nuysoft
  • 浏览: 522053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
91bd5d30-bd1e-3b00-9210-87db1cca0016
jQuery技术内幕
浏览量:201231
社区版块
存档分类
最新评论

[原创] jQuery源码分析-05异步队列 Deferred

阅读更多

 

5. 异步队列 Deferred

5.1        概述

异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务。

异步队列有三种状态:初始化(unresolved,成功(resolved),失败(rejected)。

执行哪些回调函数依赖于状态。

状态变为成功(resolved)或失败(rejected)后,将保持不变。

回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定。

(本节中的 绑定 注册 增加 具有相同的含义)

5.2        关键方法

先看看jQuery. Deferred()中的关键方法

分类

方法

说明

增加

deferred.done()

增加成功回调函数

状态为成功(resolved时立即调用

deferred.fail()

增加失败回调函数

状态为失败(rejected时立即调用

deferred.then()

增加成功回调函数失败回调函数到各自的队列中

便捷方法,两个参数可以是数组或null

状态为成功(resolved时立即调用成功回调函数

状态为失败(rejected时立即调用失败回调函数

 

deferred.always()

增加回调函数,同时增加到成功队列失败队列

状态已确定(无论成功失败)时立即调用回调函数

执行

deferred.resolve()

调用成功回调函数队列

通过调用deferred.resolveWith()实现

deferred.resolveWith()

使用指定的上下文和参数执行成功回调函数

deferred.reject()

调用失败回调函数队列

通过调用deferred.rejectWith()实现

deferred.rejectWith()

使用指定的上下文和参数执行失败回调函数队列

其他

deferred.isRejected()

判断状态是否为成功(resolved

deferred.isResolved()

判断状态是否为失败rejected

deferred.pipe()

 

每次调用回调函数之前先调用传入的成功过滤函数失败过滤函数,并将过滤函数的返回值作为回调函数的参数

最终返回一个只读视图(调用promise实现)

deferred.promise()

返回deferred的只读视图

接下来将会jQuery._DeferredjQuery.Deferred的源码详细剖析。


 


5.3        jQuery._Deferred

局部变量

// 参考资料:

// 官网文档 http://api.jquery.com/category/deferred-object/

// Deferred机制 http://www.cnblogs.com/fjzhou/archive/2011/05/30/jquery-source-3.html

// jQuery 1.5中使用deferred对象 http://developer.51cto.com/art/201103/248638.htm

// 拿着放大镜看Promise http://www.cnblogs.com/sanshi/archive/2011/03/11/1981789.html

// Promises/A http://wiki.commonjs.org/wiki/Promises/A 

 

var // Promise methods

    // 注意,没有以下方法:resolveWith resolve rejectWith reject pipe when cancel

    // 即不允许调用resolve reject cancel

    promiseMethods = "done fail isResolved isRejected promise then always pipe".split( " " ),

    // Static reference to slice

    // 静态引用slice方法,借鸡生蛋

    sliceDeferred = [].slice;

_Deferred

_Deferred: function() {

    var // callbacks list

       // 回调函数数组(这里不翻译为队列,避免概念上的混淆)

       callbacks = [],

       // stored [ context , args ]

       // 存储上下文、参数,同时还可以标识是否执行完成(fired非空即表示已完成)

       // 这里的完成指回调函数数组中已有的函数都已执行完成;

       // 但是可以再次调用done添加回调函数,添加时fired会被重置为0

       fired,

       // to avoid firing when already doing so

       // 如果已经触发正在执行,避免再次触发

       firing,

       // flag to know if the deferred has been cancelled

       // 标识异步队列是否已被取消,取消后将忽略对done resolve resolveWith的调用

       cancelled,

       // 异步队列定义(这才是正主,上边的局部变量通过闭包引用)

       // the deferred itself

       deferred  = {

           // done( f1, f2, ...)

           // 增加成功回调函数,状态为成功(resolved)时立即调用

           done: function() {

              // 如果已取消,则忽略本次调用

              if ( !cancelled ) {

                  // 将后边代码用到的局部变量定义在代码块开始处的好处:

                  // 1.声明变量,增加代码可读性;

                  // 2.共享变量,提高性能

                  // 注:多年写Java的经验,养成了全局变量在开头、临时变量随用随定义的习惯,看来JavaScript有些不同

                 

                  var args = arguments, // 回调函数数组

                     i, // 遍历变量

                     length, // 回调函数数组长度

                     elem, // 单个回调函数

                     type, // elem类型

                     _fired; // 用于临时备份firedfired中存储了上下文和参数)

                 

                  // 如果已执行完成(即fired中保留了上下文和参数)

                  // 则备份上下文和参数到_fired,同时将fired置为0

                  if ( fired ) {

                     _fired = fired;

                     fired = 0;

                  }

                  // 添加arguments中的函数到回调函数数组

                  for ( i = 0, length = args.length; i < length; i++ ) {

                     elem = args[ i ];

                     type = jQuery.type( elem );

                     // 如果是数组,则递归调用

                     if ( type === "array" ) {

                         // 强制指定上下文为deferred,个人认为这里没必要指定上下文,因为默认的上下文即为deferred

                         deferred.done.apply( deferred, elem );

                     } else if ( type === "function" ) {

                         callbacks.push( elem );

                     }

                  }

                  // 如果已执行(_fired表示Deferred的状态是确定的),则立即执行新添加的函数

                  // 使用之前指定的上下文context和参数args

                  if ( _fired ) {

                     deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );

                  }

              }

              return this;

           },

 

           // resolve with given context and args

           // 执行,使用指定的上下文和参数

           resolveWith: function( context, args ) {

              // 满足以下全部条件,才会执行:没有取消  没有正在执行 没有执行完成

              // 如果已取消 已执行完成 正在执行,则忽略本次调用

              if ( !cancelled && !fired && !firing ) {

                  // make sure args are available (#8421)

                  // 确保args可用,一个避免nullundefined造成ReferenceError的常见技巧

                  args = args || [];

                  // 执行过程中将firing改为1

                  firing = 1;

                  try {

                     // 遍历动态数组的技巧

                     while( callbacks[ 0 ] ) {

                         // 注意这里使用指定的context,而不是this

                         callbacks.shift().apply( context, args );

                     }

                  }

                  // JavaScript支持try/catch/finally

                  finally {

                     fired = [ context, args ];

                     firing = 0;

                  }

              }

              return this;

           },

 

           // resolve with this as context and given arguments

           // 把状态设置为Resolved

           // 设置的理解不准确,因为是否Resolved,是调用isResolved判断firingfired的状态得到的。

           // 可以理解为执行

           resolve: function() {

              deferred.resolveWith( this, arguments );

              return this;

           },

 

           // Has this deferred been resolved?

           // 是否已执行(或解决)?

           // 在执行或已执行完毕,都认为已执行/解决

           // “可能不准确,因为执行过程中也认为是已执行

           isResolved: function() {

              // 正在运行中

              //

              // 已运行完(即fired不为空/0

              return !!( firing || fired );

           },

 

           // Cancel

           // 取消异步队列

           // 设置标记位,清空函数队列

           cancel: function() {

              cancelled = 1;

              callbacks = [];

              return this;

           }

       };

 

    return deferred;

}

5.4        jQuery.Deferred

// Full fledged deferred (two callbacks list)

// 创建一个完整的异步队列(包含两个回调函数数组)

// 异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected)。

// 执行哪些回调函数依赖于状态。

// 状态变为成功(resolved)或失败(rejected)后,将保持不变。

Deferred: function( func ) {

    // _Deferred本无成功状态或失败状态,有四种状态:初始化、执行中、执行完毕、已取消

    // 为了代码复用, 内部先实现了一个_Deferred

    // failDeferred通过闭包引用

    var deferred = jQuery._Deferred(),

       failDeferred = jQuery._Deferred(),

       promise;

    // Add errorDeferred methods, then and promise

    jQuery.extend( deferred, {

       // 增加成功回调函数和失败回调函数到各自的队列中

       // 便捷方法,两个参数可以是数组或null

       // 状态为成功(resolved)时立即调用成功回调函数

       // 状态为失败(rejected)时立即调用失败回调函数

       then: function( doneCallbacks, failCallbacks ) {

           // 上下文在这里有切换:虽然done返回的是deferred,但是fail指向failDeferred.done,执行fail是上下文变为failDeferred

           // 简单点说就是:

           // 调用done时向deferred添加回调函数doneCallbacks

           // 调用fail时向failDeferred添加回调函数failCallbacks

      

           // 因此这行表达式执行完后,返回的是failDeferred

           deferred.done( doneCallbacks ).fail( failCallbacks );

           // 强制返回deferred

           return this;

       },

       // 注册一个callback函数,无论是resolved或者rejected都会被 调用。

       // 其实,是把传入的函数(数组),同时添加到deferredfailDeferred

       // 并没有像我想象的那样,存到单独的函数数组中

       always: function() {

           // done的上下文设置为deferredfail的上下文设置为this

           // donefail的上下文不一致吗?一致!在这里this等于deferred

          

           // 但是这里如此设置上下文应该该如何解释呢?与then的实现有什么不一样呢?

          

           // fail指向fail指向failDeferred.done,默认上下文是failDeferredfailDeferred的回调函数数组callbacks是通过闭包引用的,

           // 这里虽然将failDeferred.done方法的上下文设置为deferred,但是不影响failDeferred.done的执行,

           // failDeferred.done的最后将this替换为deferred,实现链式调用,

           // 即调用过程中没有丢失上下文this,可以继续链式调用其他的方法而不会导致this混乱

          

           // 从语法上,always要达到的效果与then要达到的效果一致

           // 因此,这行代码可以改写为两行(类似then的实现方式),效果是等价的:

           // deferred.done( arguments ).fail( arguments );

           // returnr this;

           return deferred.done.apply( deferred, arguments ).fail.apply( this, arguments );

       },

       // 增加失败回调函数

       // 状态为失败(rejected)时立即调用

       fail: failDeferred.done,

       // 使用指定的上下文和参数执行失败回调函数队列

       // 通过调用failDeferred.rejectWith()实现

       rejectWith: failDeferred.resolveWith,

       // 调用失败回调函数队列

       // 通过调用failDeferred.resolve()实现

       reject: failDeferred.resolve,

       // 判断状态是否为成功(resolved

       isRejected: failDeferred.isResolved,

      

       // 每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数,并将过滤函数的返回值作为回调函数的参数

       // 最终返回一个只读视图(调用promise实现)

       // fnDone在状态是否为成功(resolved)时被调用

       // fnFail在状态是否为失败(rejected)时被调用

      

       // 关于其他的解释:

       // 1. 有的文章翻译为管道机制,从字面无法理解要表达什么含义,因此至少是不准确

       // 2. 错误理解:所谓的pipe,只是把传入的fnDonefnFail放到了成功队列和失败队列的数组头部

       pipe: function( fnDone, fnFail ) {

           return jQuery.Deferred(function( newDefer ) {

              jQuery.each( {

                  done: [ fnDone, "resolve" ], // done在后文中会指向deferred.done

                  fail: [ fnFail, "reject" ]

              }, function( handler, data ) {

                  var fn = data[ 0 ],

                     action = data[ 1 ],

                     returned;

                  if ( jQuery.isFunction( fn ) ) {

                     deferred[ handler ](function() {

                         returned = fn.apply( this, arguments );

                         if ( returned && jQuery.isFunction( returned.promise ) ) {

                            returned.promise().then( newDefer.resolve, newDefer.reject );

                         } else {

                            newDefer[ action ]( returned );

                         }

                     });

                  } else {

                     deferred[ handler ]( newDefer[ action ] );

                  }

              });

           }).promise();

       },

       // Get a promise for this deferred

       // If obj is provided, the promise aspect is added to the object

      

       // 返回的是一个不完整的Deferred的接口,没有resolvereject,即不能 修改Deferred对象的状态,

       // 这是为了不让外部函数提早触发回调函数,可以看作是一种只读视图。

       //

       // 比如$.ajax1.5版本后不再返回XMLHttpRequest,而是返回一个封装了 XMLHttpRequestDeferred对象接口的object

       // 其中Deferred部分就是promise()得到 的,这样不让外部函数调用resolvereject,防止在ajax完成前触发回调函数。

       // 把这两个函数的调用权限保留给ajax内部。

       promise: function( obj ) {

           if ( obj == null ) {

              // 实际只会执行一次promise,第一次执行的结果被存储在promise变量中

              if ( promise ) {

                  return promise;

              }

              promise = obj = {};

           }

           var i = promiseMethods.length;

           // 又一种循环遍历方式

           // 我习惯用:

           // for( i = 0; i < len; i++ ) for( i = len-1; i >=0; i-- ) for( i = len; i--; )

           // jQuery真是遍地是宝!

           while( i-- ) {

              obj[ promiseMethods[i] ] = deferred[ promiseMethods[i] ];

           }

           return obj;

       }

    });

    // Make sure only one callback list will be used

    // 成功队列执行完成后,会执行失败带列的取消方法

    // 失败队列执行完成后,会执行成功队列的取消方法

    // 确保只有一个函数队列会被执行,即要么执行成功队列,要么执行失败队列;

    // 即状态只能是或成功、或失败,无交叉调用

    // deferredfailDeferredcanceled属性,只能通过闭包引用,因此不用担心状态、上下文的混乱

    deferred.done( failDeferred.cancel ).fail( deferred.cancel );

    // Unexpose cancel

    // 隐藏cancel接口,即无法从外部取消成功函数队列

    delete deferred.cancel;

    // Call given func if any

    // 执行传入的func函数

    if ( func ) {

       func.call( deferred, deferred );

    }

    return deferred;

}

5.5        jQuery.when

// Deferred helper

// 异步队列工具函数

// firstParam:一个或多个Deferred对象或JavaScript普通对象

when: function( firstParam ) {

    var args = arguments,

       i = 0,

       length = args.length,

       count = length,

       // 如果arguments.length等于1,并且firstParamDeferred,则deferred=firstParam

       // 否则创建一个新的Deferred对象(如果arguments.length等于0或大于1,则创建一个新的Deferred对象)

       // 通过jQuery.isFunction( firstParam.promise )简单的判断是否是Deferred对象

       deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?

           firstParam :

           jQuery.Deferred();

    // 构造成功(resolve)回调函数

    function resolveFunc( i ) {

       return function( value ) {

           // 如果传入的参数大于一个,则将传入的参数转换为真正的数组(arguments没有slice方法,借鸡生蛋)

           args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;

           if ( !( --count ) ) {

              // Strange bug in FF4:

              // Values changed onto the arguments object sometimes end up as undefined values

              // outside the $.when method. Cloning the object into a fresh array solves the issue

              // 执行成功回调函数队列,上下文强制为传入的第一个Deferred对象

              deferred.resolveWith( deferred, sliceDeferred.call( args, 0 ) );

           }

       };

    }

    // 如果参数多于一个

    if ( length > 1 ) {

       for( ; i < length; i++ ) {

           // 简单的判断是否是Deferred对象,是则调用.promise().then(),否则忽略

           if ( args[ i ] && jQuery.isFunction( args[ i ].promise ) ) {

              // 增加成功回调函数和失败回调函数到各自的队列中

              args[ i ].promise().then( resolveFunc(i), deferred.reject );

           } else {

              // 计数器,表示发现不是Deferred对象,而是普通JavaScript对象

              --count;

           }

       }

       // 计数器为0时,表示传入的参数都不是Deferred对象

       // 执行成功回调函数队列,上下文强制为传入的第一个Deferred对象

       if ( !count ) {

           deferred.resolveWith( deferred, args );

       }

    // deferred !== firstParam,即deferred为新创建的Deferred对象

    // length == 0

    } else if ( deferred !== firstParam ) {

       // 执行成功回调函数队列,上下文强制为新创建的Deferred对象

      

       deferred.resolveWith( deferred, length ? [ firstParam ] : [] );

    }

    // 返回传入的第一个Deferred或新创建的Deferred对象的只读视图

    return deferred.promise();

}

 


 


5.6        Deferred应用

l  jQuery.ajax()

    n  TODO

5.7        可以学习的技巧

l  闭包

 

function a(){

    var guid = 1;

    return function(){

        return guid++;

    }

}

 

var defer = a();

 

console.info( defer() ); // 1

console.info( defer() ); // 2

console.info( defer() ); // 3

console.info( defer() ); // 4

l  避免nullundefined造成ReferenceError的常见技巧

args = args || [];

l  遍历动态数组的技巧

while( callbacks[ 0 ] ) {

    callbacks.shift().apply( context, args );

}

l  try/catch/finally 实现错误处理

语法

说明

try {

    // tryStatements

} catch( exception ) {

    // catchStatements

} finally {

    // finallyStatements

}

tryStatements

必选项。

可能发生错误的语句。

exception

必选项。任何变量名。

exception 的初始化值是扔出的错误的值。

catchStatements

可选项。

处理在相关联的 tryStatement 中发生的错误的语句。

finallyStatements

可选项。

在所有其他过程发生之后无条件执行的语句。

l  链式对象:通过返回this实现链式调用

方法

返回值

done

this(即deferred

resolveWith

this(即deferred

resolve

this(即deferred

cancel

this(即deferred

l  代码复用 $.each

jQuery.each( {

    done: [ fnDone, "resolve" ], // done在后文中会指向deferred.done

    fail: [ fnFail, "reject" ]

}, function( handler, data ) {

    // 公共代码复用

});

5.8        后续

l  DeferredjQuery中的应用

l  Deferred的自定义应用

3
1
分享到:
评论
7 楼 zzy7186 2013-10-09  
谢了 学习了  很详细啊 不知道作者的书什么时候出版啊
6 楼 cbhjatarj 2012-12-15  
mu0001 写道
好晕啊,水平不够

5 楼 mu0001 2012-10-29  
好晕啊,水平不够
4 楼 nuysoft 2012-03-31  
王向众 写道
看得一塌糊涂啊。。。

耐心的看吧,jQuery值得投入精力去研究
3 楼 nuysoft 2012-03-31  
王向众 写道
看得一塌糊涂啊。。。

后边多的是,哈哈
2 楼 王向众 2012-03-30  
看得一塌糊涂啊。。。
1 楼 晨曦的朝阳 2011-10-29  
这一节确实有难度,断断续续看了好多遍,总算明白了一些,设计得确实很精妙。

相关推荐

    jQuery源码分析系列.pdf

    - **异步队列Deferred**:探讨jQuery中用于处理异步操作的`Deferred`对象,解释其工作原理和如何实现链式调用。 - **队列Queue**:讲解队列在jQuery动画和AJAX请求中的作用,以及如何管理和控制队列中的任务执行...

    jQuery源码分析

    jQuery源码分析 00 前言开光 01 总体架构 03 构造jQuery对象-源码结构和核心函数 ...05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤器和请求分发器

    谈谈jQuery之Deferred源码剖析

    ### jQuery之Deferred源码剖析知识点 #### 一、Deferred和Promise简介 jQuery的Deferred对象是jQuery在ES6的Promise概念出现之前的一种实现,它允许开发者将异步操作的结果通过链式调用的方式处理,避免了传统的...

    jQuery源码分析(1.7)

    #### 五、异步队列Deferred 1. **概念**:`Deferred`对象是jQuery提供的一个用于处理异步操作的工具,可以解决异步操作中的多个回调问题。 2. **核心方法**: - `resolve()`:表示异步操作成功完成。 - `reject...

    JQuery API 1.6-8

    - 异步队列(Deferred):jQuery 1.7引入了 Deferred 对象,用于更好地处理异步操作,如Ajax请求。 - .on() 和 .off() 方法:取代了早期的 `.bind()`, `.unbind()`, `.delegate()`, `.undelegate()`,提供更灵活的...

    jQuery AJAX 扩展 ----自动放弃及 队列实现

    本主题将深入探讨jQuery中的AJAX扩展,特别是关于自动放弃(Abandonment)和队列(Queue)的实现,这些特性对于优化异步请求管理和资源利用率至关重要。 **一、jQuery AJAX 基础** 在jQuery中,`$.ajax()`函数是...

    jQuery源码分析系列

    4. 异步队列Deferred:这部分介绍jQuery中的异步编程机制,包括jQuery.Deferred对象的使用和它在处理AJAX请求、事件绑定等异步操作中的作用。 5. 队列Queue:用于管理事件处理和动画队列。这展示了jQuery如何使用...

    jQuery源码分析-01总体架构分析

    3. 异步队列(Deferred):管理异步操作,允许注册回调函数以便在操作完成时触发。 4. 浏览器测试(Support):用于检测浏览器的兼容性,提供一系列检查方法,确保代码能够在不同的环境中正确运行。 5. 数据缓存...

    jQuery源码分析之Callbacks详解

    Deferred是jQuery中用于简化异步编程的工具,它通过Callbacks来维护回调函数队列,从而使得复杂的异步流程能以更加直观的方式编写。Queue则是jQuery中处理同步队列的系统,通过Callbacks来驱动动画效果,使得动画的...

    jQuery 源码分析笔记(3) Deferred机制

    Deferred把回调函数注册到一个队列中,统一管理,并且可以同步或者异步地调用这些函数。jQuery.Deferred()用来构造一个Deferred对象。该对象有状态值,共有三种: Rejected, Resolved和初始状态。其中Resolved表示该...

    jQuery源码分析系列_1.6

    #### 五、异步队列Deferred 1. **简介**:`Deferred`对象是jQuery中处理异步操作的关键,它可以跟踪异步操作的状态(pending、resolved或rejected),并且可以在状态改变时执行相应的回调函数。 2. **使用场景**:`...

    jquery1.83 之前所有与异步列队相关的模块详细介绍

    jQuery中的Deferred对象能够以链式调用的方式组织回调函数,使得多个异步操作可以形成一个有序的队列。 Deferred对象的另一个重要特性是支持promise机制。Promise是一种设计模式,它允许你为异步操作的成功或失败...

    JQUERY技术内幕:深入解析QUERY架构设计与实现原理 完整版 共两个包

    接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    资源名称:jQuery技术内幕:深入解析jQuery架构设计与...接着详细分析了底层支持模块的源码实现,包括:选择器 Sizzle、异步队列 Deferred、数据缓存 Data、资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    jQuery1-8-2.js和jqueryAPI

    - **$.Callbacks()**:创建可配置的回调函数队列,增强了异步处理。 - **$.Deferred()**:改进了Promise对象,支持链式操作,便于异步编程。 - **$.parseJSON()**:安全地解析JSON字符串,防止跨站脚本攻击。 **4. ...

    jquery技术内幕:深入解析jquery架构设计与实现原理 完整版第二个包

    接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...

Global site tag (gtag.js) - Google Analytics