1. 发布订阅在 JavaScript 工程中的定位
1.1 发布者与订阅者的解耦原理
发布-订阅模式在现代前端与后端 JavaScript 应用中提供了一种典型的解耦通信方案。通过将事件的产生者与处理者分离，组件之间不直接引用彼此的实现细节，从而实现低耦合的协作关系。
在这一模式里，事件名作为路由，订阅者注册对某个事件的回调，而发布者只负责通过触发这个事件来通知所有已订阅者。这样的结构使得功能可以独立演进，便于测试和扩展。
1.2 事件名与监听器的组织方式
事件名用于区分不同的主题，同一对象可以对多种事件进行监听，每个事件都有自己的回调数组。为了避免混淆，通常将事件名与对应的监听器集合分开管理。
该模式支持多播监听、取消订阅以及一次性监听等扩展，一次性监听（once）在触发后自动移除，避免长期积累无用回调导致的内存压力。
2. 基于 EventEmitter 的核心原理
2.1 事件映射与注册机制
EventEmitter 的核心是一个事件映射结构，它将事件名映射到一个回调函数数组。注册一个监听器时，系统会把回调推入对应事件名的数组。
当有新的事件触发时，emit 会遍历该事件名下的回调列表，按顺序逐个执行。这样就实现了同一事件对所有订阅者的广播。
class EventEmitter {constructor() {this._events = Object.create(null);}on(event, listener) {if (!this._events[event]) this._events[event] = [];this._events[event].push(listener);}emit(event, ...args) {const listeners = this._events[event];if (!listeners) return false;for (const l of listeners) l(...args);return true;}
}
2.2 事件触发与错误处理
在大多数实现中，emit 的回调通常是同步执行，意味着回调在同一执行栈内依次执行完毕后再继续后续逻辑。若某些场景需要异步化，可以在回调内部切换到微任务或宏任务。
此外，进行错误处理时，很多实现会对 'error' 事件进行特殊处理，如果没有监听该错误事件，直接抛出异常可能导致程序中断，因此错误事件的可用性是健壮性设计的一部分。
3. 实现细节与 API 设计
3.1 基本 API：on/emit/off/once
实现中的常见 API 包括 on（或 addListener）用于注册、emit用于触发、off（或 removeListener）用于移除，以及 once实现一次性监听。良好的 API 设计应支持链式调用与简洁的错误处理。
为了防止重复注册和内存泄漏，通常还会提供 removeAllListeners 或最大监听数的控制逻辑，以避免无限制的监听导致内存持续增长。
class EventEmitter {constructor() {this._events = new Map();}on(event, listener) {if (!this._events.has(event)) this._events.set(event, []);this._events.get(event).push(listener);return this;}once(event, listener) {const wrapper = (...args) => {listener(...args);this.off(event, wrapper);};this.on(event, wrapper);return this;}off(event, listener) {const arr = this._events.get(event);if (!arr) return this;const idx = arr.indexOf(listener);if (idx !== -1) arr.splice(idx, 1);if (!arr.length) this._events.delete(event);return this;}emit(event, ...args) {const arr = this._events.get(event);if (!arr) return false;for (const l of [...arr]) l(...args);return true;}removeAllListeners(event) {if (typeof event === 'undefined') this._events.clear();else this._events.delete(event);return this;}
}
3.2 一次性监听、手动移除与内存防泄漏
为了避免内存泄漏，一次性监听（once）能够自动移除回调，并且在大规模事件系统中，程序员应显式调用 removeAllListeners 或按事件清理，以确保闲置监听不会长期驻留。
在高并发场景下，监听器的执行顺序性也需要注意，尽量避免在回调中进行高成本操作，以免阻塞后续事件的处理。
4. 实践示例：一个简单的 EventEmitter 实现
4.1 核心类与数据结构
下面给出一个简化但功能完备的实现，包含 on、once、off、emit、removeAllListeners 等核心能力，便于在浏览器端或 Node.js 环境复用。
该实现使用 Map 来存储事件与监听数组，具备较好的性能与可读性。
// 简化版 EventEmitter 的使用示例
class EventEmitter {constructor() {this._events = new Map();}on(event, listener) {if (!this._events.has(event)) this._events.set(event, []);this._events.get(event).push(listener);return this;}once(event, listener) {const wrapper = (...args) => {listener(...args);this.off(event, wrapper);};this.on(event, wrapper);return this;}off(event, listener) {const arr = this._events.get(event);if (!arr) return this;const idx = arr.indexOf(listener);if (idx !== -1) arr.splice(idx, 1);if (arr.length === 0) this._events.delete(event);return this;}emit(event, ...args) {const arr = this._events.get(event);if (!arr) return false;// 复制一份以防监听器在执行中修改集合for (const listener of [...arr]) listener(...args);return true;}removeAllListeners(event) {if (typeof event === 'undefined') {this._events.clear();} else {this._events.delete(event);}return this;}
}// 使用示例
const emitter = new EventEmitter();
function onData(payload) {console.log('收到数据：', payload);
}
emitter.on('data', onData);
emitter.emit('data', { x: 1, y: 2 });
emitter.off('data', onData);
emitter.emit('data', { x: 3, y: 4 }); // 不再触发回调
4.2 使用与扩展场景：订阅、取消订阅与一次性事件
一个典型的使用场景是组件间解耦通信，例如一个数据源模块通过 emit 通知 UI 组件数据更新，UI 组件通过 on 注册回调来渲染。
在复杂应用中，一次性事件（once）常用于初始化阶段或一次性确认的操作，例如“初始化完成”事件，确保回调只执行一次，避免重复处理。
// once 的实际使用
emitter.once('ready', () => {console.log('应用初始化完成');
});
emitter.emit('ready');
emitter.emit('ready'); // 不会再次输出
