观察者模式定义对象间一对多依赖关系，当被观察者状态改变时通知所有观察者更新；核心为Subject（维护列表并提供订阅/退订/通知方法）与Observer（响应变化的函数或含update方法的对象）。
观察者模式（Observer Pattern）在 JavaScript 中非常常用，本质是定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知并自动更新。它天然契合 JS 的事件机制，实现起来简洁灵活。
核心结构：Subject（被观察者） + Observer（观察者）
关键角色有两个：
Subject：维护观察者列表，提供 subscribe（添加）、unsubscribe（移除）、notify（广播）方法； Observer：通常是一个函数或含 update 方法的对象，负责响应变化。
基础手写实现（函数式风格）
用闭包封装状态，避免暴露内部数组：
class Subject { constructor() { this.observers = []; } subscribe(observer) { if (typeof observer === 'function') { this.observers.push(observer); return () => this.unsubscribe(observer); // 返回取消订阅函数 } } unsubscribe(observer) { const index = this.observers.indexOf(observer); if (index > -1) this.observers.splice(index, 1); } notify(data) { this.observers.forEach(fn => fn(data)); }}// 使用示例const subject = new Subject();const handler1 = (msg) => console.log('收到：', msg);const handler2 = (msg) => alert('弹窗提醒：' + msg);const unsubscribe1 = subject.subscribe(handler1);subject.subscribe(handler2);subject.notify('系统上线了！'); // 两个都触发unsubscribe1(); // 取消 handler1subject.notify('新版本发布'); // 只有 handler2 触发
增强版：支持事件类型与解耦（类似 EventEmitter）
真实项目中常需按“事件名”分类通知，避免全量广播：
立即学习“Java免费学习笔记（深入）”；
class EventEmitter { constructor() { this.events = {}; // { 'click': [fn1, fn2], 'data': [...] } } on(event, listener) { if (!this.events[event]) this.events[event] = []; this.events[event].push(listener); return () => this.off(event, listener); } off(event, listener) { if (!this.events[event]) return; const index = this.events[event].indexOf(listener); if (index > -1) this.events[event].splice(index, 1); } emit(event, ...args) { const listeners = this.events[event] || []; listeners.forEach(fn => fn(...args)); }}// 使用const ee = new EventEmitter();ee.on('user:login', (user) => console.log('欢迎', user.name));ee.on('user:logout', () => console.log('已登出'));ee.emit('user:login', { name: '张三' });
注意事项与实用建议
手写观察者不难，但几个细节容易踩坑：
避免内存泄漏：务必提供 unsubscribe 或 off，尤其在组件销毁（如 React useEffect cleanup、Vue beforeUnmount）时调用； 监听器执行顺序：JS 中数组遍历是同步且按注册顺序，如需控制顺序，可考虑插入优先级或使用 Map 维护； 错误隔离：单个监听器报错不应阻断其他监听器，可在 notify 内加 try/catch； 不用重复造轮子：复杂场景推荐用成熟库（如 RxJS 的 Observable、或者 mitt、tiny-emitter 等轻量 EventEmitter）。
基本上就这些。观察者模式本身不复杂，关键是理解“谁发、谁收、怎么断连”，再结合具体场景选择函数式或类式、单事件还是多事件设计。
以上就是javascript如何实现观察者模式_如何编写的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544411.html
微信扫一扫 
支付宝扫一扫 
