手写 EventEmitter 的核心是实现事件存储、触发和取消，需支持多回调、参数透传与精准移除；其适用场景限于插件系统或工具库，而非框架内组件通信。
JavaScript 的发布订阅模式本质是用一个中央事件总线替代直接调用，组件只跟这个总线通信，彼此完全不知道对方存在。 它不是“自动解耦”，而是靠约定和手动管理实现解耦——写错地方或漏掉清理，照样产生内存泄漏和逻辑混乱。
如何手写一个最小可用的 EventEmitter
核心就三件事：存订阅者（回调）、触发通知、取消订阅。不需要第三方库，50 行内能写清逻辑。
关键点：
-
on要支持同一事件注册多个回调，不能覆盖 -
emit传参要透传，不限数量和类型 -
off必须能精准移除指定回调，不能误删其他同名函数 - 避免重复绑定：同一个函数多次
on同一事件，off一次就得全清
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback);
}
emit(event, ...args) {
const callbacks = this.events[event];
if (callbacks && callbacks.length) {
callbacks.forEach(cb => cb(...args));
}
}
off(event, callback) {
const callbacks = this.events[event];
if (callbacks) {
this.events[event] = callbacks.filter(cb => cb !== callback);
}
}
}
Vue/React 中为什么不用手写 EventBus？
因为框架层已提供更安全、更语义化的替代方案，强行用全局 EventEmitter 反而破坏数据流规范。
立即学习“Java免费学习笔记（深入）”；
常见误用场景与替代方式：
- 父子组件通信 → 用
props/emit（Vue）或props/callback（React） - 跨多层组件 → Vue 用
provide/inject，React 用Context - 状态共享 → 用
Pinia（Vue）或Redux/Zustand（React），它们内部可能用发布订阅，但对外暴露的是状态读写接口 - 仅需一次通知 → 用
Promise或async/await更直观，不引入事件生命周期管理负担
手写 EventEmitter 真正适用的场景只剩：插件系统、低耦合模块集成、或框架外的纯 JS 工具库（如图表库暴露 on('click')）。
最容易被忽略的内存泄漏点
订阅者没及时取消，导致组件卸载后回调仍驻留内存，下次 emit 时执行已销毁组件的方法，报 Cannot read property 'xxx' of null。
典型错误写法：
mounted() {
eventBus.on('data-updated', this.handleUpdate);
}
正确做法必须配对 off：
- Vue 2：
beforeDestroy钩子中调用eventBus.off('data-updated', this.handleUpdate) - Vue 3：
onBeforeUnmount中清理 - React 函数组件：在
useEffect的返回函数中调用off
更稳妥的方式是封装一个带自动清理的 useEvent Hook 或 useEventBus Composable，把绑定和解绑收口到一处。
发布订阅不是银弹。它把“谁调用谁”变成“谁发谁收”，但代价是调用链不可追踪、调试困难、容易失控。真正难的不是写一个 on/emit/off，而是判断什么时候不该用它。
