Callbacks 模塊并不是必備的模塊,其作用是管理回調(diào)函數(shù),為 Defferred 模塊提供支持,Defferred 模塊又為 Ajax 模塊的 promise
風(fēng)格提供支持,接下來很快就會分析到 Ajax模塊,在此之前,先看 Callbacks 模塊和 Defferred 模塊的實現(xiàn)。
源碼版本
本文閱讀的源碼為 zepto1.2.0
整體結(jié)構(gòu)
將 Callbacks 模塊的代碼精簡后,得到的結(jié)構(gòu)如下:
;(function($){
$.Callbacks = function(options) {
...
Callbacks = {
...
}
return Callbacks
}
})(Zepto)
其實就是向 zepto
對象上,添加了一個 Callbacks
函數(shù),這個是一個工廠函數(shù),調(diào)用這個函數(shù)返回的是一個對象,對象內(nèi)部包含了一系列的方法。
options
參數(shù)為一個對象,在源碼的內(nèi)部,作者已經(jīng)注釋了各個鍵值的含義。
// Option flags:
// - once: Callbacks fired at most one time.
// - memory: Remember the most recent context and arguments
// - stopOnFalse: Cease iterating over callback list
// - unique: Permit adding at most one instance of the same callback
once: 回調(diào)至多只能觸發(fā)一次
memory: 記下最近一次觸發(fā)的上下文及參數(shù)列表,再添加新回調(diào)的時候都立刻用這個上下文及參數(shù)立即執(zhí)行
stopOnFalse: 如果隊列中有回調(diào)返回 `false`,立即中止后續(xù)回調(diào)的執(zhí)行
unique: 同一個回調(diào)只能添加一次
全局變量
options = $.extend({}, options)
var memory, // Last fire value (for non-forgettable lists)
fired, // Flag to know if list was already fired
firing, // Flag to know if list is currently firing
firingStart, // First callback to fire (used internally by add and fireWith)
firingLength, // End of the loop when firing
firingIndex, // Index of currently firing callback (modified by remove if needed)
list = [], // Actual callback list
stack = !options.once && [], // Stack of fire calls for repeatable lists
-
options
: 構(gòu)造函數(shù)的配置,默認為空對象 -
list
: 回調(diào)函數(shù)列表 -
stack
: 列表可以重復(fù)觸發(fā)時,用來緩存觸發(fā)過程中未執(zhí)行的任務(wù)參數(shù),如果列表只能觸發(fā)一次,stack
永遠為false
-
memory
: 記憶模式下,會記住上一次觸發(fā)的上下文及參數(shù) -
fired
: 回調(diào)函數(shù)列表已經(jīng)觸發(fā)過 -
firing
: 回調(diào)函數(shù)列表正在觸發(fā) -
firingStart
: 回調(diào)任務(wù)的開始位置 -
firingIndex
: 當(dāng)前回調(diào)任務(wù)的索引 -
firingLength
:回調(diào)任務(wù)的長度
基礎(chǔ)用法
我用 jQuery
和 Zepto
的時間比較短,之前也沒有直接用過 Callbacks
模塊,單純看代碼不易理解它是怎樣工作的,在分析之前,先看一下簡單的 API
調(diào)用,可能會有助于理解。
var callbacks = $.Callbacks({memory: true})
var a = function(a) {
console.log('a ' + a)
}
var b = function(b) {
console.log('b ' + b)
}
var c = function(c) {
console.log('c ' + c)
}
callbacks.add(a).add(b).add(c) // 向隊列 list 中添加了三個回調(diào)
callbacks.remove(c) // 刪除 c
callbacks.fire('fire')
// 到這步輸出了 `a fire` `b fire` 沒有輸出 `c fire`
callbacks.lock()
callbacks.fire('fire after lock') // 到這步?jīng)]有任何輸出
// 繼續(xù)向隊列添加回調(diào),注意 `Callbacks` 的參數(shù)為 `memory: true`
callbacks.add(function(d) {
console.log('after lock')
})
// 輸出 `after lock`
callbacks.disable()
callbacks.add(function(e) {
console.log('after disable')
})
// 沒有任何輸出
上面的例子只是簡單的調(diào)用,也有了注釋,下面開始分析 API
內(nèi)部方法
fire
fire = function(data) {
memory = options.memory && data
fired = true
firingIndex = firingStart || 0
firingStart = 0
firingLength = list.length
firing = true
for ( ; list && firingIndex < firingLength ; ++firingIndex ) {
if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
memory = false
break
}
}
firing = false
if (list) {
if (stack) stack.length && fire(stack.shift())
else if (memory) list.length = 0
else Callbacks.disable()
}
}
Callbacks
模塊只有一個內(nèi)部方法 fire
,用來觸發(fā) list
中的回調(diào)執(zhí)行,這個方法是 Callbacks
模塊的核心。
變量初始化
memory = options.memory && data
fired = true
firingIndex = firingStart || 0
firingStart = 0
firingLength = list.length
firing = true
fire
只接收一個參數(shù) data
,這個內(nèi)部方法 fire
跟我們調(diào)用 API
所接收的參數(shù)不太一樣,這個 data
是一個數(shù)組,數(shù)組里面只有兩項,第一項是上下文對象,第二項是回調(diào)函數(shù)的參數(shù)數(shù)組。
如果 options.memory
為 true
,則將 data
,也即上下文對象和參數(shù)保存下來。
將 list
是否已經(jīng)觸發(fā)過的狀態(tài) fired
設(shè)置為 true
。
將當(dāng)前回調(diào)任務(wù)的索引值 firingIndex
指向回調(diào)任務(wù)的開始位置 firingStart
或者回調(diào)列表的開始位置。
將回調(diào)列表的開始位置 firingStart
設(shè)置為回調(diào)列表的開始位置。
將回調(diào)任務(wù)的長度 firingLength
設(shè)置為回調(diào)列表的長度。
將回調(diào)的開始狀態(tài) firing
設(shè)置為 true
執(zhí)行回調(diào)
for ( ; list && firingIndex < firingLength ; ++firingIndex ) {
if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
memory = false
break
}
}
firing = false
執(zhí)行回調(diào)的整體邏輯是遍歷回調(diào)列表,逐個執(zhí)行回調(diào)。
循環(huán)的條件是,列表存在,并且當(dāng)前回調(diào)任務(wù)的索引值 firingIndex
要比回調(diào)任務(wù)的長度要小,這個很容易理解,當(dāng)前的索引值都超出了任務(wù)的長度,就找不到任務(wù)執(zhí)行了。
list[firingIndex].apply(data[0], data[1])
就是從回調(diào)列表中找到對應(yīng)的任務(wù),綁定上下文對象,和傳入對應(yīng)的參數(shù),執(zhí)行任務(wù)。
如果回調(diào)執(zhí)行后顯式返回 false
, 并且 options.stopOnFalse
設(shè)置為 true
,則中止后續(xù)任務(wù)的執(zhí)行,并且清空 memory
的緩存。
回調(diào)任務(wù)執(zhí)行完畢后,將 firing
設(shè)置為 false
,表示當(dāng)前沒有正在執(zhí)行的任務(wù)。
檢測未執(zhí)行的回調(diào)及清理工作
if (list) {
if (stack) stack.length && fire(stack.shift())
else if (memory) list.length = 0
else Callbacks.disable()
}
列表任務(wù)執(zhí)行完畢后,先檢查 stack
中是否有沒有執(zhí)行的任務(wù),如果有,則將任務(wù)參數(shù)取出,調(diào)用 fire
函數(shù)執(zhí)行。后面會看到,stack
儲存的任務(wù)是 push
進去的,用 shift
取出,表明任務(wù)執(zhí)行的順序是先進先出。
memory
存在,則清空回調(diào)列表,用 list.length = 0
是清空列表的一個方法。在全局參數(shù)中,可以看到, stack
為 false
,只有一種情況,就是 options.once
為 true
的時候,表示任務(wù)只能執(zhí)行一次,所以要將列表清空。而 memory
為 true
,表示后面添加的任務(wù)還可以執(zhí)行,所以還必須保持 list
容器的存在,以便后續(xù)任務(wù)的添加和執(zhí)行。
其他情況直接調(diào)用 Callbacks.disable()
方法,禁用所有回調(diào)任務(wù)的添加和執(zhí)行。
.add()
add: function() {
if (list) {
var start = list.length,
add = function(args) {
$.each(args, function(_, arg){
if (typeof arg === "function") {
if (!options.unique || !Callbacks.has(arg)) list.push(arg)
}
else if (arg && arg.length && typeof arg !== 'string') add(arg)
})
}
add(arguments)
if (firing) firingLength = list.length
else if (memory) {
firingStart = start
fire(memory)
}
}
return this
},
start
為原來回調(diào)列表的長度。保存起來,是為了后面修正回調(diào)任務(wù)的開始位置時用。
內(nèi)部方法add
add = function(args) {
$.each(args, function(_, arg){
if (typeof arg === "function") {
if (!options.unique || !Callbacks.has(arg)) list.push(arg)
}
else if (arg && arg.length && typeof arg !== 'string') add(arg)
})
}
add
方法的作用是將回調(diào)函數(shù) push
進回調(diào)列表中。參數(shù) arguments
為數(shù)組或者偽數(shù)組。
用 $.each
方法來遍歷 args
,得到數(shù)組項 arg
,如果 arg
為 function
類型,則進行下一個判斷。
在下一個判斷中,如果 options.unique
不為 true
,即允許重復(fù)的回調(diào)函數(shù),或者原來的列表中不存在該回調(diào)函數(shù),則將回調(diào)函數(shù)存入回調(diào)列表中。
如果 arg
為數(shù)組或偽數(shù)組(通過 arg.length
是否存在判斷,并且排除掉 string
的情況),再次調(diào)用 add
函數(shù)分解。
修正回調(diào)任務(wù)控制變量
add(arguments)
if (firing) firingLength = list.length
else if (memory) {
firingStart = start
fire(memory)
}
調(diào)用 add
方法,向列表中添加回調(diào)函數(shù)。
如果回調(diào)任務(wù)正在執(zhí)行中,則修正回調(diào)任務(wù)的長度 firingLength
為當(dāng)前任務(wù)列表的長度,以便后續(xù)添加的回調(diào)函數(shù)可以執(zhí)行。
否則,如果為 memory
模式,則將執(zhí)行回調(diào)任務(wù)的開始位置設(shè)置為 start
,即原來列表的最后一位的下一位,也就是新添加進列表的第一位,然后調(diào)用 fire
,以緩存的上下文及參數(shù) memory
作為 fire
的參數(shù),立即執(zhí)行新添加的回調(diào)函數(shù)。
.remove()
remove: function() {
if (list) {
$.each(arguments, function(_, arg){
var index
while ((index = $.inArray(arg, list, index)) > -1) {
list.splice(index, 1)
// Handle firing indexes
if (firing) {
if (index <= firingLength) --firingLength
if (index <= firingIndex) --firingIndex
}
}
})
}
return this
},
刪除列表中指定的回調(diào)。
刪除回調(diào)函數(shù)
用 each
遍歷參數(shù)列表,在 each
遍歷里再有一層 while
循環(huán),循環(huán)的終止條件如下:
(index = $.inArray(arg, list, index)) > -1
$.inArray()
最終返回的是數(shù)組項在數(shù)組中的索引值,如果不在數(shù)組中,則返回 -1
,所以這個判斷是確定回調(diào)函數(shù)存在于列表中。關(guān)于 $.inArray
的分析,見《讀zepto源碼之工具函數(shù)》。
然后調(diào)用 splice
刪除 list
中對應(yīng)索引值的數(shù)組項,用 while
循環(huán)是確保列表中有重復(fù)的回調(diào)函數(shù)都會被刪除掉。
修正回調(diào)任務(wù)控制變量
if (firing) {
if (index <= firingLength) --firingLength
if (index <= firingIndex) --firingIndex
}
如果回調(diào)任務(wù)正在執(zhí)行中,因為回調(diào)列表的長度已經(jīng)有了變化,需要修正回調(diào)任務(wù)的控制參數(shù)。
如果 index <= firingLength
,即回調(diào)函數(shù)在當(dāng)前的回調(diào)任務(wù)中,將回調(diào)任務(wù)數(shù)減少 1
。
如果 index <= firingIndex
,即在正在執(zhí)行的回調(diào)函數(shù)前,將正在執(zhí)行函數(shù)的索引值減少 1
。
這樣做是防止回調(diào)函數(shù)執(zhí)行到最后時,沒有找到對應(yīng)的任務(wù)執(zhí)行。
.fireWith
fireWith: function(context, args) {
if (list && (!fired || stack)) {
args = args || []
args = [context, args.slice ? args.slice() : args]
if (firing) stack.push(args)
else fire(args)
}
return this
},
以指定回調(diào)函數(shù)的上下文的方式來觸發(fā)回調(diào)函數(shù)。
fireWith
接收兩個參數(shù),第一個參數(shù) context
為上下文對象,第二個 args
為參數(shù)列表。
fireWith
后續(xù)執(zhí)行的條件是列表存在并且回調(diào)列表沒有執(zhí)行過或者 stack
存在(可為空數(shù)組),這個要注意,后面講 disable
方法和 lock
方法區(qū)別的時候,這是一個很重要的判斷條件。
args = args || []
args = [context, args.slice ? args.slice() : args]
先將 args
不存在時,初始化為數(shù)組。
再重新組合成新的變量 args
,這個變量的第一項為上下文對象 context
,第二項為參數(shù)列表,調(diào)用 args.slice
是對數(shù)組進行拷貝,因為 memory
會儲存上一次執(zhí)行的上下文對象及參數(shù),應(yīng)該是怕外部對引用的更改的影響。
if (firing) stack.push(args)
else fire(args)
如果回調(diào)正處在觸發(fā)的狀態(tài),則將上下文對象和參數(shù)先儲存在 stack
中,從內(nèi)部函數(shù) fire
的分析中可以得知,回調(diào)函數(shù)執(zhí)行完畢后,會從 stack
中將 args
取出,再觸發(fā) fire
。
否則,觸發(fā) fire
,執(zhí)行回調(diào)函數(shù)列表中的回調(diào)函數(shù)。
add
和 remove
都要判斷 firing
的狀態(tài),來修正回調(diào)任務(wù)控制變量,fire
方法也要判斷 firing
,來判斷是否需要將 args
存入 stack
中,但是 javascript
是單線程的,照理應(yīng)該不會出現(xiàn)在觸發(fā)的同時 add
或者 remove
或者再調(diào)用 fire
的情況。
.fire()
fire: function() {
return Callbacks.fireWith(this, arguments)
},
fire
方法,用得最多,但是卻非常簡單,調(diào)用的是 fireWidth
方法,上下文對象是 this
。
.has()
has: function(fn) {
return !!(list && (fn ? $.inArray(fn, list) > -1 : list.length))
},
has
有兩個作用,如果有傳參時,用來查測所傳入的 fn
是否存在于回調(diào)列表中,如果沒有傳參時,用來檢測回調(diào)列表中是否已經(jīng)有了回調(diào)函數(shù)。
fn ? $.inArray(fn, list) > -1 : list.length
這個三元表達式前面的是判斷指定的 fn
是否存在于回調(diào)函數(shù)列表中,后面的,如果 list.length
大于 0
,則回調(diào)列表已經(jīng)存入了回調(diào)函數(shù)。
.empty()
empty: function() {
firingLength = list.length = 0
return this
},
empty
的作用是清空回調(diào)函數(shù)列表和正在執(zhí)行的任務(wù),但是 list
還存在,還可以向 list
中繼續(xù)添加回調(diào)函數(shù)。
.disable()
disable: function() {
list = stack = memory = undefined
return this
},
disable
是禁用回調(diào)函數(shù),實質(zhì)是將回調(diào)函數(shù)列表置為 undefined
,同時也將 stack
和 memory
置為 undefined
,調(diào)用 disable
后,add
、remove
、fire
、fireWith
等方法不再生效,這些方法的首要條件是 list
存在。
.disabled()
disabled: function() {
return !list
},
回調(diào)是否已經(jīng)被禁止,其實就是檢測 list
是否存在。
.lock()
lock: function() {
stack = undefined
if (!memory) Callbacks.disable()
return this
},
鎖定回調(diào)列表,其實是禁止 fire
和 fireWith
的執(zhí)行。
其實是將 stack
設(shè)置為 undefined
, memory
不存在時,調(diào)用的是 disable
方法,將整個列表清空。效果等同于禁用回調(diào)函數(shù)。fire
和 add
方法都不能再執(zhí)行。
.lock() 和 .disable() 的區(qū)別
為什么 memory
存在時,stack
為 undefined
就可以將列表的 fire
和 fireWith
禁用掉呢?在上文的 fireWith
中,我特別提到了 !fired || stack
這個判斷條件。在 stack
為 undefined
時,fireWith
的執(zhí)行條件看 fired
這個條件。如果回調(diào)列表已經(jīng)執(zhí)行過, fired
為 true
,fireWith
不會再執(zhí)行。如果回調(diào)列表沒有執(zhí)行過,memory
為 undefined
,會調(diào)用 disable
方法禁用列表,fireWith
也不能執(zhí)行。
所以,disable
和 lock
的區(qū)別主要是在 memory
模式下,回調(diào)函數(shù)觸發(fā)過后,lock
還可以調(diào)用 add
方法,向回調(diào)列表中添加回調(diào)函數(shù),添加完畢后會立刻用 memory
的上下文和參數(shù)觸發(fā)回調(diào)函數(shù)。
.locked()
locked: function() {
return !stack
},
回調(diào)列表是否被鎖定。
其實就是檢測 stack
是否存在。
.fired()
fired: function() {
return !!fired
}
回調(diào)列表是否已經(jīng)被觸發(fā)過。
回調(diào)列表觸發(fā)一次后 fired
就會變?yōu)?true
,用 !!
的目的是將 undefined
轉(zhuǎn)換為 false
返回。
系列文章
- 讀Zepto源碼之代碼結(jié)構(gòu)
- 讀 Zepto 源碼之內(nèi)部方法
- 讀Zepto源碼之工具函數(shù)
- 讀Zepto源碼之神奇的$
- 讀Zepto源碼之集合操作
- 讀Zepto源碼之集合元素查找
- 讀Zepto源碼之操作DOM
- 讀Zepto源碼之樣式操作
- 讀Zepto源碼之屬性操作
- 讀Zepto源碼之Event模塊
- 讀Zepto源碼之IE模塊
參考
License
最后,所有文章都會同步發(fā)送到微信公眾號上,歡迎關(guān)注,歡迎提意見:作者:對角另一面