热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery异步框架探究1:jQuery._Deferred方法

jQuery异步框架应用于jQuery数据缓存模块、jQueryajax模块、jQuery事件绑定模块等多个模块,是jQuery的基础功能之一。实际上jQuery实现的异步回调机制可以看做java
jQuery异步框架应用于jQuery数据缓存模块、jQuery ajax模块、jQuery事件绑定模块等多个模块,是jQuery的基础功能之一。实际上jQuery实现的异步回调机制可以看做java nio(不是aio)的近似,所以需要从更抽象层面的"异步回调"的视角分析解读该模块。这个部分与dom功能关系不大,是独立部分,可以看作是jQuery工具系列之一。

与异步框架相关的方法定义于jQuery类的静态方法中。只有三个方法,但是功能和应用及其强大!本篇详细讲解第一个方法jQuery._Deferred()。


_Deferred: function() {
var // callbacks list
callbacks = [],
// stored [ context , args ]
fired,
// to avoid firing when already doing so
firing,
// flag to know if the deferred has been cancelled
cancelled,
// the deferred itself
deferred = {

// done( f1, f2, ...)
done: function() {
if ( !cancelled ) {
var args = arguments,
i,
length,
elem,
type,
_fired;
if ( fired ) {
_fired = fired;
fired = 0;
}
for ( i = 0, length = args.length; i elem = args[ i ];
type = jQuery.type( elem );
if ( type === "array" ) {
deferred.done.apply( deferred, elem );
} else if ( type === "function" ) {
callbacks.push( elem );
}
}
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 = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );
}
}
finally {
fired = [ context, args ];
firing = 0;
}
}
return this;
},

// resolve with this as context and given arguments
resolve: function() {
deferred.resolveWith( this, arguments );
return this;
},

// Has this deferred been resolved?
isResolved: function() {
return !!( firing || fired );
},

// Cancel
cancel: function() {
cancelled = 1;
callbacks = [];
return this;
}
};

return deferred;
},

这是jQuery异步框架最基础的一个函数,真正对外暴露的Deferred函数依赖该函数的实现,从其名字可以看出,jQuery的设计者并不想使用者直接调用该方法,虽然这个方法已经很灵活已经可以应用到很多场景了,而且Javascript语言也没有语言层面上的机制阻止用户真的调用该方法。

分析其内部实现可以发现该函数设计为在被调用时并不需要传入任何参数,而是直接调用后得到一个异步对象:var deferred = jQuery._Deferred()。重点是这个返回的异步对象,这个对象有五个方法:done、resolveWith、resolve、isResolved、cancel,每个方法都值得深入分析。当然_Deferred函数里面还有四个变量:callbacks、fired、firing、cancelled,这四个变量也值得深入分析。

1 done方法


这个方法的实现是把传入的参数push到callbacks空数组中,以便后续resolveWith方法使用callbacks数组中的函数。

这个方法的参数只接受两种类型:要么是函数,要么是函数数组,其他类型不被处理。且传入函数数组时递归调用done方法自身继续把数组中的函数元素push到callbacks数组中。

配合resolveWith方法可以知道done方法的主要功能是存储将要执行的函数集合,resolveWith方法的功能是在指定的对象上根据指定的参数对象依次调用这个函数集合。因此,callbacks函数集合相当于是回调处理器集合,fired = [ context, args ]相当于是调用对象(包括其参数)。这样分离后带来的灵活性是惊人的--异步处理框架即将成型。顺便说一下,这个方法的名字done非常的不友好,对于熟悉回调模式的朋友们来说,其实这个方法名应该是addHandlers或者addCallbacks,甚至返回对象deferred(延迟)的名字都不如asynchor来得直观。

这个方法最后返回this关键字,即deferred对象自身,这样做的好处是可以链式多次调用,比如jQuery._Deferred().done(f1,f2).done([f3,f4,f5]),如果deferred对象的其他方法也这么干的话,那么也可以链式调用其他方法,而其他方法正是这么干的。

关于_fired变量和相关代码的作用在分析完resolveWith方法之后再看才会明朗。

2 resolveWith方法


resolveWith方法的实现是迭代回调函数集合callbacks中的函数于指定对象context和参数args之上执行--如果callbacks不为空的话,并且最后总是把指定对象context和参数args存入fired变量中--有可能还没有执行回调,如果callbacks为空。

resolveWith方法先判断回调函数集合callbacks是否有值"callbacks[ 0 ]",没有的话什么也不触发。

resolveWith方法最核心的是这一行:callbacks.shift().apply( context, args )。除了从回调函数集合callbacks中取出第一个函数元素调用外它还移除了这个元素,改变了callbacks数组,这样保证回调函数集合callbacks中的每个元素仅能执行唯一一次。

对于军事迷来说,有一个模型与这里的_Deferred函数极为类似,几乎再也找不到更贴切的类比了--手枪。
纵观_Deferred函数,回调函数数组callbacks相当于弹夹;
传递给done方法的函数参数相当于将要存储于弹夹的子弹,done方法主要职责是提供"压弹入夹"操作;
传递给resolveWith方法的参数( context, args )相当于手枪,resolveWith方法主要职责是执行"开枪"操作;
fired变量相当于枪套,存储传递给resolveWith方法的手枪[ context, args ];

