17370845950

观察者模式核心是明确发布者与订阅者关系，通过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);
  }
}

避免内存泄漏：正确取消订阅

订阅后不取消，回调函数会一直持有外部作用域引用，导致对象无法被垃圾回收。尤其在组件销毁、页面跳转时容易出问题：

• 确保 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 类封装业务事件，更直观可控