jQuery 2.0.3 源码分析 Deferred概念

时间:2022-09-13 09:05:48

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

举一个例子会有助于理解

我做的是phonegap项目,所以涉及到的异步处理就别特多:

1. 常见的setTimeout

2. 与底层代码通信,调用插件cordova.exec

3. postmessage与iframe通信

4. CSS3 动画

5. Ajax

6. HTML5的本地数据

等等…

我就拿HTML5 Web Database为例:

数据库

jQuery 2.0.3 源码分析 Deferred概念

查询语句

//数据库链接对象
config.db = window.openDatabase(config.dbName, "1.0", "Xxtebook Database", config.dbSize); config.db.transaction(function(tx) {
tx.executeSql(

'SELECT * FROM Novel'

, [], function(tx, results) {
result = results.rows;
console.log('result',result) //
});
}, function(){}, function(){});

就这段代码其实本身是没问题的,但是这里至少要涉及到异步方面的考虑:

javaScript要求在与服务器进行交互时要用异步通信,如同AJAX一样,因为是异步模型,所以在调用transaction游览器提供的本地数据接口时候类似AJAX(这里我是假设),浏览器自己有内部的XHR方法异步处理,但是此时的JS代码还是会同步往下执行,其实就是无阻塞的代码

问题:因为无无阻塞,代码在发送AJAX这个请求后会继续执行,那么后续的操作如果依赖这个数据就会出错了,所以这里就需要等待AJAX返回,才能执行后续操作

我们换个更简单 伪代码

alert(1)
setTimeout(function(){
alert(2)
},0)
alert(3)
//alert(1)
//alert(3)
//alert(2)

代码都能看懂,因为异步而导致流程不正确

或者说我们的应用在某个程度上依赖第三方api的数据,那么就会面临一个共同的问题:

我们无法获悉一个API响应的延迟时间,应用程序的其他部分可能会被阻塞,直到它返回 结果。Deferreds 对这个问题提供了一个更好的解决方案,它是非阻塞的,并且与代码完全解耦 。

当然异步操作也可以提供一个类似成功回调,失败回调的通知接口

JS是单线程语言,就简单性而言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题。
另一方面,他也暴露了应用开发中的一个严重问题,单线程环境看起来对用户请求响应迅速,但是当线程忙于处理其它事情时,就不能对用户的鼠标点击和键盘操作做出响应。

What's The Point Of Promises?

http://www.kendoui.com/blogs/teamblog/posts/13-03-28/what-is-the-point-of-promises.aspx

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

大多情况下,promise作为一个模型,提供了一个在软件工程中描述延时(或将来)概念的解决方案。

它背后的思想我们已经介绍过:不是执行一个方法然后阻塞应用程序等待结果返回,而是返回一个promise对象来满足未来值。

这样看来,Promise/A只是一种规范,Deferred可以看作这种规范的具体实现

画了一个很简短的图,大家略过一下,后面有很详细的流程图

jQuery 2.0.3 源码分析 Deferred概念

我们先看看规范如何定义的:

Promise/A提议’定义了一个’then‘方法来注册回调,当处理函数返回结果时回调会执行。它返回一个promise的伪代码看起来是这样的:

promise = function create(
//数据库链接对象
config.db = window.openDatabase(config.dbName, "1.0", "Xxtebook Database", config.dbSize); config.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM Novel', [], function(tx, results) {
result = results.rows;
console.log('result',result) //
});
}, function(){}, function(){});
); promise.then(function( futureValue ) { });
promise.then(function( futureValue ) { });

promise回调会在处于以下两种不同的状态下执行:

  • resolved:在这种情况下,数据是可用
  • rejected:在这种情况下,出现了错误,没有可用的值

'then'方法接受两个参数:一个用于promise得到了解决(resolved),另一个用于promise拒绝(rejected)。让我们回到伪代码

promise.then( function( futureValue ) {
//成功
} , function() {
//失败
} );

