观察者模式通过Subject维护Observer列表并直接通知更新，Pub/Sub则借助事件总线实现完全解耦的事件通信；二者在耦合度、通信方式、生命周期管理和适用场景上存在本质区别。
观察者模式的 JavaScript 实现
观察者模式（Observer Pattern）是一种行为型设计模式，核心是让一个对象（被观察者/Subject）维护一组依赖它的对象（观察者/Observer），当被观察者状态变化时，自动通知所有观察者更新。
基础实现如下：
被观察者（Subject）
class Subject { constructor() { this.observers = []; } // 添加观察者 addObserver(observer) { if (typeof observer.update === 'function') { this.observers.push(observer); } } // 移除观察者 removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } // 通知所有观察者 notify(data) { this.observers.forEach(observer => observer.update(data)); }}
观察者（Observer）
立即学习“Java免费学习笔记（深入）”；
class Observer { constructor(name) { this.name = name; } update(data) { console.log(`${this.name} 收到更新：`, data); }}
使用示例：
const subject = new Subject();const o1 = new Observer('UI组件');const o2 = new Observer('日志服务');subject.addObserver(o1);subject.addObserver(o2);subject.notify({ status: 'loading' }); // 两者都会收到
发布-订阅模式（Pub/Sub）的实现
发布-订阅是观察者模式的松耦合变体：不直接持有观察者引用，而是通过一个中间调度中心（事件总线）进行消息分发。发布者和订阅者完全解耦，甚至无需知道彼此存在。
简易事件总线实现：
class EventBus { constructor() { this.events = {}; } // 订阅事件 on(event, callback) { if (!this.events[event]) this.events[event] = []; this.events[event].push(callback); } // 发布事件 emit(event, data) { const callbacks = this.events[event]; if (callbacks && callbacks.length) { callbacks.forEach(cb => cb(data)); } } // 取消订阅 off(event, callback) { if (this.events[event]) { this.events[event] = this.events[event].filter(cb => cb !== callback); } }}// 使用const bus = new EventBus();bus.on('user:login', (user) => console.log('欢迎', user.name));bus.on('user:logout', () => console.log('已登出'));bus.emit('user:login', { name: '张三' });
二者核心区别
耦合程度不同：观察者模式中，Subject 必须显式管理 Observer 实例，存在直接引用；Pub/Sub 中发布者与订阅者仅依赖事件总线，无直接关联。 通信方式不同：观察者是“推”模型（Subject 主动调用 observer.update()）；Pub/Sub 可支持“推”或“拉”，且常按事件类型（字符串名）路由，支持一对多、多对多、条件过滤等扩展。 生命周期管理不同：观察者需手动添加/移除，易内存泄漏；Pub/Sub 通常提供 off 方法，但更依赖开发者主动清理，否则监听器可能滞留。 适用场景不同：观察者适合对象间强关联、结构清晰的场景（如 MVC 中 View 观察 Model）；Pub/Sub 更适合大型应用中跨模块、异步、解耦通信（如前端框架中的全局事件、微前端通信）。
实际开发中的选择建议
用 观察者模式 当你控制两端代码、关系稳定、需要同步响应（比如一个数据模型通知多个视图刷新）。 用 发布-订阅 当模块边界明确、团队协作复杂、或需动态增删逻辑（如插件系统、埋点上报、状态变更广播）。 现代前端中，Vue 的响应式系统底层是观察者模式；而 Vuex/Pinia 的 store.$onAction 或自定义事件总线，本质是 Pub/Sub 思想。 注意避免滥用：过度使用全局事件总线会导致逻辑分散、调试困难，推荐配合 TypeScript 类型约束 + 明确事件命名规范（如 module:eventName）。
以上就是javascript如何实现观察者模式_与发布订阅有何区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544088.html
微信扫一扫 
支付宝扫一扫 
