观察者模式是一种行为型设计模式，通过主题维护观察者列表并提供订阅、退订、通知方法，实现发布者与订阅者的解耦；典型应用包括DOM事件、状态管理、响应式数据及自定义通信，需注意内存泄漏、循环通知和异步处理。
JavaScript 中的观察者模式是一种行为型设计模式，核心是让多个“观察者”对象监听某个“被观察者”（主题）的状态变化，并在状态改变时自动收到通知并作出响应。它解耦了发布者与订阅者，是
前端
事件驱动开发的重要思想基础。
如何手动实现一个简易观察者模式
不依赖第三方库，可以用类封装主题（Subject）和观察者（Observer）的基本行为：
主题需维护一个观察者列表，提供
subscribe
（添加）、
unsubscribe
（移除）、
notify
（广播）方法
每个观察者是一个函数或含
update
方法的对象，接收通知时执行逻辑
注意避免内存泄漏：在不需要监听时调用
unsubscribe
，尤其在组件卸载（如 React 的
清理函数）中清理
示例代码：
观察者模式在前端的典型应用场景
它不是只存在于教科书里，而是大量内建于现代前端生态中，常见于以下场景：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
立即学习
“
Java免费学习笔记（深入）
”；
事件系统
：DOM 事件（
/
）是最直观的观察者模式体现。元素是主题，事件监听器是观察者
状态管理
：Vuex 的
、Redux 的
、Pinia 的
都基于该模式同步状态变更
响应式数据
：Vue 2 的
和 Vue 3 的
在依赖收集阶段，本质上是为响应式属性建立“主题-观察者”关系（如组件 render 函数作为观察者）
自定义通信机制
：跨组件、跨层级的消息通知（比如全局提示、权限变更广播），可用简易事件总线（EventBus）实现，本质是中心化主题
与发布-订阅模式的区别（常被混淆）
观察者模式中，观察者直接订阅具体主题，两者存在引用关系；而发布-订阅模式引入了事件通道（如 Event Emitter），发布者和订阅者完全解耦，只通过事件名通信。前端中：
、
、
属于发布-订阅
DOM 事件和 Vuex/Redux 的订阅更贴近原始观察者模式（虽有中介，但订阅目标明确）
实际开发中二者界限模糊，重点在于是否需要中间调度、是否支持通配符/异步队列等高级能力
使用建议与注意事项
优先使用框架内置机制（如 Vue 的
、React 的
+ 状态依赖），避免重复造轮子
手动实现时，给
subscribe
返回取消函数（类似
清理函数），提升可维护性
警惕循环通知：A 观察 B，B 又在回调中修改 A，可能引发无限递归，需加防抖或状态锁
异步通知需谨慎：若
notify
中执行耗时操作，考虑用
或
延迟，避免阻塞主线程
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('按钮被点击了'); // 输出: 收到: 按钮被点击了
addEventListenerdispatchEventstore.watchstore.subscribe$subscribeObject.definePropertyProxyNode.js EventEmittermitttiny-emitterwatchuseEffectuseEffectPromise.resolve().then()queueMicrotask