jQuery Deferred

HollisChuang 發(fā)布于2019-08-19 17:27 / 972人閱讀

摘要：比較下和也就是說返回值是的一個(gè)非狀態(tài)操作的子集，允許我們添加回調(diào)，但是不允許我們操作的狀態(tài)。前面說了的返回值是一個(gè)新的對(duì)象，如果在新的對(duì)象上繼續(xù)添加回調(diào)會(huì)怎么樣呢我們分兩種情況來看。方法的返回值不是對(duì)象的返回值會(huì)傳遞給的參數(shù)。

前言

Deferred是從1.5版本引入的一個(gè)核心特性之一，主要是為了解決Callback Hell，老生常談的問題，這里就不多贅述了。本文旨在剖析Deferred的內(nèi)部實(shí)現(xiàn)，讓大家能夠深入了解Deferred。

API $.Deferred

通過調(diào)用$.Deferred()獲取到一個(gè)Deferred實(shí)例，如下

var dd = $.Deferred();

調(diào)用的時(shí)候可以傳入一個(gè)函數(shù)（可以簡(jiǎn)單的看作構(gòu)造函數(shù)），如下

var dd = $.Deferred(function (newDefer) {
    newDefer.name = "My Deferred";
});

console.log(dd.name);//My Deferred

resolve/done reject/fail notify/progress

Deferred的實(shí)現(xiàn)使用了閉包，內(nèi)部維護(hù)了三個(gè)$.Callbacks管理隊(duì)列。

可以說Deferred的核心在于$.Callbacks。如果不熟悉$.Callbacks的請(qǐng)自行搜索或參考我的另一篇介紹文章jQuery Callbacks。代碼可以簡(jiǎn)化成下面的樣子

var resolveCb = jQuery.Callbacks("once memory");
var rejectCb = jQuery.Callbacks("once memory");
var notifyCb = jQuery.Callbacks("memory");

done        = resolveCb.add
resolve     ~ resolveCb.fire
resolveWith = resolveCb.fireWith

fail        = rejectCb.add
reject      ~ rejectCb.fire
rejectWith  = rejectCb.fireWith

progress    = notifyCb.add
notify      ~ notifyCb.fire
notifyWith  = notifyCb.fireWith

~表示可以簡(jiǎn)單理解為對(duì)等。我們?cè)倏纯聪旅娴拇a會(huì)不會(huì)有不一樣的感覺了

var dd = $.Deferred();

dd.done(function (name) {
    console.log(name, 1);
}).done(function (name) {
    console.log(name, 2);
});

dd.resolve("Jacky");

其實(shí)就相當(dāng)于

resolveCb.add(function (name) {
    console.log(name, 1);
}).add(function (name) {
    console.log(name, 2);
});

resolveCb.fire("Jacky");

當(dāng)Deferred執(zhí)行完resolve以后，同時(shí)會(huì)調(diào)用rejectCb.disable和notifyCb.lock。

當(dāng)Deferred執(zhí)行完reject以后，同時(shí)會(huì)調(diào)用resolveCb.disable和notifyCb.lock。

notifyCb就是一個(gè)單純的$.Callbacks，但是它的狀態(tài)會(huì)受到resolve/reject的影響。

resolveCb和rejectCb兩者之間是相互限制的，一旦兩者中的某一個(gè)fire了，另一個(gè)就會(huì)被disable。通過這種方式來達(dá)到唯一狀態(tài)。

resolve/resolveWith reject/rejectWith notify/notifyWith

就是fire和firewith的區(qū)別

state

返回Deferred的當(dāng)前狀態(tài)，總共有三種狀態(tài)

執(zhí)行resolve/reject前，返回值是pending

執(zhí)行了resolve，返回值是resolved

執(zhí)行了reject，返回值是rejected

var dd = $.Deferred();
console.log(dd.state());//pending
dd.resolve();
console.log(dd.state());//resolved
//dd.reject();
//console.log(dd.state());//rejected

always

看下源碼大家就一清二楚了

還是調(diào)用的done和fail，往各自隊(duì)列里添加回調(diào)。

promise

提供Deferred的非狀態(tài)接口。比較下Deferred和Deferred.promise()

var dd = $.Deferred();
var promise = dd.promise();

console.log(dd);
console.log(promise);

也就是說promise返回值是Deferred的一個(gè)非狀態(tài)操作的子集，允許我們添加回調(diào)，但是不允許我們操作Deferred的狀態(tài)。也可以將這些方法添加到某一個(gè)對(duì)象上，例如

var obj = {name: "xxx"};
var dd = $.Deferred();
var newObj = dd.promise(obj);

console.log(newObj);
console.log(newObj === obj);

then/pipe

pipe是為了向下兼容留下的方法，pipe===then。then支持三個(gè)參數(shù)，返回值是一個(gè)新的promise對(duì)象?？磶讉€(gè)例子

例子一

var dd = $.Deferred();

dd.done(function (name) {
    console.log("dd", name);
});

dd.then(function (name) {
    console.log("then", name);
});

dd.resolve("Jacky");
//dd Jacky
//then Jacky

例子二

var dd = $.Deferred();

dd.fail(function (name) {
    console.log("dd", name);
});

dd.then(null, function (name) {
    console.log("then", name);
});

dd.reject("Jacky");
//dd Jacky
//then Jacky

例子三

var dd = $.Deferred();

dd.progress(function (name) {
    console.log("dd", name);
});

dd.then(null, null, function (name) {
    console.log("then", name);
});

dd.notify("Jacky");
//dd Jacky
//then Jacky

三個(gè)參數(shù)剛好分別添加到了內(nèi)部的三個(gè)回調(diào)隊(duì)列中。dd.then(fn)可以簡(jiǎn)單看作dd.done(fn)。前面說了then的返回值是一個(gè)新的promise對(duì)象，如果在新的Deferred對(duì)象上繼續(xù)添加回調(diào)會(huì)怎么樣呢？我們分兩種情況來看。

then方法的返回值不是Deferred對(duì)象

var dd = $.Deferred();

var newdd = dd.then(function (name) {
    console.log("then", name);
    return "Mary";
});

newdd.done(function (name) {
    console.log("newDefer", name);
});

dd.resolve("Jacky");
//then Jacky
//newDefer Mary

then的返回值會(huì)傳遞給done/fail的參數(shù)。而且無需我們手動(dòng)調(diào)用newdd.resolve，內(nèi)部幫我們調(diào)用了

返回值是Deferred對(duì)象

看個(gè)例子

var dd = $.Deferred();
var returndd = $.Deferred();

var newdd = dd.then(function (name) {
    console.log("then", name);
    return returndd;
});

newdd.done(function (name) {
    console.log("newDefer", name);
});

dd.resolve("Jacky");//then Jacky

newdd.done添加的函數(shù)沒有馬上執(zhí)行了。我們手動(dòng)調(diào)用下returndd.resolve

var dd = $.Deferred();
var returndd = $.Deferred();

var newdd = dd.then(function (name) {
    console.log("then", name);
    return returndd;
});

newdd.done(function (name) {
    console.log("newDefer", name);
});

dd.resolve("Jacky");//then Jacky
returndd.resolve("Helen");//newDefer Helen

這里就是我們的promise編程了