溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 是干什么用的以后自己動手寫，寫完以后再和那些庫進行對比，找出差距，修正再修正。
但也不是說先看再寫沒有收獲，至少比只看不寫和看都沒看的有收獲不是。。。
水平有限，代碼錯漏或者文章講不清楚之處在所難免，歡迎大家批評指正。
推薦閱讀：
now.js:
https://github.com/hongmaoxiao/now
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
