jQuery 源碼分析筆記(3) Deferred機(jī)制
jQuery.Deferred()用來(lái)構(gòu)造一個(gè)Deferred對(duì)象。該對(duì)象有狀態(tài)值,共有三種: Rejected, Resolved和初始狀態(tài)。其中Resolved表示該操作成功完成了,而Rejected 則表示出現(xiàn)了錯(cuò)誤,調(diào)用失敗。Deferred對(duì)象的主要成員如下:
done(callback): 注冊(cè)一個(gè)callback函數(shù),當(dāng)狀態(tài)為resolved時(shí)被調(diào)用。 * fail(callback): 注冊(cè)一個(gè)callback函數(shù),當(dāng)狀態(tài)為rejected時(shí)被調(diào)用。 * always(callback): 注冊(cè)一個(gè)callback函數(shù),無(wú)論是resolved或者rejected都會(huì)被調(diào)用。 * then(successCallback, failureCallback): 同時(shí)傳入成功和失敗的回調(diào)函數(shù)。 * pipe(successFilter, failureFilter): 在調(diào)用成功和失敗的回調(diào)函數(shù)前先調(diào)用pipe 指定的函數(shù)。算是一種管道機(jī)制,攔截了函數(shù)調(diào)用。 * resolve(args): 把狀態(tài)設(shè)置為Resolved。 * reject(args): 把狀態(tài)設(shè)置為Rejected。 * promse(): 返回的是一個(gè)不完整的Deferred的接口,沒有resolve和reject。即不能修改Deferred對(duì)象的狀態(tài)??梢钥醋魇且环N只讀視圖。這是為了不讓外部函數(shù)提早觸發(fā)回調(diào)函數(shù)。比如$.ajax在1.5版本后不再返回XMLHttpRequest,而是返回一個(gè)封裝了 XMLHttpRequest和Deferred對(duì)象接口的object。其中Deferred部分就是promise()得到的,這樣不讓外部函數(shù)調(diào)用resolve和reject,防止在ajax完成前觸發(fā)回調(diào)函數(shù)。把這兩個(gè)函數(shù)的調(diào)用權(quán)限保留給ajax內(nèi)部。
這個(gè)模塊的代碼從939行開始,緊接著jQuery對(duì)象的聲明。也算是一個(gè)基礎(chǔ)核心代碼了。同時(shí)也是1.5版本最大的變化之一。
實(shí)際上Resolve和Reject的代碼邏輯是一樣的,只是對(duì)應(yīng)的狀態(tài)不同而已。為了代碼復(fù)用,內(nèi)部先實(shí)現(xiàn)了一個(gè)Deferred,然后真正的Deferred內(nèi)部new了兩個(gè)Deferred,一個(gè)作為 Resolve,另一個(gè)作為Reject。
_Deferred對(duì)象內(nèi)部維護(hù)了一個(gè)函數(shù)數(shù)組(callback list)。Done(f1, f2...)的工作就是把這些callback依次push到這個(gè)隊(duì)列中保存下來(lái)。而resolveWith(帶參的resolve)和resolve依次調(diào)用這寫callback函數(shù)。
Done中,需要判斷事件是否已經(jīng)完成。如果callback加入chain時(shí)事件已經(jīng)完成,則需要馬上執(zhí)行callback。這個(gè)特性是讓callback不用再和觸發(fā)異步事件聲明寫在一起的原因。比如原來(lái)必須寫$.post("...", function(data) { ... })。這個(gè)success callback必須寫在這里,而現(xiàn)在可以寫:
var defer = $.post("...");
// ...
defer.success(function(data) {
// ...
});
// ...
defer.fail(function(data) {
// ...
});
這樣異步事件的聲明和回調(diào)函數(shù)就可以分別管理了。這是1.5版本重寫后的最大變化。
pipe(successFilter, failureFilter)函數(shù)修改了原來(lái)對(duì)象中的callback list。在兩個(gè)callback list前面用then函數(shù)分別插入了Filter函數(shù)。然后返回。這樣當(dāng)這個(gè)Deferred對(duì)象的狀態(tài)變化時(shí),會(huì)先調(diào)用pipe函數(shù)指定的Filter函數(shù),然后才會(huì)調(diào)用callback list。
promise()則單純?cè)S多,就是new一個(gè)新object,然后把需要的成員copy進(jìn)去。這個(gè)需要的成員定義在一個(gè)叫promiseMethods常量中。
var promiseMethods = "done fail isResolved isRejected promise then always pipe".split(" ");
- jQuery的deferred對(duì)象使用詳解
- jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細(xì)介紹
- 利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
- jQuery之Deferred對(duì)象詳解
- jQuery源碼分析-05異步隊(duì)列 Deferred 使用介紹
- 在jQuery1.5中使用deferred對(duì)象 著放大鏡看Promise
- 在jQuery 1.5中使用deferred對(duì)象的代碼(翻譯)
- jquery基礎(chǔ)教程之deferred對(duì)象使用方法
- jquery中對(duì)于批量deferred的處理方法
- jQuery中deferred對(duì)象使用方法詳解
相關(guān)文章
jquery+json實(shí)現(xiàn)數(shù)據(jù)列表分頁(yè)示例代碼
該實(shí)例中,新聞數(shù)據(jù)列表未使用表格顯示,下面有個(gè)不錯(cuò)的示例完美實(shí)現(xiàn)實(shí)現(xiàn)數(shù)據(jù)列表分頁(yè),感興趣的朋友不要錯(cuò)過(guò)2013-11-11jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼,非常的簡(jiǎn)單實(shí)用,效果也很棒,有需要的小伙伴可以參考下。2015-04-04淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果,可實(shí)現(xiàn)導(dǎo)航條的底部橫條隨鼠標(biāo)移動(dòng)的效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04使用jquery實(shí)現(xiàn)圖文切換效果另加特效
白天活干完,弄個(gè)jquery仿凡客誠(chéng)品圖片切換的效果;以前寫的不是很好,今天重新做個(gè)jquery特效,其實(shí)很簡(jiǎn)單,感興趣的朋友可以了解下哦,希望本文對(duì)你有幫助2013-01-01使用JQ來(lái)編寫最基本的淡入淡出效果附演示動(dòng)畫
使用JQ來(lái)編寫最基本的淡入淡出效果2014-10-10jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05jQuery通過(guò)ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery通過(guò)ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10