javascript如何实现发布订阅模式_它如何解耦组件之间的通信？

手写 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，而是判断什么时候不该用它。