观察者模式是JavaScript开发中非常实用的设计模式，很多前端框架的状态管理、事件系统都基于这个模式实现。理解它的原理和用法，能帮助我们写出耦合度更低、扩展性更好的代码。
观察者模式的核心概念
观察者模式定义了对象之间的一对多依赖关系，当一个对象（被称为被观察者/主题）的状态发生改变时，所有依赖于它的对象（被称为观察者）都会收到通知并被自动更新。
这个模式主要包含三个核心角色：
- Subject（被观察者/主题）：维护观察者列表，提供添加、删除观察者的方法，以及状态变化时通知所有观察者的方法
- Observer（观察者）：定义一个更新接口，当被观察者状态变化时会调用这个接口，接收通知并执行对应逻辑
- ConcreteSubject（具体被观察者）：继承或被实现Subject接口，存储自身状态，状态变化时触发通知
- ConcreteObserver（具体观察者）：继承或被实现Observer接口，实现更新方法，处理收到的通知
JavaScript原生实现观察者模式
下面我们用原生JavaScript实现一个简单的观察者模式示例，模拟一个新闻发布的场景，当有新新闻发布时，所有订阅了该新闻的观察者都会收到通知。
// 定义被观察者类
class NewsPublisher {
constructor() {
// 存储所有观察者
this.observers = [];
// 存储新闻内容
this.news = null;
}
// 添加观察者
addObserver(observer) {
this.observers.push(observer);
}
// 移除观察者
removeObserver(observer) {
this.observers = this.observers.filter(item => item !== observer);
}
// 设置新闻内容并通知所有观察者
setNews(newsContent) {
this.news = newsContent;
this.notifyObservers();
}
// 通知所有观察者
notifyObservers() {
this.observers.forEach(observer => {
observer.update(this.news);
});
}
}
// 定义观察者类
class NewsSubscriber {
constructor(name) {
this.name = name;
}
// 更新方法，接收被观察者的通知
update(news) {
console.log(`${this.name} 收到新新闻：${news}`);
}
}
// 使用示例
const publisher = new NewsPublisher();
const subscriber1 = new NewsSubscriber('用户A');
const subscriber2 = new NewsSubscriber('用户B');
const subscriber3 = new NewsSubscriber('用户C');
// 添加观察者
publisher.addObserver(subscriber1);
publisher.addObserver(subscriber2);
publisher.addObserver(subscriber3);
// 发布新新闻
publisher.setNews('JavaScript观察者模式开发教程上线');
// 输出：
// 用户A 收到新新闻：JavaScript观察者模式开发教程上线
// 用户B 收到新新闻：JavaScript观察者模式开发教程上线
// 用户C 收到新新闻：JavaScript观察者模式开发教程上线
// 移除一个观察者
publisher.removeObserver(subscriber2);
// 再次发布新新闻
publisher.setNews('观察者模式实战案例更新');
// 输出：
// 用户A 收到新新闻：观察者模式实战案例更新
// 用户C 收到新新闻：观察者模式实战案例更新观察者模式与发布订阅模式的区别
很多人会把观察者模式和发布订阅模式混淆，两者虽然思想类似，但结构上有明显区别：
| 对比项 | 观察者模式 | 发布订阅模式 |
|---|---|---|
| 通信方式 | 被观察者直接通知观察者，两者存在直接依赖 | 通过第三方事件中心中转，发布者和订阅者无直接依赖 |
| 角色关系 | 一对多，被观察者管理观察者列表 | 多对多，事件中心管理事件和回调的映射 |
| 耦合度 | 耦合度相对较高 | 耦合度更低，完全解耦 |
实际开发中的应用场景
观察者模式在JavaScript实际开发中有很多应用场景：
- 前端框架的状态管理：比如Vue的响应式系统、Redux的状态变更通知，都基于观察者模式的思想实现
- 事件监听系统：DOM的事件绑定本质上就是观察者模式的体现，元素是被观察者，事件回调是观察者
- 异步任务处理：比如多个模块需要等待某个异步请求完成后执行逻辑，可以用观察者模式统一通知
- 组件通信：在没有状态管理工具的简单项目中，可以用观察者模式实现跨组件的状态通知
使用注意事项
使用观察者模式时需要注意几个问题：
- 避免内存泄漏：如果一个观察者不再需要使用，一定要及时从被观察者的列表中移除，否则被观察者会一直持有观察者的引用，导致无法被垃圾回收
- 通知顺序问题：如果有多个观察者，通知顺序默认是添加顺序，如果有顺序要求，需要额外处理
- 避免循环通知：观察者的更新逻辑中不要再次触发被观察者的状态变更，否则可能导致无限递归的通知循环
总的来说，观察者模式是一种非常实用的设计模式，合理运用可以大幅提升代码的灵活性和可维护性，是JavaScript开发者需要掌握的核心知识之一。
观察者模式JavaScript发布订阅事件监听设计模式修改时间：2026-05-29 23:53:41