观察者模式核心是明确发布者与订阅者关系，通过on/emit/off实现事件管理，需注意引用一致以避免内存泄漏，Proxy更适合属性级响应式监听。
JavaScript 中观察者模式的核心是让多个“观察者”（订阅者）能监听某个“被观察者”（发布者）的状态变化，并在变化发生时自动收到通知。它天然适合事件管理，比如 DOM 事件、自定义状态更新、数据流响应等。关键不在于用类或框架，而在于理清“谁发布、谁订阅、如何通知、如何取消”这四个环节。
手动实现一个轻量级观察者类
不需要依赖第三方库，几行代码就能搭出可复用的事件总线：
- 用 Map 或普通对象存储事件名 → 回调函数数组的映射
- on(eventName, callback)：把回调推入对应事件的队列
- emit(eventName, ...args)：遍历该事件的所有回调并执行
- off(eventName, callback)：从队列中精确移除指定回调（注意引用一致性）
示例：
class EventEmitter {
constructor() {
this.events = new Map();
}
on(type, fn) {
if (!this.events.has(type)) this.events.set(type, []);
this.events.get(type).push(fn);
}
emit(type, ...args) {
const fns = this.events.get(type) || [];
fns.forEach(fn => fn(...args));
}
off(type, fn) {
const fns = this.events.get(type) || [];
const i = fns.indexOf(fn);
if (i > -1) fns.splice(i, 1);
}
}
避免内存泄漏：正确取消订阅
订阅后不取消，回调函数会一直持有外部作用域引用，导致对象无法被垃圾回收。尤其在组件销毁、页面跳转时容易出问题：
立即学习“Java免费学习笔记（深入）”；
- 确保 off() 调用时传入与 on() 完全相同的函数引用（不能是箭头函数或匿名函数）
- 推荐在订阅时保存回调引用，便于后续清理：const handler = () => {...}; em.on('data', handler); em.off('data', handler);
- 支持一次性订阅（once）：内部 emit 后自动 off，适合只响应首次变化的场景
与 DOM 事件对比：观察者更灵活
DOM 的 addEventListener / removeEventListener 本质也是观察者模式，但它绑定在具体节点上，且事件流固定（捕获→目标→冒泡）。自定义观察者的优势在于：
- 不限于 DOM：可用于状态管理（如全局配置变更）、WebSocket 消息分发、模块间解耦
- 支持通配符或正则匹配事件名（如 “user:*”），便于批量监听
- 可添加中间件：在 emit 前做日志、节流、权限校验等
现代替代方案：考虑 Proxy + 自定义逻辑
如果目标是监听对象属性变化（比如响应式数据），ES6 Proxy 比传统观察者更底层、更精准：
- Proxy 可拦截 get/set/delete 等操作，无需手动调用 emit
- 结合 WeakMap 存储每个对象对应的依赖函数，自动关联变化与响应
- Vue 3 的 reactive 就基于此，但日常开发中仍建议优先用 EventEmitter 类封装业务事件，更直观可控
