jQuery Deferred

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

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

前言

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

API $.Deferred

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

var dd = $.Deferred();

調(diào)用的時候可以傳入一個函數(shù)（可以簡單的看作構(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的實現(xiàn)使用了閉包，內(nèi)部維護(hù)了三個$.Callbacks管理隊列。

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

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

~表示可以簡單理解為對等。我們再看看下面的代碼會不會有不一樣的感覺了

var dd = $.Deferred();

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

dd.resolve("Jacky");

其實就相當(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以后，同時會調(diào)用rejectCb.disable和notifyCb.lock。

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

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

resolveCb和rejectCb兩者之間是相互限制的，一旦兩者中的某一個fire了，另一個就會被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，往各自隊列里添加回調(diào)。

promise

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

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

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

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

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支持三個參數(shù)，返回值是一個新的promise對象?？磶讉€例子

例子一

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

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

then方法的返回值不是Deferred對象

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的返回值會傳遞給done/fail的參數(shù)。而且無需我們手動調(diào)用newdd.resolve，內(nèi)部幫我們調(diào)用了

返回值是Deferred對象

看個例子

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í)行了。我們手動調(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編程了