网络编程 发布日期：2024/11/16 浏览次数：1
let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h1 = document.querySelector("h1");
button.addEventListener("click", () => {
emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
h1.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）。
和内存泄露说再见！"htmlcode">
<!DOCTYPE html> <html> <head> <script src="/UploadFiles/2021-04-02/script.js">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 h1 = document.querySelector('h1'); button.addEventListener('click', () => { emitter.emit('event:name-changed', { name: input.value }); }); let emitter = new EventEmitter(); emitter.subscribe('event:name-changed', data => { h1.innerHTML = `Your name is: ${data.name}`; }); });注：这份代码可能需要翻墙或者特别慢，所以我放到了 上，大家可以下载EventEmitter-jb51.rar。
原文出自：https://medium.com/@NetanelBasal/javascript-the-magic-behind-event-emitter-cce3abcbcef9#.nzgbagnxe