jQuery 源碼分析筆記(3) Deferred機制
更新時間:2011年06月19日 23:58:52 作者:
從1.5版本開始,jQuery加入了Deferred功能,讓事件處理隊列更加的完善。并用這個機制重寫了Ajax模塊。雖然還沒輪到Ajax,但是接下來的事件處理函數(shù)中牽扯到了這個機制,所以提前看這段代碼。
Deferred把回調(diào)函數(shù)注冊到一個隊列中,統(tǒng)一管理,并且可以同步或者異步地調(diào)用這些函數(shù)。
jQuery.Deferred()用來構造一個Deferred對象。該對象有狀態(tài)值,共有三種: Rejected, Resolved和初始狀態(tài)。其中Resolved表示該操作成功完成了,而Rejected 則表示出現(xiàn)了錯誤,調(diào)用失敗。Deferred對象的主要成員如下:
done(callback): 注冊一個callback函數(shù),當狀態(tài)為resolved時被調(diào)用。 * fail(callback): 注冊一個callback函數(shù),當狀態(tài)為rejected時被調(diào)用。 * always(callback): 注冊一個callback函數(shù),無論是resolved或者rejected都會被調(diào)用。 * then(successCallback, failureCallback): 同時傳入成功和失敗的回調(diào)函數(shù)。 * pipe(successFilter, failureFilter): 在調(diào)用成功和失敗的回調(diào)函數(shù)前先調(diào)用pipe 指定的函數(shù)。算是一種管道機制,攔截了函數(shù)調(diào)用。 * resolve(args): 把狀態(tài)設置為Resolved。 * reject(args): 把狀態(tài)設置為Rejected。 * promse(): 返回的是一個不完整的Deferred的接口,沒有resolve和reject。即不能修改Deferred對象的狀態(tài)。可以看作是一種只讀視圖。這是為了不讓外部函數(shù)提早觸發(fā)回調(diào)函數(shù)。比如$.ajax在1.5版本后不再返回XMLHttpRequest,而是返回一個封裝了 XMLHttpRequest和Deferred對象接口的object。其中Deferred部分就是promise()得到的,這樣不讓外部函數(shù)調(diào)用resolve和reject,防止在ajax完成前觸發(fā)回調(diào)函數(shù)。把這兩個函數(shù)的調(diào)用權限保留給ajax內(nèi)部。
這個模塊的代碼從939行開始,緊接著jQuery對象的聲明。也算是一個基礎核心代碼了。同時也是1.5版本最大的變化之一。
實際上Resolve和Reject的代碼邏輯是一樣的,只是對應的狀態(tài)不同而已。為了代碼復用,內(nèi)部先實現(xiàn)了一個Deferred,然后真正的Deferred內(nèi)部new了兩個Deferred,一個作為 Resolve,另一個作為Reject。
_Deferred對象內(nèi)部維護了一個函數(shù)數(shù)組(callback list)。Done(f1, f2...)的工作就是把這些callback依次push到這個隊列中保存下來。而resolveWith(帶參的resolve)和resolve依次調(diào)用這寫callback函數(shù)。
Done中,需要判斷事件是否已經(jīng)完成。如果callback加入chain時事件已經(jīng)完成,則需要馬上執(zhí)行callback。這個特性是讓callback不用再和觸發(fā)異步事件聲明寫在一起的原因。比如原來必須寫$.post("...", function(data) { ... })。這個success callback必須寫在這里,而現(xiàn)在可以寫:
var defer = $.post("...");
// ...
defer.success(function(data) {
// ...
});
// ...
defer.fail(function(data) {
// ...
});
這樣異步事件的聲明和回調(diào)函數(shù)就可以分別管理了。這是1.5版本重寫后的最大變化。
pipe(successFilter, failureFilter)函數(shù)修改了原來對象中的callback list。在兩個callback list前面用then函數(shù)分別插入了Filter函數(shù)。然后返回。這樣當這個Deferred對象的狀態(tài)變化時,會先調(diào)用pipe函數(shù)指定的Filter函數(shù),然后才會調(diào)用callback list。
promise()則單純許多,就是new一個新object,然后把需要的成員copy進去。這個需要的成員定義在一個叫promiseMethods常量中。
var promiseMethods = "done fail isResolved isRejected promise then always pipe".split(" ");
jQuery.Deferred()用來構造一個Deferred對象。該對象有狀態(tài)值,共有三種: Rejected, Resolved和初始狀態(tài)。其中Resolved表示該操作成功完成了,而Rejected 則表示出現(xiàn)了錯誤,調(diào)用失敗。Deferred對象的主要成員如下:
done(callback): 注冊一個callback函數(shù),當狀態(tài)為resolved時被調(diào)用。 * fail(callback): 注冊一個callback函數(shù),當狀態(tài)為rejected時被調(diào)用。 * always(callback): 注冊一個callback函數(shù),無論是resolved或者rejected都會被調(diào)用。 * then(successCallback, failureCallback): 同時傳入成功和失敗的回調(diào)函數(shù)。 * pipe(successFilter, failureFilter): 在調(diào)用成功和失敗的回調(diào)函數(shù)前先調(diào)用pipe 指定的函數(shù)。算是一種管道機制,攔截了函數(shù)調(diào)用。 * resolve(args): 把狀態(tài)設置為Resolved。 * reject(args): 把狀態(tài)設置為Rejected。 * promse(): 返回的是一個不完整的Deferred的接口,沒有resolve和reject。即不能修改Deferred對象的狀態(tài)。可以看作是一種只讀視圖。這是為了不讓外部函數(shù)提早觸發(fā)回調(diào)函數(shù)。比如$.ajax在1.5版本后不再返回XMLHttpRequest,而是返回一個封裝了 XMLHttpRequest和Deferred對象接口的object。其中Deferred部分就是promise()得到的,這樣不讓外部函數(shù)調(diào)用resolve和reject,防止在ajax完成前觸發(fā)回調(diào)函數(shù)。把這兩個函數(shù)的調(diào)用權限保留給ajax內(nèi)部。
這個模塊的代碼從939行開始,緊接著jQuery對象的聲明。也算是一個基礎核心代碼了。同時也是1.5版本最大的變化之一。
實際上Resolve和Reject的代碼邏輯是一樣的,只是對應的狀態(tài)不同而已。為了代碼復用,內(nèi)部先實現(xiàn)了一個Deferred,然后真正的Deferred內(nèi)部new了兩個Deferred,一個作為 Resolve,另一個作為Reject。
_Deferred對象內(nèi)部維護了一個函數(shù)數(shù)組(callback list)。Done(f1, f2...)的工作就是把這些callback依次push到這個隊列中保存下來。而resolveWith(帶參的resolve)和resolve依次調(diào)用這寫callback函數(shù)。
Done中,需要判斷事件是否已經(jīng)完成。如果callback加入chain時事件已經(jīng)完成,則需要馬上執(zhí)行callback。這個特性是讓callback不用再和觸發(fā)異步事件聲明寫在一起的原因。比如原來必須寫$.post("...", function(data) { ... })。這個success callback必須寫在這里,而現(xiàn)在可以寫:
復制代碼 代碼如下:
var defer = $.post("...");
// ...
defer.success(function(data) {
// ...
});
// ...
defer.fail(function(data) {
// ...
});
這樣異步事件的聲明和回調(diào)函數(shù)就可以分別管理了。這是1.5版本重寫后的最大變化。
pipe(successFilter, failureFilter)函數(shù)修改了原來對象中的callback list。在兩個callback list前面用then函數(shù)分別插入了Filter函數(shù)。然后返回。這樣當這個Deferred對象的狀態(tài)變化時,會先調(diào)用pipe函數(shù)指定的Filter函數(shù),然后才會調(diào)用callback list。
promise()則單純許多,就是new一個新object,然后把需要的成員copy進去。這個需要的成員定義在一個叫promiseMethods常量中。
復制代碼 代碼如下:
var promiseMethods = "done fail isResolved isRejected promise then always pipe".split(" ");
您可能感興趣的文章:
相關文章
jquery+json實現(xiàn)數(shù)據(jù)列表分頁示例代碼
該實例中,新聞數(shù)據(jù)列表未使用表格顯示,下面有個不錯的示例完美實現(xiàn)實現(xiàn)數(shù)據(jù)列表分頁,感興趣的朋友不要錯過2013-11-11jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼,非常的簡單實用,效果也很棒,有需要的小伙伴可以參考下。2015-04-04淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12jQuery實現(xiàn)的導航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的導航動畫效果,可實現(xiàn)導航條的底部橫條隨鼠標移動的效果,涉及jQuery針對鼠標事件的響應及頁面元素樣式動態(tài)變換的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10