如何实现JavaScript观察者模式_观察者模式在前端有哪些应用_技术教程

观察者模式是一种行为型设计模式，通过主题维护观察者列表并提供订阅、退订、通知方法，实现发布者与订阅者的解耦；典型应用包括DOM事件、状态管理、响应式数据及自定义通信，需注意内存泄漏、循环通知和异步处理。

JavaScript 中的观察者模式是一种行为型设计模式，核心是让多个“观察者”对象监听某个“被观察者”（主题）的状态变化，并在状态改变时自动收到通知并作出响应。它解耦了发布者与订阅者，是前端事件驱动开发的重要思想基础。

如何手动实现一个简易观察者模式

不依赖第三方库，可以用类封装主题（Subject）和观察者（Observer）的基本行为：

主题需维护一个观察者列表，提供 subscribe（添加）、unsubscribe（移除）、notify（广播）方法
每个观察者是一个函数或含 update 方法的对象，接收通知时执行逻辑
注意避免内存泄漏：在不需要监听时调用 unsubscribe，尤其在组件卸载（如 React 的 useEffect 清理函数）中清理

示例代码：

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    if (typeof observer === 'function') {
      this.observers.push(observer);
    }
  }
  unsubscribe(observer) {
    this.observers = this.observers.filter(fn => fn !== observer);
  }
  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

// 使用
const theme = new Subject();
const logHandler = (msg) => console.log('收到:', msg);
theme.subscribe(logHandler);
theme.notify('按钮被点击了'); // 输出: 收到: 按钮被点击了

观察者模式在前端的典型应用场景

它不是只存在于教科书里，而是大量内建于现代前端生态中，常见于以下场景：

事件系统：DOM 事件（addEventListener / dispatchEvent）是最直观的观察者模式体现。元素是主题，事件监听器是观察者
状态管理：Vuex 的 store.watch、Redux 的 store.subscribe、Pinia 的 $subscribe 都基于该模式同步状态变更
响应式数据：Vue 2 的 Object.defineProperty 和 Vue 3 的 Proxy 在依赖收集阶段，本质上是为响应式属性建立“主题-观察者”关系（如组件 render 函数作为观察者）
自定义通信机制：跨组件、跨层级的消息通知（比如全局提示、权限变更广播），可用简易事件总线（EventBus）实现，本质是中心化主题

与发布-订阅模式的区别（常被混淆）

观察者模式中，观察者直接订阅具体主题，两者存在引用关系；而发布-订阅模式引入了事件通道（如 Event Emitter），发布者和订阅者完全解耦，只通过事件名通信。前端中：

Node.js EventEmitter、mitt、tiny-emitter 属于发布-订阅
DOM 事件和 Vuex/Redux 的订阅更贴近原始观察者模式（虽有中介，但订阅目标明确）
实际开发中二者界限模糊，重点在于是否需要中间调度、是否支持通配符/异步队列等高级能力

使用建议与注意事项

优先使用框架内置机制（如 Vue 的 watch、React 的 useEffect + 状态依赖），避免重复造轮子
手动实现时，给 subscribe 返回取消函数（类似 useEffect 清理函数），提升可维护性
警惕循环通知：A 观察 B，B 又在回调中修改 A，可能引发无限递归，需加防抖或状态锁
异步通知需谨慎：若 notify 中执行耗时操作，考虑用 Promise.resolve().then() 或 queueMicrotask 延迟，避免阻塞主线程