JavaScript异步编程(2)- 先驱者:jsDeferred

2019年12月02日 阅读数:117
这篇文章主要向大家介绍JavaScript异步编程(2)- 先驱者:jsDeferred,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范。javascript

研究javascript的异步编程,jsDeferred也是有必要探索的:由于Promise/A+规范的制定基本上是奠基在jsDeferred上,它是javascript异步编程中里程碑式的做品。jsDeferred自身的实现也是很是有意思的。html

本文将探讨项目jsDeferred的模型,带咱们感觉一个不同的异步编程体验和实现。java

本文内容以下:git

  • jsDeferred和Promise/A+
  • jsDeferred的工做模型
  • jsDeferred API
  • 参考和引用

jsDeferred和Promise/A+

在上一篇文章《JavaScript异步编程(1)- ECMAScript 6的Promise对象》中,咱们讨论了ECMAScript 6的Promise对象,这一篇咱们来看javascript异步编程的先驱者——jsDeferred。github

jsDeferred是日本javascript高手geek cho45受MochiKit.Async.Deferred模块启发在2007年开发(07年就在玩这个了…)的一个异步执行类库。咱们将jsDeferred的原型和Promise/A+规范译文戳这里)进行对比(来自^_^肥仔John的《JS魔法堂:jsDeferred源码剖析》):web

Promise/A+

  • Promise是基于状态的
  • 状态标识:pending(初始状态)、fulfilled(成功状态)和rejected(失败状态)。
  • 状态为单方向移动“pending->fulfilled”,”pending->rejected”。
  • 因为存在状态标识,因此支持晚事件处理的晚绑定。

jsDeferred

  • jsDeferred是基于事件的,并无状态标识
  • 实例的成功/失败事件是基于事件触发而被调用
  • 由于没有状态标识,因此能够屡次触发成功/失败事件
  • 不支持晚绑定

jsDeferred的工做模型

下面一张图粗略演示了jsDeferred的工做模型。ajax

下面涉及到jsDeferred的源码,对于第一次接触的童鞋请直接拉到API一节(下一节),读完了API再来看这里。编程

jsDeferred第一次调用next有着不一样的处理,jsDeferred在第一次调用next()的时候,会当即异步执行这个回调函数——而这个挂起异步,则视当前的环境(如浏览器最佳环境)选择最优的异步挂起方案,例如现代浏览器下会经过建立Image对象的方式来进行异步挂起,摘录源码以下:segmentfault

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Deferred.next_faster_way_Image = (( typeof window === 'object' ) && ( typeof (Image) != "undefined" ) && !window.opera && document.addEventListener) && function (fun) {
     // Modern Browsers
     var d = new Deferred();
     var img = new Image();
     var handler = function () {
         d.canceller();
         d.call();
     };
     //进行异步挂起
     img.addEventListener( "load" , handler, false );
     img.addEventListener( "error" , handler, false );
     d.canceller = function () {
         img.removeEventListener( "load" , handler, false );
         img.removeEventListener( "error" , handler, false );
     };
     img.src = "data:image/png," + Math.random();
     if (fun) d.callback.ok = fun;
     return d;
};

Deferred对象的静态方法 – Deferred.next()源码:api

1
2
3
4
5
Deferred.next =
     Deferred.next_faster_way_readystatechange || //IE下使用onreadystatechange()
     Deferred.next_faster_way_Image || //现代浏览器下使用Image对象onload/onerror事件
     Deferred.next_tick || //Node下使用process.nextTick()
     Deferred.next_default; //默认使用setTimeout

咱们务必要理清Deferred.next()和Deferred.prototype.next(),这是两种不一样的东西:

  • Deferred.next()的职责是压入异步的代码,并当即异步执行的。
  • Deferred.prototype.next()是从上一个Deferred对象链中构建的Deferred。当没有上一个Deferred链的时候,它并不会执行next()中压入的函数,它的执行继承于上一个Deferred触发的事件或自身事件的触发[ call / fail ]。

摘录源码以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Deferred.prototype = {
     callback: {},
     next: function (fun) { //压入一个函数并返回新的Deferred对象
         return this ._post( "ok" , fun)
     },
     call: function (val) { //触发当前Deferred成功的事件
         return this ._fire( "ok" , val)
     },
     _post: function (okng, fun) { //next()底层
         this ._next = new Deferred();
         this ._next.callback[okng] = fun;
         return this ._next;
     },
     _fire: function (okng, value) { //call()底层
         var next = "ok" ;
         try {
             //调用deferred对象相应的事件处理函数
             value = this .callback[okng].call( this , value);
         } catch (e) {
             //抛出异常则进入fail()
             next = "ng" ;
             value = e;
             if (Deferred.onerror) Deferred.onerror(e);
         }
         if (Deferred.isDeferred(value)) {
             //在这里,和_post()呼应,调用Deferred链的下一个Deferred对象
             value._next = this ._next;
         } else {
             if ( this ._next) this ._next._fire(next, value);
         }
         return this ;
     }
}

