本文解析jQuery.Deferred()源代码,学习异步执行实现原理和编程技术。
测试代码:
var f1=function(){
var deferred = $.Deferred();
deferred.resolve('f1 resolved');
return deferred.promise();
}
f1().then(function(data){
//$.when().then(function(){
console.log(data);
var deferred = $.Deferred();
setTimeout(function(){
deferred.resolve('then resolved');
},2000);
return deferred.promise();
}).done(function(data){ // 也可以写.then(f1,f2,f3)
console.log(data);
}).fail(function(){
console.log('fail');
}).progress(function(){
console.log('progress');
});
jQuery Deferred()源代码分为两个嵌入到jquery对象的函数块:
jQuery.Callbacks = function( options ) {
定义promise/deferred对象的内部操作方法以及内部数据...
jQuery.extend({
Deferred: function( func ) {
定义promise/deferred对象以及暴露的方法比如resolve/then...
Deferred()代码:
Deferred: function( func ) {
var tuples = [
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], // jQuery.Callbacks调用结果是返回一个self{}对象,含内部处理函数
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending", // 这个就是当前Deferred实例的状态
promise = {}; //返回的实例(子实例)
deferred = {}; //当前实例(父实例,含子实例)
jQuery.each( tuples, function( i, tuple ) {
var list = tuple[ 2 ], // tuples是调Callbacks获取self对象,因此list引用self对象
// deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() { // 循环三次分别构造deferred.resolve/reject/notify函数代码
deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments ); //调deferred.resolveWith,构造参数,resolve函数是deferrred
的内置函数,this就是deferred,arguments就是调resolve时的入口参数,比如resolve(data)。此句即为:
deferred.resolveWith(promise,arguments);
传递的作用域object是promise而不是deferred。
resolveWith就是fireWith,因此就是调fireWith(promise.arguments),fireWith函数代码如下:
// Call all callbacks with the given context and arguments
fireWith: function( context, args ) { // context是promise,args是调resolve传递的参数
fire( args ); // fire函数在jQuery.Callbacks函数中定义,下面是Callbacks函数结构
//jQuery.Callbacks相当于定义一个类,从外部调self里面的public方法,public方法再调private方法
jQuery.Callbacks = function( options ) {
list = [], // 执行then时把内部callback存储在list[],内部callback会调用应用callback
// Fire callbacks
fire = function( data ) {
list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) // 执行list[]里面的内部callback
}
// Actual Callbacks object
self = {
// Call all callbacks with the given context and arguments
fireWith: function( context, args ) {
fire( args );
}
}
return self; // Deferred()会调用这个函数,引用self,因此Callbacks函数执行完之后self还存在,list[]也是。
deferred[ tuple[0] + "With" ] = list.fireWith; // deferred.resolveWith
//因此resolve方法其实就是调用 resolve -> resoveWith = list.fireWith (引用self) -> fire (执行list[]里面的callback),代码设计非常复杂深奥,它没有用new实例方法,而是利用了js对象引用机制,函数定义一个对象,在其它位置引用这个对象,这个对象就一直存在,直到引用它的函数不存在为止,其实用new实例方法可以简化设计不用这么深奥。
});
下面来看then代码,Deferrred最复杂深奥的代码在then代码,体现了作者高超的编程技术,令人叹为观止:
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) { // then是Deferred实例里面的方法,注意这是递归再次调用Deferred创建子实例,当前有一个deferred,又递归再次执行函数新建一个deferred,至此就有两个deferred实例,也就是父子实例,子实例返回以便连写.then(callback),对于下一个.then来说就是父实例,执行下一个.then时又递归执行Deferred函数新建一个子实例返回,以此类推,连写嵌套多少层都一样。
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() { // 循环三次就是执行:
//deferrred.done(callback); // done是注册callback,意思是完成以后执行callback,前一个promise对象resolve时会执行callback。
//deferrred.reject(callback); // 类似
//deferrred.notify(callback); // 类似
//每次都用相同的callback。
//这是注册内部callback(匿名函数),要注册到当前deferred实例,deferred是then所在的实例,then递归调用Deferred新产生的实例也是deferred,但它是传递给回调,因此回调的newDefer是新建的子实例。奥妙就在于回调匿名函数function(newDefer){},在递归调用Deferred新建一套实例时用回调函数代码引用当前已经存在的实例!
//当resolve时会执行内部callback匿名函数,会执行应用callback(也就是then里面的callback),然后再resolve当前promise对象,执行下一个then里面的callback。
//为什么不直接执行应用callback是因为要处理解决当前promise对象,要判断应用callback是否返回promise对象,所以写了一段内部callback。
var returned = fn && fn.apply( this, arguments ); //fn是从then参数获取的应用callback,执行then里面的应用callback。
if ( returned && jQuery.isFunction( returned.promise ) ) { //下面代码的目的就是要 resolve当前then返回的promise对象从而执行下一个then里面的callback
returned.promise()
.done( newDefer.resolve ) //如果执行then里面的callback返回promise对象,就注册一个callback,否则就直接执行resolveWith
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
// 第一次循环时执行newDefer.resolveWith(promise,[returned]),就是直接去执行下一个then里面的callback并且传递执行应用callback返回的数据。
//其它循环执行rejectWith/NotifyWith,类似。
}
});
fns = null;
}).promise(); //用promise()方法获取promise对象实例返回,promise对象实例只有部分方法,而deferred对象实例有所有的方法
},
可能有点乱有点晕,下面小结一下:
执行then时把内部callback注册存储在list[],当resolve当前promise对象时,就是去list[]找callback执行,内部callback会执行应用callback(then里面的callback),再根据返回值resolve当前promise对象,从而执行下一个then里面的callback。
jQuery Derferred代码比es6-promise复杂,es6-promise用父子实例,then返回的实例是子实例,then把callback存储到父实例,这样当resolve父实例时就从父实例找callback执行即可,比较简单。但jQuery defer设计了一个Callbacks函数,相当于定义了一个类,有public/private方法,有self{}和list[]。执行then时构造一个内部callback存储在当前实例(父实例)的list[],当resolve当前实例时就去list[]找内部callback执行,内部callback会执行应用callback(then里面的callback),再resolve返回的子实例去list[]执行内部callback,这就是执行下一个then()里面的callback。每一层then都要重新递归执行jQuery.Deferred(func)新建一套子实例返回,下一个then就是新建子实例的内置方法,当执行下一个then时,then所在的实例就是父实例,递归执行Deferred新建实例就是子实例,如果连写多个.then则如此层层嵌套递归。递归是很复杂的,它是把当前程序代码又执行一遍,又产生一套实例,两套代码和实例完全一样,嵌套递归多少层重复执行多少次都不出错,如何区分处理父子实例需要高超的对象编程技术。
所以jQuery Deferred程序和前端框架编译程序一样都是递归程序,重复执行多次就产生多个实例,就递归多个子节点,每一次递归执行时的位置和环境有所变化。
所以通用软件要解决复杂编程技术问题,而相比之下应用软件一般都不涉及复杂编程技术,是两个相当不同的编程世界。
最后一个问题就是如何修改实例的state状态:
state是在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",
有一个内部callback负责修改state状态,其代码和注册位置:
jQuery.each( tuples, function( i, tuple ) {
stateString = tuple[ 3 ];
// Handle state
if ( stateString ) { // resolved或rejected
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 ); //如果resolved就disable rejected,如果rejected就disable resolved
}
执行内部callback时传递promise为作用域:
list[ firingIndex ].apply( data[ 0 ], data[ 1 ] // data[0]=promise data[1]=resolve参数
那么执行function(){state = stateString;} 时就是修改实例中的state,传递作用域为promise有何意义?执行这个方法时是在Callbacks程序空间,如何能访问到deferred实例中的state呢?
这个函数是在Deferred程序空间构造的,因此可以访问state,很简单,虽然把它放到list[]中,再调用执行,但函数是对象,就是引用,这个函数对象是在Deferred
程序空间定义的,就能访问Deferred程序空间的变量数据。
jQuery Deferred没有采用new实例方法,而是利用js对象引用机制,给阅读程序带来很大的迷惑,函数封装绕来绕去就是访问函数定义的一个对象,按程序机制,函数执行完就清除不存在了,包括局部数据都清除不存在了,但它还能在之后访问函数定义的对象。
promise机制其实类似trigger/on机制,都是先注册保存callback,再事件触发执行callback,只是它可以连写,形式上非常直观简洁,能连写是因为它返回promise对象,返回promise对象可不简单,就要涉及递归编程技术,trigger/on之类的程序不是递归程序,所以不能连写,能连写必然是递归程序。而callback的注册保存方法各种软件各不相同,用new实例方法最简明,没有迷惑,不用new实例方法就更复杂,很迷惑,因为那么多独立定义的函数和变量,在不同的程序空间,有些看似没关系,你如何能保证随时随地从某一个函数能访问到某一个变量?
还有一些处理细节也挺复杂的,本文不再分析。。。
bye