Deferred 是什么？
实际上 deferred 就是 Promise/A+ 标准的 jQuery 的实现，是一个管理异步操作的对象
jQuery.Deferred 大体逻辑
- 源码大概代码如下
jQuery.extend(
Deferred: function( func ) {
// 声明各个状态的 状态转移方法、回调注册方法、回调列表对象、状态名等
var tuples = [
[ ... ], // 对应 fulfilled
[ ... ], // 对应 rejected
[ ... ] // 对应 progress
],
// 初始状态声明，即 等待 状态
state = "pending",
// promise 对象，用于处理异步回调，如 done()、fail()、progress()、then() 等，是 deferred 的一个子集
promise = { ... },
// deferred 对象，声明时就是一个空对象，除了能处理异步回调，还能更改 promise 状态
deferred = {};
// 向 deferred 和 promise 里注入 done，fail，progress 等回调注册方法
// 向 deferred 里注入 resolve、reject、notify 等更改状态的方法
jQuery.each( tuples, function( tuple, i ) {
...
} );
// 将 promise 里的对象混合到 deferred 中
promise.promise( deferred );
// Deferred() 实际上是个工厂函数，func 可用于配置 deferred，常用于多级异步处理
if ( func ) {
func.call( deferred, deferred )
}
// 最后返回 deferred 对象
return deferred;
}
)
总结：
- 声明 tuples、state、promise、deferred 变量；
- 将 tuples 混入 deferred 中；
- 将 promise 混入 deferred 中；
- 如果有对 deferred 的配置函数 func，则执行；
- 最后返回 deferred 对象；
作为配置数组的 tuples
- 来看 tuples 的具体定义
// tuples 包含三个数组，对应了 deferred 的三种状态，每个 tuple 是一种状态
// tuple[ 0 ] 是状态转移方法名
// tuple[ 1 ] 是回调注册方法名
// tuple[ 2 ] 是通过 tuple[ 1 ] 方法注册的回调函数的容器，其中 resolve 和 reject 是单次执行的
// tuple[ 3 ] 是通过 then() 方法注册的回调函数的容器
// tuple[ 4 ] 只用在 then() 方法的定义中，是用于标明回调函数类型的下标
// tuple[ 5 ] 是最终状态
var tuples =
[
[ "notify", "progress", jQuery.Callbacks( "memory" ),
jQuery.Callbacks( "memory" ), 2 ],
[ "resolve", "done", jQuery.Callbacks( "once memory" ),
jQuery.Callbacks( "once memory" ), 0, "resolved" ],
[ "reject", "fail", jQuery.Callbacks( "once memory" ),
jQuery.Callbacks( "once memory" ), 1, "rejected" ]
]
总结：
该数组实际上对整个 deferred 的 基本方法名、状态名、回调管理容器 进行了定义。
promise 对象定义
- promise 对象是 deferred 中非常关键的一个对象，它是 deferred 的子集，定义了一系列的回调注册的函数，声明时有如下成员对象：
promise = {
// 返回当前状态
state: function() {
return state;
},
// 注入 onFulFilled 或 onRejected 都要调用的回调函数
always: function() {
deferred.done( arguments ).fail( arguments );
return this;
},
// catch 语法糖，实际就是通过 then 注入 onRejected 回调
"catch": function() {
return promise.then( null, fn );
},
pipe: function() { ... },
then: function() { ... },
promise: function() { ... }
}
- 下面详解 pipe 的实现
pipe 可以理解为一个钩子函数，传参为三个回调，对状态返回结果进行预处理。
源码如下：
pipe: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
// 返回的是一个新的 deferred 对象，通过配置函数进行了改造
// 向新的 deferred 的回调列表加入了回调函数
return jQuery.Deffered( function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
// 通过 tuple[ 4 ] 下标获取参数中对应的回调函数 fn
var fn = isFunction( fns[ tuple[ 4 ] ] ) && fns[ tuple[ 4 ] ];
// 在对应的回调列表中注入回调函数
deferred[ tuple[ 1 ] ]( function() {
// 先调用获取的 fn 得到 returned
var returned = fn && fn.call( this, arguments );
// returned 可能是一个 promise 或者 deferred，都有 promise 方法
// 这种情况下，返回的新的 deferred 的状态改变应该依赖于 returned 的状态改变
// 上一条规则参照 Promise/A+ 规范
if ( returned && isFunction( returned.promise ) ) {
// 于是就将新的 deferred 的状态转移函数注入到 returned 的回调列表中
returned.promise()
.progress( newDefer.notify )
.done( newDefer.resolve )
.fail( newDefer.reject )
} else {
// 否则，returned 就应该作为状态转移函数的入参
// 注意，这里 this 继承了该 deferred 状态转移函数传入的上下文对象
// 如果没有 fn，参数就为该 deferred 状态转移函数传入的参数
newDefer[ tuple[ 0 ] + 'With' ](
this,
fn ? [ returned ] : arguments
);
}
} );
} );
fns = null;
} ).promise();
}
总结：
- pipe 函数用传入的回调对原来的 deferred 进行了装饰，返回一个新的 deferred 对象；
- 如果回调的返回值也是一个异步对象，如 promise 或 deferred，那么新的 deferred 的状态依赖于这个返回值的状态；
- 如果返回值是一个非异步对象，就直接作为新 deferred 的状态转移函数的参数；
- 新 deferred 的状态转移函数的上下文继承老的 deferred 的状态转移函数的上下文；
- 如果未传入回调，新 deferred 解析的结果就是老 deferred 的状态转移函数入参；
- 下面详解 then 方法的实现
then 方法是 promise 标准的核心方法，也是最复杂的一个，先来看代码：
then: function( onFulfilled, onReject, onProgress ) {
// 嵌套多层异步行为时的深度标识
var maxDepth = 0;
// 返回一个解析方法，通过传入的参数进行配置
function resolve( depth, deferred, handler, special ) {
// 核心解析方法，在回调中实际执行的方法
return function() {
...
}
}
// 返回一个新的 deferred 对象，并向其回调列表中注入解析方法
return jQuery.Deferred( function( newDefer ) {
// 可以看出，用 then 方法的三个入参来配置解析函数，并注入相应的回调列表中
// 而且注意到，then 注入的回调是放在 tuple[ 3 ] 里
// 而之前 done、fail、progress 注入的回调是放在 tuple[ 2 ] 里
tuples[ 0 ][ 3 ].add(
resolve(
0,
newDefer,
isFunction( onProgress ) ?
onProgress :
Indentity
)
);
tuples[ 1 ][ 3 ].add(
resolve(
0,
newDefer,
isFunction( onFulfilled ) ?
onFulfilled :
Indentity
)
);
tuples[ 2 ][ 3 ].add(
resolve(
0,
newDefer,
isFunction( onRejected ) ?
onRejected :
Thrower
)
);
} ).promise()
}
下面具体来看一下 resolve 解析方法的实现：
function reslove( depth, deferred, handler, specail ) {
return function() {
// 调用方法时，如果传入了上下文对象，比如用 resolveWith 更改方法时
// 就将上下文赋予 that，以便在 mightThrow 函数中调用
var that = this，
args = arguments,
mightThrow = function() {
var returned, then;
// 如果 depth < maxDepth，说明在 depth 这个深度的 deferred 已经被解析过了，不允许重复解析
if ( depth < maxDepth ) {
return;
}
returned = handler.apply( that, args );
// 如果返回值是 deferred 自身的 promise，需要抛出异常
// 否则会将 deferred 的状态转移函数注入自身的回调列表中，造成自己依赖于自己的矛盾
if ( returned === deferred.promise() ) {
throw new TypeError( "Thenable self-resolution" );
}
// 如果 returned 可能是一种 promise 实现，则将 returned.then 赋予 then 变量
then = returned &&
( typeof returned === "object" ||
typeof returned === "function" ) &&
returned.then;
// 如果 then 是 function，可以确定 returned 就是一种 promise 实现
if ( isFunction( then ) ) {
// 如果有 special，说明已经指定了 onProgress 回调，无需再由 resolve 生成
// 而且该 function 是注入到 progress 回调列表中，不影响 maxDepth，即不阻止 notify 调用
if ( special ) {
then.call(
returned,
resolve( maxDepth, deferred, Indentity, special ),
resolve( maxDepth, deferred, Thrower, special )
);
} else {
// 否则，该 function 必然是注入 done 回调中，最后一个参数的 special 传入了 deferred.notifyWith
maxDepth++;
then.call(
returned,
resolve( maxDepth, deferred, Indentity, special ),
resolve( maxDepth, deferred, Thrower, special ),
resolve( maxDepth, deferred, Indentity, deferred.notifyWith )
);
}
} else {
// 如果 then 不是 function，则说明 returned 就是要返回的 value 值
// 如果 handler 不是 Indentity，那 handler 必然是自定义的回调
// 则该异步解析函数的深度为 0，原来的 deferred 状态转移时回调执行的上下文不会影响新返回的 deferred 回调执行的上下文
if ( handler !== Indentity ) {
that = undefined;
args = [ returned ];
}
// 如果 special 存在，就应该是 notifyWith 方法，直接调用即可
// 否则 handler 执行时未抛出异常，说明状态是 fulfilled，调用 deferred.resolveWith 方法即可
( special || deferred.resolveWith )( that, args );
}
},
// special 存在即为 notify 调用，不会抛出异常，直接调用 mightThrow 即可
// 否则可能是 resolved 或 rejected，需要捕获异常
process = special ?
mightThrow :
function() {
try{
mightThrow()
} catch( e ) {
if ( jQuery.Deferred.exceptionHook ) {
// 在控制台中显示异常信息
jQuery.Deferred.exceptionHook( e, process.stackTrace )
}
// 在已经解析过的深度发生的任何异常都忽略掉
if ( depth + 1 >= maxDepth ) {
if ( handler !== Thrower ) {
that = undefined;
args = [ e ];
}
// 说明该异步对象已经被完全解析，此时捕获的异常就是 reject 的参数
// 当前解析的深度 >= maxDepth
deferred.rejectWith( that, args );
}
}
};
// 如果 depth 大于 0，则直接执行 process
if ( depth ) {
process();
} else {
if ( jQuery.Deferred.getStackHook ) {
process.strackTrace = jQuery.Deferred.getStackHook();
}
// 否则设置异步执行
window.setTimeout( process );
}
};
}
关于 resolve 的深度，这里举几个例子：
let defer = $.Deferred();
let defer2 = $.Deferred();
let newDefer = defer.then(
function() {
console.log( 'defer resolved' )
return defer2;
},
function() {
console.log( 'defer rejected' )
},
function() {
console.log( 'defer notified ')
}
)
// defer resolve 后，因为回调中有异步嵌套
// 深度为 0 的异步对象 defer 解析成功
// 等待深度为 1 的异步对象进行解析
// 执行该歩后打印：defer is resolved
defer.resolve();
// 此时触发的异步操作深度为 0，而此时 maxDepth = 1，所以对应回调不会执行
// 执行该歩后不会打印任何东西
// 注意：defer 中注册的 onProgress 不执行是应为 defer.resolve() 将其回调锁住了
// 而 newDefer 的 onProgress 不执行才是因为 depth 而被忽略了
defer.notify();
// 因为将 newDefer 的状态更变权交给了 defer2，所以会导致 newDefer 的 onProgress 回调触发
// 打印：newDefer is notified
defer2.notify();
let defer3 = $.Deferred();
// 同时，defer2 解析后入参为 defer3，也会形成异步嵌套，此时 maxDepth = 2
// newDefer 将会等待 defer3 的状态改变
defer2.resolve( defer3 );
// 因为 defer2 已经解析过
// 深度 depth = 1 < maxDepth，
// 所以不会打印任何东西
defer2.notify()
// defer3 解析完成，导致 newDefer 状态变为 fulfilled
// 打印：newDefer is resolved
defer3.resolve()
总结：
- then 注入回调能支持深层的异步嵌套，而 done、fail 不能，且在所属异步对象的状态解析完成后执行；
- then 只是确定异步的时序关系，并不保证每个异步对象最终状态是否达到，这点从语义上也能感觉到；
下面介绍通过 jQuery.each 将 tuples 注入 promise 和 deferred 中
直接看源码和注释就行：
jQuery.each( tuples, function( i, tuple ) {
// list 即为 done、fail、progress 注入的回调函数列表
var list = tuple[ 2 ],
// 状态字符串
stateString = tuple[ 5 ];
// 将回调注册方法直接赋给 done、fail、progress
promise[ tuple[ 1 ] ] = list.add;
// 对于解析状态的数组
if ( stateString ) {
list.add(
// 更改状态值
function() {
state = stateString;
},
// 废弃另一个状态的回调列表（done、fail、progress）注册的回调列表
tuples[ 3 - i ][ 2 ].disable,
// 废弃另一个状态 then 注册的回调列表
tuples[ 3 - i ][ 3 ].disable,
// 锁定 progress 的回调列表
tuples[ 0 ][ 2 ].lock,
tuples[ 0 ][ 3 ].lock
);
}
// 将 then 的回调列表的 fire 方法注册进 [ done, fail, progress ] 的回调列表中
// 所以 then 注册的回调总是在 onDone、onFail、onProgress 之后触发
list.add( tuple[ 3 ].fire );
// 向 deferred 里注入状态转移方法，在这里 this 不能是自身
deferred[ tuple[ 0 ] ] = function() {
deferred[ tuple[ 0 ] + "With" ]( this === deferred ? undefined : this, arguments );
return this;
};
// 向 deferred 里注入带上下文的状态转移方法
deferred[ tuple[ 0 ] + "With" ] = list.fireWith;
} );
最后：本人也是刚开始学习 jQuery 源码，此文仅作为学习笔记和心得分享，关于Deferred，也还有很多不理解的地方，欢迎各位大佬指点
网友评论