再一次强调,务必搞清楚Deferred.next()和Deferred.prototype.next()。

jsDeferred API

当我第一次知道jsDeferred API有一坨的时候,其实我是,是拒绝的。我跟你讲,我拒绝,由于其实我以为这根本要不了一坨,但正妹跟我讲,jsDeferred内部会加特技,是假的一坨,是表面看起来一坨。加了特技以后,jsDeferred duang~duang~duang~,很酷,很炫,很酷炫。

jsDeferred的API众多,由于jsDeferred把全部的异步问题都划分到了最小的粒子,这些API相互进行组合则能够完成逆天的异步能力,在后续的API示例中能够看到jsDeferred API组合从而完成强大的异步编程。咱们在阅读jsDeferred的API的时候应该时刻思考若是使用ES6的Promise对象又该如何去处理,阅读应该是大脑的盛宴。 貌似没有看到过jsDeferred的详细的中文API文档(原API文档),就这里顺便整理一份简单的出来(虽然它的API已经足够通俗易懂了)。值得一提的是官网的API引导例子很是的生动和实用: Deferred()/new Deferred ()

构造函数(constructor),建立一个Deferred对象。

1
2
3
4
5
6
7
8
var defer = Deferred(); //或new Deferred()
//建立一个Deferred对象
 
defer.next( function () {
     console.log( 'ok' );
}).error( function (text) {
     console.log(text); //=> linkFly
}).fail( 'linkFly' );

实例方法 Deferred.prototype.next和Deferred.prototype.call

Deferred.prototype.next()构建一个全新的Deferred对象,并为它绑定成功事件处理函数,在没有调用Deferred.prototype.call()以前这个事件处理函数并不会执行。

1
2
3
4
var deferred = Deferred();
deferred.next( function (value) {
     console.log(value); // => linkFly
}).call( 'linkFly' );

Deferred.prototype.error和Deferred.prototype.fail

Deferred.prototype.error()构建一个全新的Deferred对象,并为它绑定失败事件处理函数,在没有调用Deferred.prototype.fail()以前这个事件处理函数并不会执行。

1
2
3
4
var deferred = Deferred();
deferred.error( function () {
     console.log( 'error' ); // => error
}).fail();

静态方法。Deferred全部的静态方法,均可以使用Deferred.方法名()的方式调用。 Deferred.define(obj, list)

暴露静态方法到obj上,无参的状况下obj是全局对象:侵入性极强,但使用方便。list是一组方法,这组方法会同时注册到obj上。

1
2
3
4
5
6
7
8
9
10
Deferred.define(); //无参,侵入式,默认全局对象,浏览器环境为window
next( function () {
     console.log( 'ok' );
}); //静态方法入next被注册到了window下
var defer = {};
 
Deferred.define(defer); //非侵入式,Deferred的静态方法注册到了defer对象下
defer.next( function () {
     console.log( 'ok' );
});

 

Deferred.isDeferred(obj)

判断对象obj是不是jsDeferred对象的实例(Deferred对象)。

1
2
3
Deferred.define();
console.log(Deferred.isDeferred({})); //=> false
console.log(Deferred.isDeferred(wait(2))); //=> true

 

Deferred.call(fn[,args]*)

建立一个Deferred实例,而且触发其成功事件。fn是成功后要执行的函数,后续的参数表示传递给fn的参数。

1
2
3
4
call( function (text) {
     console.log(text); //=> linkFly
}, 'linkFly' );
console.log( 'hello,world!' ); // => 先输出

 

Deferred.next(fn)

建立一个Deferred实例,而且触发其成功事件。fn是成功后要执行的函数,它等同于只有一个参数的call,即:Deferred.call(fn)

1
2
3
4
5
6
7
8
9
10
11
Deferred.define();
next( function () {
     console.log( 'ok' );
});
console.log( 'hello,world!' ); // => 先输出
 
//上面的代码等同于下面的代码
call( function () {
     console.log( 'ok' );
});
console.log( 'hello,world!' ); // => 先输出

 

Deferred.wait(time)

建立一个Deferred实例,并等待time(秒)后触发其成功事件,下面的代码首先弹出”Hello,”,2秒后弹出”World!”。

1
2
3
4
5
6
7
8
next( function () {
     alert( 'Hello,' );
     return wait(2); //延迟2s后执行
}).
next( function (r) {
     alert( 'World!' );
});
console.log( 'hello,world!' ); // => 先输出

 

Deferred.loop(n, fun)

循环执行n次fun,并将最后一次执行fun()的返回值做为Deferred实例成功事件处理函数的参数,一样loop中循环执行的fun()也是异步的。

1
2
3
4
5
6
7
8
loop(3, function () {
     console.log(count);
     return count++;
}).next( function (value) {
     console.info(value); // => 2
});
//上面的代码也是异步的(无阻塞的)
console.info( 'linkFly' );

 

