最近懒癌发作,说好的系列文章,写了一半,一直懒得写,今天补上一篇。
Deferred
我们在使用promise
对象时,总会提到一个与它关系密切的对象——Deferred
。其实Deferred
没什么内容可讲的,其实很简单。
它包含一个
promise
对象它可以改变对应的
promise
的状态
简单的实现如下:
class Deferred{
constructor(){
let defer = {};
defer.promise = new Promise((resolve, reject)=>{
defer.resolve = resolve;
defer.reject = reject;
})
return defer;
}
}
我们知道promise
对象内部的状态,本身是在创建对象时传入的函数内控制,外部是访问不到的,Deferred
对象在它的基础上包装了一层,并提供了两个在外部改变它状态的方法。
用法其实在Promise介绍--规范篇中的例子内,多处使用到了,这里就不再赘述。总觉得文章写这么点儿,就显得太水了。。所以借此,讲讲jQuery
中的实现。
jQuery
中还有一个静态方法$.Callbacks()
,由于$.Deferred()
强依赖它,所以我们先从它开刀。
$.Callbacks()
$.Callbacks()
我们称为回调对象,它内部会维护一个数组,我们可以向其中添加若干个回调函数,然后在某一条件下触发执行。
有几个方法从名字我们就知道它的作用是什么,add
向数组内部添加一个回调函数,empty
清空数组,fire
触发回调函数,has
数组中是否已经添加某回调函数,remove
从数组中删除某回调函数。
fireWith
函数接收两个参数,第一个是回调函数执行的上下文,第二个是回传给回调函数的参数。fire
中其实内部调用的就是fireWith
,其中第一个参数传递的是this
。
其它的几个函数,都和回调数组的状态有关。创建Callbacks
对象时,接收一个字符串或者对象作为参数。其实内部都会转换为对象,这里不赘述,不同字符串表示不同的处理方式,一一介绍。
once
:对象只会调用一次。
let cb = $.Callbacks('once')
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.fire()
cb.add(b)
cb.fire()
// a
第一次fire
之后,回调列表之后不会再次触发。
memory
: 记住回调列表的执行状态,如果回调函数fire
过一次,之后每次add
之后,则自动触发该回调。
let cb = $.Callbacks('memory')
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.fire()
// a
cb.add(b)
// b
第一次fire
之后,再次add
新的回调函数b
时,自动执行回调b
。
unique
:每一个回调函数只可以添加一次。
let cb = $.Callbacks('unique')
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.add(a)
cb.fire()
// a
cb.add(b)
cb.fire()
// a
// b
第一次fire
时,只会打印一个a
,说明第二个a
没有添加成功,但当我们添加b
时,是可以添加成功的。
stopOnFalse
:当前面的回调函数返回false
时,终止后面的回调继续执行。
let cb = $.Callbacks('stopOnFalse')
function a(){console.log('a');return false;}
function b(){console.log('b')}
cb.add(a)
cb.add(b)
cb.fire()
// a
函数a
返回了false
,导致函数b
没有执行。
我们再回过头看$.Callbacks()
对象的方法,lock
方法表示锁住回调数组,不再执行,也就是模式为once
时,调用一次fire
后的状态,即在此之后不可以在此触发。如下:
let cb = $.Callbacks()
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.fire()
cb.lock()
cb.add(b)
cb.fire()
lock
之后,再次添加函数b
并调用fire
时,不会再次执行,与once
模式下效果类似。但如果是memory
模式,回调先fire
,然后再lock
,之后再次add
时,新添加的函数依然会执行。
let cb = $.Callbacks('memory')
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.fire()
cb.lock()
cb.add(b)
// a
// b
其实这种效果和直接创建回调对象时,参数设为once memory
是一致的。也就是说,如下代码与上面效果一致。
let cb = $.Callbacks('once memory')
function a(){console.log('a')}
function b(){console.log('b')}
cb.add(a)
cb.fire()
cb.add(b)
// a
// b
我们发现这种once memory
模式,正好与Promise
中then
方法添加的回调很类似。如果promise
对象处于pending
状态,则then
方法添加的回调存储在一个数组中,当promise
对象状态改变(fire
)时,执行相应的回调,且之后再次通过then
方法添加回调函数,新回调会立刻执行。同时,每一个回调只能执行一次。所以,$.Deferred()
内部用的正好是once memory
的Callbacks
。
还有一个函数叫做disable
,它的作用是直接禁用掉这个回调对象,清空回调数组,禁掉fire
、add
等。
locked
用于判断数组是否被锁住,返回true
或false
。disabled
用于判断回调对象是否被警用,同样返回true
或false
。
$.Deferred()
有了以上的基础,我们接下来看看jQuery
中,Deferred
对象的实现。我们先看看它都有哪些方法。如图:
别的方法我们暂且不关注,我们注意到里面有四个我们比较熟悉的方法,promise
,reject
,resolve
。它们和我们前面说的Deferred
对象中作用差不多。
jQuery
的Deferred
中有三个添加回调函数的方法done
,fail
,progress
,分别对应添加promise
状态为resolved
、rejected
和pending
时的回调,同时对应有三个触发回调函数的方法resolve
、reject
和notify
。
我们接下来看看它内部是怎么实现的。首先为每种状态分别创建一个Callbacks
对象,如下:
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")]
]
我们发现done
、fail
对应的回调对象是once memory
,而progress
对应的是memory
。说明通过progress
添加的函数,可以多次重复调用。
然后定义了一个state
用来保存状态,以及内部的一个promise
对象。
state = "pending",
promise = {
state: function() {
return state;
},
always: function() {
deferred.done(arguments).fail(arguments);
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {
},
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function(obj) {
return obj != null ? jQuery.extend(obj, promise) : promise;
}
},
接下来会执行一个循环,如下:
// Add list-specific methods
jQuery.each(tuples, function(i, tuple) {
var list = tuple[2],
stateString = tuple[3];
// promise[ done | fail | progress ] = list.add
promise[tuple[1]] = list.add;
// Handle state
if (stateString) {
list.add(function() {
// state = [ resolved | rejected ]
state = stateString;
// [ reject_list | resolve_list ].disable; progress_list.lock
}, tuples[i ^ 1][4].disable, tuples[2][5].lock);
}
// deferred[ resolve | reject | notify ]
deferred[tuple[0]] = function() {
deferred[tuple[0] + "With"](this === deferred ? promise : this, arguments);
return this;
};
deferred[tuple[0] + "With"] = list.fireWith;
});
这一段代码中我们可以看出,done
、fail
、progress
其实就是add
,resolve
、reject
和notify
其实就是fire
,与之对应的resolveWith
、rejectWith
和notifyWith
其实就是fireWith
。且成功和失败的回调数组中,会预先添加一个函数,用来设置promise
的状态和禁用掉其它状态下的回调对象。
从上面这段代码中我们也可以看出,添加回调函数的方法,都是添加在promise
对象上的,而触发回调的方法是添加在deferred
对象上的。代码中会通过如下方法,把promise
对象的方法合并到deferred
对象上。
promise.promise(deferred);
所以,我们打印一下$.Deferred().promise()
。
发现它确实比$.Deferred()
少了那几个触发回调的方法。
其它的几个方法我们简单说一下,always
会同时在成功和失败的回调数组中添加方法。state
是查看当前promise
对象的状态。
then
方法如下:
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function(newDefer) {
jQuery.each(tuples, function(i, tuple) {
var fn = jQuery.isFunction(fns[i]) && fns[i];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[tuple[1]](function() {
var returned = fn && fn.apply(this, arguments);
if (returned && jQuery.isFunction(returned.promise)) {
returned.promise()
.progress(newDefer.notify)
.done(newDefer.resolve)
.fail(newDefer.reject);
} else {
newDefer[tuple[0] + "With"](
this === promise ? newDefer.promise() : this,
fn ? [returned] : arguments
);
}
});
});
fns = null;
}).promise();
}
从代码中我们可以看出,then
方法和规范中的then
方法类似,不过这里多了第三个参数,是用于给progress
添加回调函数,同时返回一个新的promise
对象。
pipe
是为了向前兼容,它与then
是相等的。
$.when()
jQuery
中还有一个与之相关的方法$.when()
,它的作用类似于Promise.all()
。具体实现方式基本是新建了一个Deferred
对象,然后遍历所有传递进去的promise
对象。不过添加了progres
的处理。总之和规范有很多的不同,大家有兴趣的就自己看一下吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。