发布订阅模式通过事件中心实现组件间解耦，支持on、emit、off和once方法，适用于跨组件通信与异步通知，需注意及时取消订阅以避免内存泄漏。
发布订阅模式是一种在JavaScript中广泛使用的通信机制，特别适用于解耦组件或模块之间的依赖关系。它允许对象（称为“订阅者”）监听某个事件（由“发布者”触发），而无需彼此直接引用。这种模式在前端开发中常用于状态管理、事件总线、跨组件通信等场景。
基本概念
发布订阅模式包含三个核心角色：
事件中心（Event Bus）：负责维护事件列表，提供订阅、取消订阅和触发事件的接口。 发布者（Publisher）强>：当某个事件发生时，向事件中心发送通知。 订阅者（Subscriber）：提前注册对某个事件的兴趣，并提供回调函数处理该事件。
简单实现一个事件中心
我们可以用一个简单的JavaScript类来实现发布订阅模式：
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); } } // 只监听一次 once(event, callback) { const wrapper = (data) => { callback(data); this.off(event, wrapper); }; this.on(event, wrapper); }}
使用示例
下面是一个实际使用该事件中心的例子：
立即学习“Java免费学习笔记（深入）”；
// 创建事件中心实例const eventBus = new EventEmitter();// 订阅用户登录事件eventBus.on('userLogin', (user) => { console.log(`欢迎 ${user.name} 登录系统`);});eventBus.on('userLogin', (user) => { console.log(`当前用户ID: ${user.id}`);});// 某处触发登录事件eventBus.emit('userLogin', { id: 1, name: 'Alice' });// 输出：// 欢迎 Alice 登录系统// 当前用户ID: 1
也可以使用 once 方法监听只执行一次的事件：
eventBus.once('appInitialized', () => { console.log('应用初始化完成，仅提示一次');});eventBus.emit('appInitialized'); // 触发一次eventBus.emit('appInitialized'); // 不再响应
应用场景与优势
发布订阅模式适用于以下场景：
跨层级组件通信（如Vue或React中的全局事件总线） 异步任务完成后的通知（如数据加载完毕） 插件系统中各模块间的松耦合交互
它的主要优势在于解耦：发布者不需要知道谁是订阅者，订阅者也不关心谁发布了事件，只要约定好事件名即可协作。这提升了代码的可维护性和扩展性。
基本上就这些。不复杂但容易忽略的是记得清理无用的订阅，避免内存泄漏。特别是在单页应用中，及时调用 off 移除监听是非常必要的。
以上就是JavaScript实现发布订阅模式_javascript设计模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534410.html
微信扫一扫 
支付宝扫一扫 