Deferred.parallel(dl[ ,fn]*)

把参数中非Deferred对象均转换为Deferred对象(经过Deferred.next()),而后并行触发dl中的Deferred实例的成功事件。 当全部Deferred对象均调用了成功事件处理函数后,返回的Deferred实例则触发成功事件,而且全部返回值将被封装为数组做为Deferred实例的成功事件处理函数的入参。 parallel()强悍之处在于它的并归处理,它能够将参数中屡次的异步最终并归到一块儿,这一点在JavaScript ajax嵌套中尤其重要:例如同时发送2条ajax请求,最终parallel()会并归这2条ajax返回的结果。

parallel()进行了3次重载:

  • parallel(fn[ ,fn]*):传入Function类型的参数,容许多个
  • parallel(Array):给定一个由Function组成的Array类型的参数
  • parallel(Object):给定一个对象,由对象中全部可枚举的Function构建Deferred

 

下面一张图演示了Deferred.parallel的工做模型,它能够理解为合并了3次ajax请求。

1
2
3
4
5
6
7
8
9
Deferred.define();
parallel( function () {
     //等待2秒后执行
     return wait(2).next( function () { return 'hello,' ; });
}, function () {
     return wait(1).next( function () { return 'world!' });
}).next( function (values) {
     console.log(values); // =>  ["hello,", "world!"]
});

当parallel传递的参数是一个对象的时候,返回值则是一个对象:

1
2
3
4
5
6
7
8
9
10
parallel({
     foo: wait(1).next( function () {
         return 1;
     }),
     bar: wait(2).next( function () {
         return 2;
     })
}).next( function (values) {
     console.log(values); // =>  Object { foo=1, bar=2 }
});

和jQuery.when()一模一样。

 

Deferred.earlier(dl[ ,fn]*)

当参数中某一个Deferred对象调用了成功处理函数,则终止参数中其余Deferred对象的触发的成功事件,返回的Deferred实例则触发成功事件,而且那个触发成功事件的函数返回值将做为Deferred实例的成功事件处理函数的入参。 注意:Deferred.earlier()并不会经过Deferred.define(obj)暴露给obj,它只能经过Deferred.earlier()调用。

Deferred.earlier()内部的实现和Deferred.parallel()大同小异,但值得注意的是参数,它接受的是Deferred,而不是parallel()的Function:

  • Deferred.earlier(Deferred[ ,Deferred]*):传入Deferred类型的参数,容许多个
  • Deferred.earlier(Array):给定一个由Deferred组成的Array类型的参数
  • Deferred.earlier(Object):给定一个对象,由对象中全部可枚举的Deferred构建Deferred

 

1
2
3
4
5
6
7
Deferred.define();
Deferred.earlier(
     wait(2).next( function () { return 'cnblog' ; }),
     wait(1).next( function () { return 'linkFly' }) //1s后执行成功
).next( function (values) {
     console.log(values); // 1s后 => [undefined, "linkFly"]
});

 

Deferred.repeat(n, fun)

循环执行fun方法n次,若fun的执行事件超过20毫秒则先将UI线程的控制权交出,等一下子再执行下一轮的循环。 本身跑了一下,跑出问题来了…duang…求道友指点下迷津

1
2
3
4
5
6
7
8
Deferred.define();
repeat(10, function (i) {
     if (i === 6) {
         var starTime = new Date();
         while ( new Date().getTime() - starTime < 50) console.info( new Date().getTime() - starTime); //到6以后时候不该该再执行了,由于这个函数的执行超过了20ms
     }
     console.log(i); //=> 0,1,2,3,4,5,6,7,8,9
});

 

Deferred.chain(args)

chain()方法的参数比较独特,能够接受多个参数,参数类型能够是:Function,Object,Array。 chain()方法比较难懂,它是将全部的参数构造出一条Deferred方法链。

例如Function类型的参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Deferred.define();
chain(
     function () {
         console.log( 'start' );
     },
     function () {
         console.log( 'linkFly' );
     }
);
 
//等同于
next( function () {
     console.log( 'start' );
}).next( function () {
     console.log( 'linkFly' );
});

它经过函数名来判断函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
chain(
     //函数名!=error,则默认为next
     function () {
         throw Error( 'error' );
     },
     //函数名为error
     function error(e) {
         console.log(e.message);
     }
);
 
//等同于
next( function () {
     throw Error( 'error' );
}).error( function (e) {
     console.log(e.message);
});

也支持Deferred.parallel()的方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
chain(
     [
         function () {
             return wait(1);
         },
         function () {
             return wait(2);
         }
     ]
).next( function () {
     console.log( 'ok' );
});
 
//等同于
Deferred.parallel([
     function () {
         return wait(1);
     },
     function () {
         return wait(2);
     }
]).next( function () {
     console.log( 'ok' );
});

固然能够组合参数:

1
2
3
4
5
6