观察者模式是一种行为型设计模式，通过主题维护观察者列表并提供订阅、退订、通知方法，实现发布者与订阅者的解耦；典型应用包括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('按钮被点击了'); // 输出: 收到: 按钮被点击了
观察者模式在前端的典型应用场景
它不是只存在于教科书里，而是大量内建于现代前端生态中，常见于以下场景：
立即学习“Java免费学习笔记（深入）”；
-
事件系统：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延迟，避免阻塞主线程
