观察者模式是一种一对多的依赖关系设计模式，当主题对象状态改变时，所有依赖它的观察者都会收到通知并自动更新。其核心角色包括发布者（Subject）和观察者（Observer），发布者维护观察者列表并提供添加、删除及通知接口，观察者实现更新方法以响应通知。JavaScript中可通过类手动实现该模式，常用于事件系统、状态管理和组件通信等场景。例如，自定义事件总线或简化版状态管理均可基于此模式构建。与发布订阅模式相比，观察者模式中发布者与观察者直接关联，耦合度较高，而发布订阅通过中间调度层解耦，更为松散。掌握该模式有助于提升代码的可维护性和模块化程度。
观察者模式在JavaScript中是一种非常实用的设计模式，特别适合处理对象间的依赖关系。当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知并更新。这种松耦合的机制广泛应用于事件系统、状态管理以及前端框架中。
什么是观察者模式
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时会通知所有观察者，使它们能够自动更新。
核心角色有两个：
- 发布者（Subject）：维护观察者列表，提供添加、删除和通知观察者的接口。
- 观察者（Observer）：实现一个更新方法，在被通知时执行相应逻辑。
手动实现一个观察者模式
下面是一个简洁但完整的观察者模式实现：
立即学习“Java免费学习笔记（深入）”；
class Subject {
constructor() {
this.observers = [];
}
// 添加观察者
addObserver(observer) {
this.observers.push(observer);
}
// 移除观察者
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
// 通知所有观察者
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} 收到通知:`, data);
}
}
使用示例：
企站帮企业网站管理系统1.0
下载
一、源码描述这是一款比较简单的企业管理系统源码，界面美观大方，功能简单，特别适合初学者学习研究，系统运行十分流畅，可以作为二次开发，同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能：企业动态，产品介绍 ,免费下载，定制服务，该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局：采用目前最先进的布局方式DIV+CSS，符合W3C的标准和Web2.0的风格。2、程序设计模块化，
const subject = new Subject();
const user1 = new Observer("用户A");
const user2 = new Observer("用户B");
subject.addObserver(user1);
subject.addObserver(user2);
subject.notify("系统即将升级！");
// 输出：
// 用户A 收到通知: 系统即将升级！
// 用户B 收到通知: 系统即将升级！
subject.removeObserver(user1);
subject.notify("新消息来了！");
// 只有用户B会收到
在实际项目中的应用场景
观察者模式非常适合用于解耦组件之间的通信，比如：
- 自定义事件系统：可以封装一个全局事件总线，组件之间通过订阅和发布事件进行通信。
- 状态管理简化版：类似Vue或Redux的部分原理，数据变更后自动刷新视图。
- 表单验证提示：输入框变化时通知多个提示模块更新状态。
举个简单的事件总线例子：
const EventBus = {
events: {},
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
},
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
},
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
};
// 使用
EventBus.on('login', user => {
console.log('欢迎你，' + user.name);
});
EventBus.emit('login', { name: 'Alice' });
观察者模式 vs 发布订阅模式
两者很相似，但关键区别在于耦合度：
- 观察者模式中，发布者直接管理观察者列表，两者是紧耦合的。
- 发布订阅模式通常引入中间调度层（如事件中心），发布者和订阅者互不知情，更加松散。
实际开发中，我们常说的“观察者”往往指的是发布订阅结构，尤其是在框架中。
基本上就这些。掌握这个模式能帮你写出更清晰、可维护的交互逻辑。
