发布订阅模式通过事件中心解耦发送者与接收者，核心为on、emit、off方法，实现事件的订阅、发布与取消，适用于组件通信、状态管理等场景。
发布订阅模式是一种经典的设计模式，适用于解耦事件的发送者和接收者。在 JavaScript 中实现发布订阅模式，核心是创建一个事件中心，允许对象订阅特定事件，并在事件被触发时通知所有订阅者。
定义事件中心
事件中心是发布订阅模式的核心，它负责管理事件的注册、触发和移除。你可以通过一个简单的对象来实现：
on(event, callback)：订阅事件，将回调函数添加到对应事件的队列中。emit(event, data)：发布事件，执行该事件下所有订阅的回调函数，并传入数据。
off(event, callback)：取消订阅，从事件队列中移除指定的回调函数。
示例代码：
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
}
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
使用示例
创建一个事件中心实例，然后让不同部分订阅和发布消息：
立即学习“Java免费学习笔记（深入）”；
睿拓智能网站系统-网上商城
下载
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
const eventBus = new EventEmitter();
// 订阅事件
eventBus.on('userLogin', user => {
console.log('欢迎 ' + user.name);
});
eventBus.on('userLogin', user => {
console.log('更新用户状态：' + user.status);
});
// 发布事件
eventBus.emit('userLogin', { name: 'Alice', status: 'online' });
输出结果：
欢迎 Alice 更新用户状态：online
支持取消订阅
为了避免内存泄漏或重复执行，可以移除不再需要的订阅：
function welcome(user) {
console.log('欢迎 ' + user.name);
}
eventBus.on('userLogin', welcome);
// 取消订阅
eventBus.off('userLogin', welcome);
这样，welcome 函数不会再被调用。
实际应用场景
组件通信：在前端框架中，父子组件或兄弟组件可通过事件中心通信。状态管理：全局状态变化时通知多个视图更新。
异步任务协调：某个异步操作完成后通知多个监听者。
基本上就这些。发布订阅模式在 JavaScript 中实现简单，却非常实用。只要掌握 on、emit、off 三个方法的逻辑，就能灵活运用在各种场景中。不复杂但容易忽略细节，比如重复订阅或忘记解绑。
