溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript中EventEmitter的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Event emitter 聽起來只是觸發一個事件，這個事件任何東西都能監聽。
想象一下這樣的場景，在你的異步代碼中，去“呼叫”一些事件的發生，以及讓你其他部分都要聽到你的“呼叫”并且注冊他們的想法。
為了不同的目的，對于 Event Emitter 模式有大量不同的實現，但是基本的想法是為了給一個框架提供事件的管理以及能夠去訂閱他們。
在這里，我們的目標創建屬于我們自己的 Event Emitter 去理解背后的秘密。所以，讓我們看一下下面的代碼是怎么工作的。
let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h2 = document.querySelector("h2");
button.addEventListener("click", () => {
emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
h2.innerHTML = `Your name is: ${data.name}`;
});讓我們開始。
class EventEmitter {
constructor() {
this.events = {};
}
}我們先創建一個 EventEmiiter 類以及初始化 events 空對象屬性。這個 events 屬性的目的是為了存儲我們的事件集合，這個 events 對象使用事件名當做 key，用訂閱者集合當做 value。（可以把每個訂閱者看作是一個函數）。
subscribe(eventName, fn) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(fn);
}這個訂閱函數獲取事件名稱，在我們之前的例子中，它是 "event:name-changed" 以及傳入一個回調，當有人調用 emit（或尖叫）事件的時候調用回調。
在 JavaScript 函數的優點之一是函數是第一對象，所以我們能像之前我們的訂閱方法一樣，通過函數作為另一個函數的參數。
如果未注冊這個事件，我們需要在第一次為它設置一個初始值，事件名稱作為 key 以及初始化一個空數組賦值給它，然后我們將函數放入這個數組，以便我們想通過 emit 去調用這個事件。
emit(eventName, data) {
const event = this.events[eventName];
if (event) {
event.forEach(fn => {
fn.call(null, data);
});
}
}這個調用函數接受事件名，這個事件名是我們想“呼叫”的名稱，以及我們想傳遞給這個事件的數據。如果在我們的 events 中存在這個事件，我們將帶上數據循環調用所有訂閱的方法。
使用上面的代碼能做我們所說的全部的事情。但我們仍然有一個問題。當我們不再需要它們的時候，我們需要一種方法來取消注冊這些訂閱，因為如果你不這樣做，將造成內存泄漏。
讓我們來解決這個問題，通過在訂閱函數中返回一個取消注冊的方法。
subscribe(eventName, fn) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(fn);
return () => {
this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
}
}因為 JavaScript 函數是第一對象，你能在一個函數中返回一個函數。因此現在我們能調用這個取消注冊函數，如下：
let unsubscribe = emitter.subscribe("event:name-changed", data => console.log(data));
unsubscribe();當我們調用取消注冊函數的時候，我們刪除的功能依賴于對訂閱函數集合的篩選方法（Array filter）。
和內存泄露說再見！??
你能運行這份代碼，所有代碼都在這里。
html代碼
<!DOCTYPE html> <html> <head> <script src="script.js"></script> </head> <body> <input type="text"> <h2></h2> <button>Change name</button> </body> </html>
js代碼
class EventEmitter {
constructor() {
this.events = {};
}
emit(eventName, data) {
const event = this.events[eventName];
if (event) {
event.forEach(fn => {
fn.call(null, data);
});
}
}
subscribe(eventName, fn) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(fn);
return () => {
this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
}
}
}
document.addEventListener("DOMContentLoaded", function (event) {
let input = document.querySelector('input[type="text"]');
let button = document.querySelector('button');
let h2 = document.querySelector('h2');
button.addEventListener('click', () => {
emitter.emit('event:name-changed', { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe('event:name-changed', data => {
h2.innerHTML = `Your name is: ${data.name}`;
});
});關于“JavaScript中EventEmitter的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