现在回过头再看done方法,done方法是与resolveWith配合使用的,一般情况下既可以先上弹后开枪--先调用done方法后调用resolveWith方法,这种场景下手枪存在前就已经备有子弹了,因此直接在调用resolveWith方法时触发"开枪"操作;但是也可以先备枪后上弹射击--先调用resolveWith方法后调用done方法,这种场景在传递手枪的时候还没有子弹,提供子弹后才去触发射击动作--done方法内部调用resolveWith方法:

if ( fired ) {
_fired = fired;
fired = 0;
}
// ......
if ( _fired ) {
deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
}


除了前面两种操作外还有一种特殊操作:上弹-->开枪-->再上弹开枪(先调用done方法再调用resolveWith方法后再调用done方法),这个时候done方法装上新弹(传入新的函数参数push到回调函数数组)后可重复开枪(继续内部调用resolveWith方法),如果不换上新弹(不传入新的函数参数)就不能重复开枪(原回调函数数组经过resolveWith方法调用一次后已清空,它不可重复使用),这个操作时序完美的模拟手枪空仓挂机复位射击功能(子弹打光时阻止套筒回位,更换弹夹后可快速推弹入膛)!

这行代码"fired = 0;"的作用非常重要,正因为有这行代码才可以在done方法调用resolveWith方法重复开枪时生效(因为resolveWith方法内的第二个判断条件"if ( !cancelled && !fired && !firing )",我们前面说过fired变量表示枪套,怎么理解呢?关于枪套变量fired也需要重点解释,参见下面详细解释fired的部分。

我们再来看一个扩展的操作:jQuery._Deferred().done(f1,f2).resolveWith(context1, args1).done(f3).done([f4]).done(f5,[f6,f7]),说明空仓挂机复位射击的确是可重复的!这个世界上应该没有哪位枪械师会设计不能重复使用或只能重复使用一次的手枪吧?

关于这两个方法总结一下针对同一把枪的使用方法:
jQuery._Deferred().done(f1,f2).resolveWith(context1, args1)--先上弹后造枪,击发一次。
jQuery._Deferred().resolveWith(context1, args1).done(f1,f2)--先造枪后上弹,击发一次。
jQuery._Deferred().done(f1,f2).resolveWith(context1, args1).done(f3,f4).done([f5,f6],f7)--先上弹后造枪射击一次,再空仓挂机复位射击两次(可重复更多次射击)。

关于这两个方法即使做了总结之后也并没有完,注意前面的一个提示性描述:针对同一把枪,我们已经知道同一把枪可以重复使用不同的子弹,但是如果想针对不同的枪使用相同的子弹呢?这个需求是合理的--成员国众多的北约内部,标准9mm巴拉姆弹可不是只能应用于沙漠之鹰。

"针对不同的枪"说明需要调用resolveWith方法至少两次,第一次调用resolveWith方法传入的参数(context1, args1)代表第一把枪,第二次传入的参数(context2, args2)代表第二把枪,我们看看会发生什么情况:"jQuery._Deferred().done(f1,f2).resolveWith(context1, args1).resolveWith(context2,args2);"很遗憾,这个调用会歇菜!还是因为枪套变量fired的原因。变通一下呢:"jQuery._Deferred().done(f1,f2).resolveWith(context1, args1).done(f3).resolveWith(context2, args2)",还是不行!同样因为枪套变量fired的原因,resolveWith方法能且仅能调用一次,它不像done一样可以链式调用多次。

除了因为枪套变量fired的原因外,即使排除这个原因,"不同的枪使用相同的子弹"也是不能实现的,枪对子弹是一对多的关系,子弹对枪却是一对一的关系,即回调函数数组中的每一颗子弹被一只手枪击发后并不能被另一只枪再次击发,真正合理的需求描述是"不同型号的枪支应该可以使用相同规格的子弹"。

所以结论是--jQuery._Deferred()不能针对相同的子弹使用不同的手枪,它每次上弹后就认为只能匹配给第一次传入的手枪(或者说第一次造枪后就只能使用这种型号的这只手枪),如果要使用不同的手枪怎么办呢?--多次调用jQuery._Deferred()方法即可。

3 枪套--变量fired


首先需要熟悉的一个基础知识点是:done方法和resolveWith方法操作的变量fired是在函数调用对象链上一级的调用对象中,其他三个变量都是如此,这意味着deferred对象的不同方法可以共同操作它们。

resolveWith方法内有一行判断语句:"if ( !cancelled && !fired && !firing )",这三个变量任何一个都可能导致不能"开枪",关于firing和cancelled参见下面详细分析,这里分析fired变量。如果这个枪套不是有枪才能执行开枪操作,或者简单说只有这个枪套是空的才能执行开枪(其实同时受firing和cancelled约束):枪套不空说明里面存储手枪了,手枪没取出来当然不能开枪--实际上即使此时传入新的手枪进来也不能使用(jQuery._Deferred()对象比较重感情,它只使用第一次接触到的手枪,这也充分说明第一次是多么的重要。)!resolveWith方法在finally块中赋值给变量:"fired = [ context, args ];",相当于使用结束后将手枪插入手枪套,

再看done方法对fired变量的操作:"if ( fired ) {_fired = fired;fired = 0;}",枪套中有枪时,把它取出来存入当前调用对象域中的临时变量_fired,此时一定要清空枪套!否则下面调用resolveWith方法会失效(resolveWith方法会先检查枪套情况)。

4 射击指示器--变量firing


这个变量相当于"射击指示器",作用是当前正在射击时(调用resolveWith方法并通过了条件判断)给手枪标记一个状态--"正在射击"的状态("firing = 1;"),这个状态下的手枪不能再次扣动扳机开枪(即不能再次调用resolveWith方法),除非当前这次射击结束(在finally块中清除这个状态"firing = 0;")。

如果用手枪上的部件来类比的话,有点儿像"扳机连杆突起",作用是一样的:击发前扳机连杆钩住阻铁可以执行当前射击,击发后扳机连杆脱钩阻铁,同时套筒在后座作用下通过"扳机连杆突起"强迫扳机连杆在射击过程中不能自动回位钩着阻铁,直到子弹击发出去后套筒复进到位本次射击结束才放开扳机连杆,这样就保证了射击过程中不会重复执行击发动作。当然并不是所有手枪都通过设计"扳机连杆突起"完成射击指示功能的。

这个变量在实际执行环境中应该过于严格了,除非Javascript执行器采用的是多线程执行环境并且不同线程对这个变量的访问可能出现race condition,否则我认为单线程环境下应该不需要这个变量(也可能是我理解有误)。

5 全能保险--变量cancelled和cancel方法


cancelled变量非常类似手枪上的"击发保险"+"弹夹防跌落保险",如果不是需要调用cancel方法显式设置的话,那么它也可以类似"击针保险",总之它是一个全能保险。
关闭保险之后("cancelled = 1;"),resolveWith方法无法开枪了(判断条件不通过),就像击发保险被锁死一样。
关闭保险之后("cancelled = 1;"),done方法无法压弹入匣了(判断条件不通过),就像弹夹扣被锁死一样。
调用cancel方法在关闭保险的同时也清空弹夹了("callbacks = [];")。
总之调用cancel方法之后整个系统都不好了,大部分地方都不能继续正常工作了。


6 resolve方法


这个方法调用resolveWith方法,不需多说。


7 isResolved方法


只要射击指示器firing亮着或者枪套fired里有枪就认为已resolved。

总之,如果你是一个对手枪模型工作原理十分清楚的军事迷,那么读懂jQuery._Deferred源码和原理几乎是天然的。jQuery._Deferred只是jQuery异步框架的第一个最基础的部分就已经展开如此多的篇幅了,但是因为它是jQuery异步框架的核心,也是后两个方法的基础,这种展开是值得的。


最后郑重申明一点:未经许可,严禁转载!尊重他人劳动成果是获得对等尊重的前提。



推荐阅读
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • Android自定义控件绘图篇之Paint函数大汇总
    本文介绍了Android自定义控件绘图篇中的Paint函数大汇总,包括重置画笔、设置颜色、设置透明度、设置样式、设置宽度、设置抗锯齿等功能。通过学习这些函数,可以更好地掌握Paint的用法。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • vue使用
    关键词: ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • JVM 学习总结(三)——对象存活判定算法的两种实现
    本文介绍了垃圾收集器在回收堆内存前确定对象存活的两种算法:引用计数算法和可达性分析算法。引用计数算法通过计数器判定对象是否存活,虽然简单高效,但无法解决循环引用的问题;可达性分析算法通过判断对象是否可达来确定存活对象,是主流的Java虚拟机内存管理算法。 ... [详细]
  • 在重复造轮子的情况下用ProxyServlet反向代理来减少工作量
    像不少公司内部不同团队都会自己研发自己工具产品,当各个产品逐渐成熟,到达了一定的发展瓶颈,同时每个产品都有着自己的入口,用户 ... [详细]
  • 开发笔记:计网局域网:NAT 是如何工作的?
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了计网-局域网:NAT是如何工作的?相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Java中包装类的设计原因以及操作方法
    本文主要介绍了Java中设计包装类的原因以及操作方法。在Java中,除了对象类型,还有八大基本类型,为了将基本类型转换成对象,Java引入了包装类。文章通过介绍包装类的定义和实现,解答了为什么需要包装类的问题,并提供了简单易用的操作方法。通过本文的学习,读者可以更好地理解和应用Java中的包装类。 ... [详细]
  • 文章目录题目:二叉搜索树中的两个节点被错误地交换。基本思想1:中序遍历题目:二叉搜索树中的两个节点被错误地交换。请在不改变其结构的情况下 ... [详细]
  • 1简介本文结合数字信号处理课程和Matlab程序设计课程的相关知识,给出了基于Matlab的音乐播放器的总体设计方案,介绍了播放器主要模块的功能,设计与实现方法.我们将该设 ... [详细]
author-avatar
义勇军2012
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有