GitHub地址:JavaScript EventEmitter
部落格地址:JavaScript EventEmitter
水平有限,歡迎批評指正
2個多月前把 Github 上的 eventemitter3 和 Node.js
下的事件模組 events 的原始碼抄了一遍,才終於對 JavaScript
事件有所瞭解。
上個週末花點時間根據之前看原始碼的理解自己用 ES6 實現了一個 eventemitter8,然後也釋出到 npm 上了,讓我比較意外的是才釋出兩天在沒有 readme
介紹,沒有任何宣傳的情況下居然有45個下載,我很好奇都是誰下載的,會不會用。我花了不少時間半抄半原創的一個 JavaScript
時間處理庫 now.js (npm
傳送門:now.js) ,在我大力宣傳的情況下,4個月的下載量才177。真是有心栽花花不開,無心插柳柳成蔭
!
eventemitter8
大部分是我根據看原始碼理解後寫出來的,有一些方法如listeners
,listenerCount
和 eventNames
一下子想不起來到底做什麼,回頭重查。測試用例不少是參考了 eventemitter3
,在此對 eventemitter3
的開發者們和 Node.js
事件模組的開發者們表示感謝!
下面來講講我對 JavaScript
事件的理解:
從上圖可以看出,JavaScript
事件最核心的包括事件監聽 (addListener)
、事件觸發 (emit)
、事件刪除 (removeListener)
。
事件監聽(addListener)
首先,監聽肯定要有監聽的目標,或者說是物件,那為了達到區分目標的目的,名字是不可少的,我們定義為 type
。
其次,監聽的目標一定要有某種動作,對應到 JavaScript
裡實際上就是某種方法,這裡定義為 fn
。
譬如可以監聽一個 type
為 add
,方法為某一個變數 a
值加1
的方法 fn = () => a + 1
的事件。如果我們還想監聽一個使變數 b
加2
的方法,我們第一反應可能是建立一個 type
為 add2
,方法 為 fn1 = () => b + 2
的事件。你可能會想,這太浪費了,我能不能只監聽一個名字,讓它執行多於一個方法的事件。當然是可以的。
那麼怎麼做呢?
很簡單,把監聽的方法放在一個陣列裡,遍歷陣列順序執行就可以了。以上例子變為 type
為 add
,方法為[fn, fn1]
。
如果要細分的話還可以分為可以無限次執行的事件 on
和 只允許執行一次的事件 once
(執行完後立即將事件刪除)。待後詳述。
事件觸發(emit)
單有事件監聽是不夠的,必須要有事件觸發才能算完成整個過程。emit
就是去觸發監聽的特定 type
對應的單個事件或者一系列事件。拿前面的例子來說單個事件就是去執行 fn
,一系列事件就是去遍歷執行 fn
和 fn1
。
事件刪除(removeListener)
嚴格意義上來講,事件監聽和事件觸發已經能完成整個過程。事件刪除可有可無。但很多時候,我們還是需要事件刪除的。比如前面講的只允許執行一次事件 once
,如果不提供刪除方法,很難保證你什麼時候會再次執行它。通常情況下,只要是不再需要的事件,我們都應該去刪除它。
核心部分講完,下面簡單的對 eventemitter8
的原始碼進行解析。
原始碼解析
全部原始碼:
const toString = Object.prototype.toString;
const isType = obj => toString.call(obj).slice(8, -1).toLowerCase();
const isArray = obj => Array.isArray(obj) || isType(obj) === `array`;
const isNullOrUndefined = obj => obj === null || obj === undefined;
const _addListener = function(type, fn, context, once) {
if (typeof fn !== `function`) {
throw new TypeError(`fn must be a function`);
}
fn.context = context;
fn.once = !!once;
const event = this._events[type];
// only one, let `this._events[type]` to be a function
if (isNullOrUndefined(event)) {
this._events[type] = fn;
} else if (typeof event === `function`) {
// already has one function, `this._events[type]` must be a function before
this._events[type] = [event, fn];
} else if (isArray(event)) {
// already has more than one function, just push
this._events[type].push(fn);
}
return this;
};
class EventEmitter {
constructor() {
if (this._events === undefined) {
this._events = Object.create(null);
}
}
addListener(type, fn, context) {
return _addListener.call(this, type, fn, context);
}
on(type, fn, context) {
return this.addListener(type, fn, context);
}
once(type, fn, context) {
return _addListener.call(this, type, fn, context, true);
}
emit(type, ...rest) {
if (isNullOrUndefined(type)) {
throw new Error(`emit must receive at lease one argument`);
}
const events = this._events[type];
if (isNullOrUndefined(events)) return false;
if (typeof events === `function`) {
events.call(events.context || null, rest);
if (events.once) {
this.removeListener(type, events);
}
} else if (isArray(events)) {
events.map(e => {
e.call(e.context || null, rest);
if (e.once) {
this.removeListener(type, e);
}
});
}
return true;
}
removeListener(type, fn) {
if (isNullOrUndefined(this._events)) return this;
// if type is undefined or null, nothing to do, just return this
if (isNullOrUndefined(type)) return this;
if (typeof fn !== `function`) {
throw new Error(`fn must be a function`);
}
const events = this._events[type];
if (typeof events === `function`) {
events === fn && delete this._events[type];
} else {
const findIndex = events.findIndex(e => e === fn);
if (findIndex === -1) return this;
// match the first one, shift faster than splice
if (findIndex === 0) {
events.shift();
} else {
events.splice(findIndex, 1);
}
// just left one listener, change Array to Function
if (events.length === 1) {
this._events[type] = events[0];
}
}
return this;
}
removeAllListeners(type) {
if (isNullOrUndefined(this._events)) return this;
// if not provide type, remove all
if (isNullOrUndefined(type)) this._events = Object.create(null);
const events = this._events[type];
if (!isNullOrUndefined(events)) {
// check if `type` is the last one
if (Object.keys(this._events).length === 1) {
this._events = Object.create(null);
} else {
delete this._events[type];
}
}
return this;
}
listeners(type) {
if (isNullOrUndefined(this._events)) return [];
const events = this._events[type];
// use `map` because we need to return a new array
return isNullOrUndefined(events) ? [] : (typeof events === `function` ? [events] : events.map(o => o));
}
listenerCount(type) {
if (isNullOrUndefined(this._events)) return 0;
const events = this._events[type];
return isNullOrUndefined(events) ? 0 : (typeof events === `function` ? 1 : events.length);
}
eventNames() {
if (isNullOrUndefined(this._events)) return [];
return Object.keys(this._events);
}
}
export default EventEmitter;
複製程式碼
程式碼很少,只有151行,因為寫的簡單版,且用的 ES6
,所以才這麼少;Node.js
的事件和 eventemitter3
可比這多且複雜不少,有興趣可自行深入研究。
const toString = Object.prototype.toString;
const isType = obj => toString.call(obj).slice(8, -1).toLowerCase();
const isArray = obj => Array.isArray(obj) || isType(obj) === `array`;
const isNullOrUndefined = obj => obj === null || obj === undefined;
複製程式碼
這4行就是一些工具函式,判斷所屬型別、判斷是否是 null
或者 undefined
。
constructor() {
if (isNullOrUndefined(this._events)) {
this._events = Object.create(null);
}
}
複製程式碼
建立了一個 EventEmitter
類,然後在建構函式裡初始化一個類的 _events
屬性,這個屬性不需要要繼承任何東西,所以用了 Object.create(null)
。當然這裡 isNullOrUndefined(this._events)
還去判斷了一下 this._events
是否為 undefined
或者 null
,如果是才需要建立。但這不是必要的,因為例項化一個 EventEmitter
都會呼叫建構函式,皆為初始狀態,this._events
應該是不可能已經定義了的,可去掉。
addListener(type, fn, context) {
return _addListener.call(this, type, fn, context);
}
on(type, fn, context) {
return this.addListener(type, fn, context);
}
once(type, fn, context) {
return _addListener.call(this, type, fn, context, true);
}
複製程式碼
接下來是三個方法 addListener
、on
、once
,其中 on
是 addListener
的別名,可執行多次。once
只能執行一次。
三個方法都用到了 _addListener
方法:
const _addListener = function(type, fn, context, once) {
if (typeof fn !== `function`) {
throw new TypeError(`fn must be a function`);
}
fn.context = context;
fn.once = !!once;
const event = this._events[type];
// only one, let `this._events[type]` to be a function
if (isNullOrUndefined(event)) {
this._events[type] = fn;
} else if (typeof event === `function`) {
// already has one function, `this._events[type]` must be a function before
this._events[type] = [event, fn];
} else if (isArray(event)) {
// already has more than one function, just push
this._events[type].push(fn);
}
return this;
};
複製程式碼
方法有四個引數,type
是監聽事件的名稱,fn
是監聽事件對應的方法,context
俗稱爸爸
,改變 this
指向的,也就是執行的主體。once
是一個布林型,用來標誌是否只執行一次。
首先判斷 fn
的型別,如果不是方法,丟擲一個型別錯誤。fn.context = context;fn.once = !!once
把執行主體和是否執行一次作為方法的屬性。const event = this._events[type]
把該對應 type
的所有已經監聽的方法存到變數 event
。
// only one, let `this._events[type]` to be a function
if (isNullOrUndefined(event)) {
this._events[type] = fn;
} else if (typeof event === `function`) {
// already has one function, `this._events[type]` must be a function before
this._events[type] = [event, fn];
} else if (isArray(event)) {
// already has more than one function, just push
this._events[type].push(fn);
}
return this;
複製程式碼
如果 type
本身沒有正在監聽任何方法,this._events[type] = fn
直接把監聽的方法 fn
賦給 type
屬性 ;如果正在監聽一個方法,則把要新增的 fn
和之前的方法變成一個含有2個元素的陣列 [event, fn]
,然後再賦給 type
屬性,如果正在監聽超過2個方法,直接 push
即可。最後返回 this
,也就是 EventEmitter
例項本身。
簡單來講不管是監聽多少方法,都放到陣列裡是沒必要像上面細分。但效能較差,只有一個方法時 key: fn
的效率比 key: [fn]
要高。
再回頭看看三個方法:
addListener(type, fn, context) {
return _addListener.call(this, type, fn, context);
}
on(type, fn, context) {
return this.addListener(type, fn, context);
}
once(type, fn, context) {
return _addListener.call(this, type, fn, context, true);
}
複製程式碼
addListener
需要用 call
來改變 this
指向,指到了類的例項。once
則多傳了一個標誌位 true
來標誌它只需要執行一次。這裡你會看到我在 addListener
並沒有傳 false
作為標誌位,主要是因為我懶,但並不會影響到程式的邏輯。因為前面的 fn.once = !!once
已經能很好的處理不傳值的情況。沒傳值 !!once
為 false
。
接下來講 emit
emit(type, ...rest) {
if (isNullOrUndefined(type)) {
throw new Error(`emit must receive at lease one argument`);
}
const events = this._events[type];
if (isNullOrUndefined(events)) return false;
if (typeof events === `function`) {
events.call(events.context || null, rest);
if (events.once) {
this.removeListener(type, events);
}
} else if (isArray(events)) {
events.map(e => {
e.call(e.context || null, rest);
if (e.once) {
this.removeListener(type, e);
}
});
}
return true;
}
複製程式碼
事件觸發需要指定具體的 type
否則直接丟擲錯誤。這個很容易理解,你都沒有指定名稱,我怎麼知道該去執行誰的事件。if (isNullOrUndefined(events)) return false
,如果 type
對應的方法是 undefined
或者 null
,直接返回 false
。因為壓根沒有對應 type
的方法可以執行。而 emit
需要知道是否被成功觸發。
接著判斷 evnts
是不是一個方法,如果是, events.call(events.context || null, rest)
執行該方法,如果指定了執行主體,用 call
改變 this
的指向指向 events.context
主體,否則指向 null
,全域性環境。對於瀏覽器環境來說就是 window
。差點忘了 rest
,rest
是方法執行時的其他引數變數,可以不傳,也可以為一個或多個。執行結束後判斷 events.once
,如果為 true
,就用 removeListener
移除該監聽事件。
如果 evnts
是陣列,邏輯一樣,只是需要遍歷陣列去執行所有的監聽方法。
成功執行結束後返回 true
。
removeListener(type, fn) {
if (isNullOrUndefined(this._events)) return this;
// if type is undefined or null, nothing to do, just return this
if (isNullOrUndefined(type)) return this;
if (typeof fn !== `function`) {
throw new Error(`fn must be a function`);
}
const events = this._events[type];
if (typeof events === `function`) {
events === fn && delete this._events[type];
} else {
const findIndex = events.findIndex(e => e === fn);
if (findIndex === -1) return this;
// match the first one, shift faster than splice
if (findIndex === 0) {
events.shift();
} else {
events.splice(findIndex, 1);
}
// just left one listener, change Array to Function
if (events.length === 1) {
this._events[type] = events[0];
}
}
return this;
}
複製程式碼
removeListener
接收一個事件名稱 type
和一個將要被移除的方法 fn
。if (isNullOrUndefined(this._events)) return this
這裡表示如果 EventEmitter
例項本身的 _events
為 null
或者 undefined
的話,沒有任何事件監聽,直接返回 this
。
if (isNullOrUndefined(type)) return this
如果沒有提供事件名稱,也直接返回 this
。
if (typeof fn !== `function`) {
throw new Error(`fn must be a function`);
}
複製程式碼
fn
如果不是一個方法,直接丟擲錯誤,很好理解。
接著判斷 type
對應的 events
是不是一個方法,是,並且 events === fn
說明 type
對應的方法有且僅有一個,等於我們指定要刪除的方法。這個時候 delete this._events[type]
直接刪除掉 this._events
物件裡 type
即可。
所有的 type
對應的方法都被移除後。想一想 this._events[type] = undefined
和 delete this._events[type]
會有什麼不同?
差異是很大的,this._events[type] = undefined
僅僅是將 this._events
物件裡的 type
屬性賦值為 undefined
,type
這一屬性依然佔用記憶體空間,但其實已經沒什麼用了。如果這樣的 type
一多,有可能造成記憶體洩漏。delete this._events[type]
則直接刪除,不佔記憶體空間。前者也是 Node.js
事件模組和 eventemitter3
早期實現的做法。
如果 events
是陣列,這裡我沒有用 isArray
進行判斷,而是直接用一個 else
,原因是 this._events[type]
的輸入限制在 on
或者 once
中,而它們已經限制了 this._events[type]
只能是方法組成的陣列或者是一個方法,最多加上不小心或者人為賦成 undefined
或 null
的情況,但這個情況我們也在前面判斷過了。
因為 isArray
這個工具方法其實執行效率是不高的,為了追求一些效率,在不影響執行邏輯情況下可以不用 isArray
。而且 typeof events === `function`
用 typeof
判斷方法也比 isArray
的效率要高,這也是為什麼不先判斷是否是陣列的原因。用 typeof
去判斷一個方法也比 Object.prototype.toSting.call(events) === `[object Function]
效率要高。但陣列不能用 typeof
進行判斷,因為返回的是 object
, 這眾所周知。雖然如此,在我面試過的很多人中,仍然有很多人不知道。。。
const findIndex = events.findIndex(e => e === fn)
此處用 ES6
的陣列方法 findIndex
直接去查詢 fn
在 events
中的索引。如果 findIndex === -1
說明我們沒有找到要刪除的 fn
,直接返回 this
就好。如果 findIndex === 0
,是陣列第一個元素,shift
剔除,否則用 splice
剔除。因為 shift
比 splice
效率高。
findIndex
的效率其實沒有 for
迴圈去查詢的高,所以 eventemitter8
的效率在我沒有做 benchmark
之前我就知道肯定會比 eventemitter3
效率要低不少。不那麼追求執行效率時當然是用最懶的方式來寫最爽。所謂的懶即正義
。。。
最後還得判斷移除 fn
後 events
剩餘的數量,如果只有一個,基於之前要做的優化,this._events[type] = events[0]
把含有一個元素的陣列變成一個方法,降維打擊一下。。。
最後的最後 return this
返回自身,鏈式呼叫還能用得上。
removeAllListeners(type) {
if (isNullOrUndefined(this._events)) return this;
// if not provide type, remove all
if (isNullOrUndefined(type)) this._events = Object.create(null);
const events = this._events[type];
if (!isNullOrUndefined(events)) {
// check if type is the last one
if (Object.keys(this._events).length === 1) {
this._events = Object.create(null);
} else {
delete this._events[type];
}
}
return this;
}
複製程式碼
removeAllListeners
指的是要刪除一個 type
對應的所有方法。引數 type
是可選的,如果未指定 type
,預設把所有的監聽事件刪除,直接 this._events = Object.create(null)
操作即可,跟初始化 EventEmitter
類一樣。
如果 events
既不是 null
且不是 undefined
說明有可刪除的 type
,先用 Object.keys(this._events).length === 1
判斷是不是最後一個 type
了,如果是,直接初始化 this._events = Object.create(null)
,否則 delete this._events[type]
直接刪除 type
屬性,一步到位。
最後返回 this
。
到目前為止,所有的核心功能已經講完。
listeners(type) {
if (isNullOrUndefined(this._events)) return [];
const events = this._events[type];
// use `map` because we need to return a new array
return isNullOrUndefined(events) ? [] : (typeof events === `function` ? [events] : events.map(o => o));
}
listenerCount(type) {
if (isNullOrUndefined(this._events)) return 0;
const events = this._events[type];
return isNullOrUndefined(events) ? 0 : (typeof events === `function` ? 1 : events.length);
}
eventNames() {
if (isNullOrUndefined(this._events)) return [];
return Object.keys(this._events);
}
複製程式碼
listeners
返回的是 type
對應的所有方法。結果都是一個陣列,如果沒有,返回空陣列;如果只有一個,把它的方法放到一個陣列中返回;如果本來就是一個陣列,map
返回。之所以用 map
返回而不是直接 return this._events[type]
是因為 map
返回一個新的陣列,是深度複製,修改陣列中的值不會影響到原陣列。this._events[type]
則返回原陣列的一個引用,是淺度複製,稍不小心改變值會影響到原陣列。造成這個差異的底層原因是陣列是一個引用型別,淺度複製只是指標拷貝。這可以單獨寫一篇文章,不展開了。
listenerCount
返回的是 type
對應的方法的個數,程式碼一眼就明白,不多說。
eventNames
這個返回的是所有 type
組成的陣列,沒有返回空陣列,否則用 Object.keys(this._events)
直接返回。
最後的最後,export default EventEmitter
把 EventEmitter
匯出。
結語
我是先看了兩個庫才知道怎麼寫的,其實最好的學習方法是知道 EventEmitter
是幹什麼用的以後自己動手寫,寫完以後再和那些庫進行對比,找出差距,修正再修正。
但也不是說先看再寫沒有收穫,至少比只看不寫和看都沒看的有收穫不是。。。
水平有限,程式碼錯漏或者文章講不清楚之處在所難免,歡迎大家批評指正。