发布订阅模式通过事件中心实现发布者与订阅者完全解耦，核心是维护事件名到回调数组的映射，支持on、emit、off操作；而观察者模式中被观察者直接持有观察者列表，耦合度更高。
JavaScript 中的发布订阅模式（Pub/Sub）是一种松耦合的事件通信机制，核心是通过一个“事件中心”来中介发布者和订阅者，双方互不持有对方引用。它和观察者模式（Observer Pattern）表面相似，但设计意图、结构关系和适用场景有本质区别。
如何用 JavaScript 实现一个简易发布订阅系统
关键在于维护一个事件映射表（event map），支持注册（on）、触发（emit）、取消（off）三个基本操作：
用对象或 Map 存储事件名 → 回调函数数组的映射 on(event, callback)：把回调推入对应事件的数组 emit(event, …args)：遍历该事件的所有回调并执行 off(event, callback?)：可清除全部或指定回调
示例代码：
class EventBus { 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) { if (!callback) { delete this.events[event]; return; } const list = this.events[event]; if (list) { const index = list.indexOf(callback); if (index > -1) list.splice(index, 1); } }}// 使用const bus = new EventBus();bus.on('user:login', (user) => console.log('欢迎', user.name));bus.emit('user:login', { name: '张三' });
发布订阅 vs 观察者模式：核心区别在哪
二者都解决“一对多通知”，但角色关系与依赖方式不同：
立即学习“Java免费学习笔记（深入）”；
观察者模式中，Subject（被观察者）直接持有 Observer（观察者）列表，Subject 负责添加、通知、移除 Observer；Observer 需主动订阅 Subject 实例 发布订阅中，Publisher 和 Subscriber 都只依赖 Event Bus（中间件），彼此完全解耦；没有直接引用，甚至可以跨模块、跨文件、跨生命周期存在 观察者模式是“对象内聚”的设计，常用于 UI 组件更新（如 Vue2 的响应式）；发布订阅更偏向“消息总线”，适合应用级事件通信（如路由切换、登录状态广播）
实际开发中怎么选
看耦合程度和控制权归属：
组件内部状态变化需通知几个固定子组件？→ 用观察者（或现代框架的响应式 API，如 Vue3 的 effect / React 的 useState + useEffect） 多个不相关模块需要响应同一业务事件（比如“用户登出”要清缓存、关 WebSocket、跳登录页）？→ 用发布订阅，避免互相 import 或全局变量 需要异步、延迟、过滤、中间件（如日志、权限校验）？→ 可在 EventBus 上扩展，而原生观察者模式很难自然支持
基本上就这些。发布订阅不是银弹，但它是组织大型前端项目事件流的实用工具；理解它和观察者模式的区别，能帮你更准确地做架构决策。
以上就是javascript如何实现发布订阅_它与观察者模式有何不同的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543340.html
微信扫一扫 
支付宝扫一扫 