在某些情况下,我们需要获得多个返回结果后,再继续执行应用程序(例如,在用户可以选择他们感兴趣的选项前,显示一组动态的选项)。这种情况下,'when'方法可以用来解决所有的promise都满足后才能继续执行的场景。

when(
promise1,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
//当所有的异步对象都准备完毕后,才执行
});

我们在模拟一个场景

如果同时执行多个动画的时候,我们就需要对每一个动画执行完毕后的处理下一个动作,意味着我们就要监听所有动画的执行完毕后的回调

使用promise和‘when’方式却可以很直截了当的表示: 一旦动画执行完成,就可以执行下一步任务。最终的结果是我们可以可以简单的用一个回调来解决多个动画执行结果的等待问题

when( function(){
//执行动画1
return promise
}, function(){
//执行动画2
return promise 2
} ).then(function(){
//当2个动画完成后,我们在自行后续的代码
});

基本上可以用非阻塞的逻辑方式编写代码并异步执行。 而不是直接将回调传递给函数,这可能会导致紧耦合的接口,通过promise模式可以很容易区分同步和异步的概念。

根据这个规范,我们看看JQ是如何实现的?


Deferred Object :http://api.jquery.com/category/deferred-object/

由于1.7版本后回调函数Callbacks从Deferred中抽离出去了,所以在此之前还需要了解下 回调函数-callback

本文主要是涉及源码的实现

我们先对API有个整体的认识

jQuery.Deferred()

一个构造函数,返回一个链式实用对象方法来注册多个回调,回调队列, 调用回调队列,并转达任何同步或异步函数的成功或失败状态。

deferred.always()

当Deferred(延迟)对象解决或拒绝时,调用添加处理程序

deferred.done()

当Deferred(延迟)对象解决时,调用添加处理程序

deferred.fail()

当Deferred(延迟)对象拒绝时,调用添加处理程序。

deferred.isRejected()

确定一个Deferred(延迟)对象是否已被拒绝。

deferred.isResolved()

确定一个Deferred(延迟)对象是否已被解决。

deferred.notify()

根据给定的 args参数 调用Deferred(延迟)对象上进行中的回调 (progressCallbacks)

deferred.notifyWith()

根据给定的上下文(context)和args递延调用Deferred(延迟)对象上进行中的回调(progressCallbacks )

deferred.pipe()

实用的方法来过滤 and/or 链Deferreds。

deferred.progress()

当Deferred(延迟)对象生成进度通知时,调用添加处理程

deferred.promise()

返回Deferred(延迟)的Promise(承诺)对象。

deferred.reject()

拒绝Deferred(延迟)对象,并根据给定的args参数调用任何失败回调函数(failCallbacks)

deferred.rejectWith()

拒绝Deferred(延迟)对象,并根据给定的 context和args参数调用任何失败回调函数(failCallbacks)。

deferred.resolve()

解决Deferred(延迟)对象,并根据给定的args参数调用任何完成回调函数(doneCallbacks)

deferred.resolveWith()

解决Deferred(延迟)对象,并根据给定的 context和args参数调用任何完成回调函数(doneCallbacks)

deferred.state()

确定一个Deferred(延迟)对象的当前状态

deferred.then()

当Deferred(延迟)对象解决,拒绝或仍在进行中时,调用添加处理程序。

jQuery.when()

提供一种方法来执行一个或多个对象的回调函数, Deferred(延迟)对象通常表示异步事件。

.promise()

返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成

构建一个异步对象:

我们传统的写法

function aaa(callback){
setTimeout(function(){
callback( 5 );
},1000);
} function done(value){
alert(value)
} aaa(function(value){
done(value);
})

换成JQuery的写法

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

  setTimeout(function(){
defer.resolve( 5 );
},1000); var filtered = defer.then(function( value ) {
return value * 2;
}); filtered.done(function( value ) {
console.log('打印出值',value)
});

通过对比我们还是能感觉到很大的不同:

