事件发布订阅模式通过事件中心实现对象间松耦合通信，包含发布者、订阅者和事件中心三个角色；JavaScript中可借助EventEmitter类实现subscribe、publish和unsubscribe方法；该模式广泛应用于DOM事件、跨组件通信和状态管理，提升代码解耦与可维护性。
JavaScript中的事件发布订阅模式，是一种实现对象间松耦合通信的经典设计模式。它通过引入一个中间角色——事件中心，让消息的发送方（发布者）和接收方（订阅者）无需直接引用对方，就能完成信息传递。这种模式在前端组件通信、状态管理以及异步任务处理中非常实用。
核心概念与角色分工
理解这个模式的关键是弄清三个基本角色：
- 事件中心（Event Center）：也叫消息代理或调度中心，负责维护所有事件的订阅列表，并在事件被触发时通知所有订阅者。
- 订阅者（Subscriber）：对特定事件感兴趣的模块或函数，它向事件中心注册自己的回调函数，声明“我想监听某个事件”。
- 发布者（Publisher）：当某些条件满足或状态改变时，它向事件中心“发布”一个事件，但并不关心谁在监听，也不直接调用任何订阅者的代码。
一个简易的实现示例
下面是一个基于JavaScript类的简单实现，包含了订阅、发布和取消订阅的核心功能：
// 定义一个事件中心类 class EventEmitter { constructor() { // 使用对象存储不同事件名对应的回调函数数组 this.events = {}; } // 订阅事件 subscribe(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); // 返回一个取消订阅的方法，便于后续清理 return () => { this.unsubscribe(event, callback); }; } // 发布事件 publish(event, data) { if (this.events[event]) { this.events[event].forEach(callback => callback(data)); } } // 取消订阅 unsubscribe(event, callback) { if (this.events[event]) { this.events[event] = this.events[event].filter(cb => cb !== callback); } } } // 使用示例 const eventBus = new EventEmitter(); // 订阅 "userLogin" 事件 const unSubscribe = eventBus.subscribe('userLogin', (userInfo) => { console.log('欢迎用户：', userInfo.name); }); // 再订阅一次，可以有多个响应 eventBus.subscribe('userLogin', () => { console.log('更新页面状态'); }); // 发布 "userLogin" 事件 eventBus.publish('userLogin', { name: 'Alice' }); // 控制台输出： // 欢迎用户： Alice // 更新页面状态
实际应用场景
这种模式在日常开发中随处可见：
立即学习“Java免费学习笔记（深入）”；
- DOM事件系统本身就是典型应用，
addEventListener就是订阅，用户操作是发布，removeEventListener用于取消订阅，防止内存泄漏。 - 在Vue等框架中，通过一个全局的
$bus实例实现跨组件通信。 - 在复杂应用中解耦业务逻辑，比如数据加载完成后自动通知UI组件刷新，而数据模块无需知道UI的存在。
