JavaScript观察者模式详解教程

JavaScript开发者无需费力手写观察者模式——原生EventTarget已是标准、可靠、轻量且跨平台（现代浏览器 + Node.js v18+）的首选方案，它天然支持once自动清理、signal取消、自定义事件、Shadow DOM穿透控制等关键能力，彻底规避手动维护observers数组、notify循环、错误隔离和内存泄漏等常见陷阱；通过简单继承EventTarget并结合CustomEvent的detail字段传递数据，即可让业务类兼具逻辑与事件分发能力，语义清晰、兼容无忧、开箱即用。

JavaScript 中不需要专门“实现”观察者模式——EventTarget 已经是标准、可继承、可扩展的原生观察者机制，比手写 Observer 类更可靠、更轻量、更兼容。

用 EventTarget 替代手写观察者类

手写 Observer + Subject 容易漏掉事件去重、异步调度、错误隔离等细节；而 EventTarget 天然支持事件冒泡控制、once 选项、signal 取消、自定义事件对象，且所有现代浏览器和 Node.js（v18+）都支持。

• 直接继承 EventTarget：你的业务类可同时具备数据逻辑和事件分发能力
• 监听用 addEventListener()，触发用 dispatchEvent()，语义清晰
• 避免手动维护 observers 数组、notify() 循环、remove() 清理等易错逻辑

class DataStore extends EventTarget {
  #value = null;
  set value(v) {
    this.#value = v;
    this.dispatchEvent(new CustomEvent('change', { detail: v }));
  }
}

const store = new DataStore();
store.addEventListener('change', (e) => console.log('新值:', e.detail));
store.value = 42; // 输出：新值: 42

CustomEvent 的 detail 和 composed 怎么选

detail 是传递业务数据的唯一推荐字段，必须是可序列化值（不传函数或 DOM 节点）；composed: true 仅在需要穿透 Shadow DOM 时设为 true，普通场景保持默认 false 即可。

• detail 支持任意结构：对象、数组、字符串、数字，但不要传 this 或闭包引用，防止内存泄漏
• 若事件需被 Shadow DOM 外的父组件捕获，才加 { composed: true }，否则省略
• 不要用 event.target 传业务数据——它指向派发者，可能被中间拦截或伪造

监听器清理不及时导致内存泄漏

使用 addEventListener() 后未调用 removeEventListener()，或监听器是匿名函数/箭头函数，都会让监听器无法被移除，长期驻留内存。

• 给监听器命名：用具名函数或绑定后的函数引用，确保能精准移除
• 优先用 { once: true } 选项处理一次性逻辑，自动清理
• 在类销毁前统一调用 removeEventListener()，例如在 React 的 useEffect 清理函数中

const handler = (e) => console.log(e.detail);
store.addEventListener('change', handler);
// ……不再需要时：
store.removeEventListener('change', handler);

Node.js 环境下 EventTarget 的兼容性注意点

Node.js v14 不支持 EventTarget，v16 需启用 --experimental-event-target 标志，v18+ 默认可用。若需向下兼容，可用 events 模块的 EventEmitter，但接口不一致。

• 浏览器环境无兼容问题，放心使用
• Node.js v18+ 可直接用，无需 polyfill
• 若项目需支持 v16/v14，建议封装一层适配器，内部根据环境切换 EventTarget 或 EventEmitter

真正麻烦的从来不是“怎么写一个观察者”，而是“谁负责销毁监听器”“事件参数能不能跨上下文安全传递”“是否意外触发多次”。用好 EventTarget 就绕开了大部分隐性陷阱。

终于介绍完啦！小伙伴们，这篇关于《JavaScript观察者模式详解教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！