jQuery 源码分析笔记(3)
從1.5版本開始,jQuery加入了Deferred功能,讓事件處理隊列更加的完善。并用 這個機制重寫了Ajax模塊。雖然還沒輪到Ajax,但是接下來的事件處理函數中牽扯到了 這個機制,所以提前看這段代碼。
Deferred把回調函數注冊到一個隊列中,統一管理,并且可以同步或者異步地調用 這些函數。jQuery.Deferred()用來構造一個Deferred對象。該對象有狀態值,共有三種: Rejected, Resolved和初始狀態。其中Resolved表示該操作成功完成了,而Rejected 則表示出現了錯誤,調用失敗。Deferred對象的主要成員如下:
* done(callback): 注冊一個callback函數,當狀態為resolved時被調用。 * fail(callback): 注冊一個callback函數,當狀態為rejected時被調用。 * always(callback): 注冊一個callback函數,無論是resolved或者rejected都會被 調用。 * then(successCallback, failureCallback): 同時傳入成功和失敗的回調函數。 * pipe(successFilter, failureFilter): 在調用成功和失敗的回調函數前先調用pipe 指定的函數。算是一種管道機制,攔截了函數調用。 * resolve(args): 把狀態設置為Resolved。 * reject(args): 把狀態設置為Rejected。 * promse(): 返回的是一個不完整的Deferred的接口,沒有resolve和reject。即不能 修改Deferred對象的狀態。可以看作是一種只讀視圖。這是為了不讓外部函數提早觸發 回調函數。比如$.ajax在1.5版本后不再返回XMLHttpRequest,而是返回一個封裝了 XMLHttpRequest和Deferred對象接口的object。其中Deferred部分就是promise()得到 的,這樣不讓外部函數調用resolve和reject,防止在ajax完成前觸發回調函數。把這 兩個函數的調用權限保留給ajax內部。
這個模塊的代碼從939行開始,緊接著jQuery對象的聲明。也算是一個基礎核心代碼了。 同時也是1.5版本最大的變化之一。
實際上Resolve和Reject的代碼邏輯是一樣的,只是對應的狀態不同而已。為了代碼復用, 內部先實現了一個\_Deferred,然后真正的Deferred內部new了兩個\_Deferred,一個作為 Resolve,另一個作為Reject。
\_Deferred對象內部維護了一個函數數組(callback list)。Done(f1, f2...)的工作 就是把這些callback依次push到這個隊列中保存下來。而resolveWith(帶參的resolve) 和resolve依次調用這寫callback函數。
Done中,需要判斷事件是否已經完成。如果callback加入chain時事件已經完成,則 需要馬上執行callback。這個特性是讓callback不用再和觸發異步事件聲明寫在一起 的原因。比如原來必須寫$.post("...", function(data) { ... })。這個success callback必須寫在這里,而現在可以寫:
var defer = $.post("..."); // ... defer.success(function(data) {// ... }); // ... defer.fail(function(data) {// ... });這樣異步事件的聲明和回調函數就可以分別管理了。這是1.5版本重寫后的最大變化。
pipe(successFilter, failureFilter)函數修改了原來對象中的callback list。在兩個callback list前面用then函數分別插入了Filter函數。然后返回。這樣當這個Deferred對象的狀態變化時,會 先調用pipe函數指定的Filter函數,然后才會調用callback list。
promise()則單純許多,就是new一個新object,然后把需要的成員copy進去。這個需要的成員定義在 一個叫promiseMethods常量中。
var promiseMethods = "done fail isResolved isRejected promise then always pipe".split(" ");PS: 今天把Markdown環境配置好后,用vim編寫Markdown,然后復制過來直接發布。感覺不錯
轉載于:https://www.cnblogs.com/fjzhou/archive/2011/05/30/jquery-source-3.html
總結
以上是生活随笔為你收集整理的jQuery 源码分析笔记(3)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【题解】luogu P1757 通天之分
- 下一篇: 搬寝室