传统的代码逻辑,通过嵌套回调函数,等待异步发送成功的通知后,在执行下一步操作,如果有大量的嵌套回调,耦合度,维护性,扩展性?

那么Deferred对象存在的意义在哪里?

从我角度来说,对于开发者

1:代码可读性,扁平化结构

2:让支离破碎的代码结构,继续保存线性的代码逻辑,也就是异步代码转为同步

3: 从抽线的角度,提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 “promise” 对象,其目的是在未来某个时间点返回一个响应。

deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞式函数它们是异步的,而不是阻塞应用程序等待其完成然后返回结果。 deferred对 象会立即返回,然后你可以把回调函数绑定到deferred对象上,它们会在异步处理完成后被调用。

所以,总的来讲Deferred通过一组 API 来规范化异步操作,这样也能够让异步操作的流程控制更加容易

下章就是具体的源码分析了,会有附带流程图及源码的分析

类似的异步库可以参考

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

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

基本都大同小异

jQuery 2.0.3 源码分析 Deferred概念的更多相关文章

  1. jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...

  2. jQuery 2.0.3 源码分析 Deferrred概念

    转载http://www.cnblogs.com/aaronjs/p/3348569.html JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而 ...

  3. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  4. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

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

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  6. jQuery 2.0.3 源码分析 事件体系结构

    那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支 ...

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

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...

  8. jQuery 2.0.3 源码分析Sizzle引擎 - 编译函数(大篇幅)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这 ...

  9. jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkb ...

随机推荐

  1. Masonry 当需要把某个控件进行隐藏的时候有警告的解决方案

    //查看全文 [self.moreBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo (self.conten ...

  2. mysql 按距离今日时间最近排序

    xxx order by abs(DATEDIFF(time_start,now()))

  3. js中接口的声明与实现

    实现接口,必须实现接口里的所有方法. function Interface(name,fns){//声明一个接口类            this.name = name;            th ...

  4. Hadoop概念学习系列之例子形象再谈Client、NameNode、元数据(三十一)

    Client相当于是送货人或提货人. NameNode相当于是仓库管理员. 元数据相当于是账本清单.

  5. iOS开发关于AppStore程序的上传流程

    主要内容: 1.创建唯一标示符App ID(前提是你的程序在真机上测试没有任何问题) 2.申请发布证书 3.申请发布描述文件 4.iTunes Connect创建App并填写信息 5.选择证书编译打包 ...

  6. HDU ACM 1098 Ignatius's puzzle

    分析:裴蜀定理,a,b互质的充要条件是存在整数x,y使ax+by=1.存在整数x,y,使得ax+by=c.那么c就是a,b的公约数. 如果存在数a ,由于对随意x方程都成立.则有当x=1时f(x)=1 ...

  7. 电脑自动重启(Kernel-Power 41 (63) error)的一些解决办法

    查看是否有两个声卡驱动,如果有,尝试关闭其中一个. 可能是内存的问题,用memtest测试.如果有多于一个内存条,仅使用其中的一个试试. 更改电源设置,使机器工作在低耗状态. 更新所有驱动,尤其是主板 ...

  8. Spring Cloud 2.x-前言

    Spring Cloud Spring Boot  简介 模块介绍 文章列表 简介 微服务已经成为企业开发的标配,阿里的Dubbo已经被企业大规模使用,Spring Cloud作为后起之秀,同时也是 ...

  9. 惨痛第十届蓝桥杯总结(附录蓝桥省赛知识点总结)-C++ B组

    虽然目前距离蓝桥省赛仅仅过去一天但昨天下午和大神对答案的感觉依旧..... 现在深刻里理解到了为啥大神老是说咱们蓝桥叫 阅读理解杯(现在我非常认同这种说法啊...) 虽然第一次参加,赛前紧张提前30分 ...

  10. js 各种事件 如:点击事件、失去焦点、键盘事件等

    事件驱动:        我们点击按钮 按钮去掉用相应的方法.                demo:             <input type="button" v ...