观察者模式用于处理对象间依赖关系，当被观察者状态变化时，所有观察者自动收到通知并更新；其核心角色包括维护观察者列表的被观察者和实现更新方法的观察者；JavaScript中可通过Subject和Observer构造函数实现添加、删除及通知观察者；典型应用有DOM事件监听、Vue/Redux状态管理及组件通信，是前端开发中实现松耦合与响应式机制的基础。
观察者模式是一种在JavaScript中广泛使用的编程模式，它用来处理对象间的依赖关系。当一个对象（称为“被观察者”或“主题”）的状态发生变化时，所有依赖于它的对象（称为“观察者”）都会自动收到通知并进行更新。
观察者模式的核心概念
这种模式主要包含两个角色：
- 被观察者（Subject）：维护一个观察者列表，提供添加、删除和通知观察者的接口。
- 观察者（Observer）：实现一个更新方法，当被观察者发生变化时，该方法会被调用。
这种方式实现了对象之间松耦合的通信机制——被观察者不需要知道观察者的具体逻辑，只需要在状态变化时通知它们即可。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
一个简单的JavaScript实现
下面是一个用原生JavaScript实现观察者模式的例子：
// 被观察者（主题）
function Subject() {
this.observers = []; // 存储观察者
}
Subject.prototype.addObserver = function(observer) {
this.observers.push(observer);
};
Subject.prototype.removeObserver = function(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
};
Subject.prototype.notify = function(data) {
this.observers.forEach(observer => observer.update(data));
};
// 观察者
function Observer(name) {
this.name = name;
}
Observer.prototype.update = function(data) {
console.log(`${this.name} 收到了更新：`, data);
};
// 使用示例
const subject = new Subject();
const observer1 = new Observer("观察者A");
const observer2 = new Observer("观察者B");
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify("数据已更新！");
// 输出：
// 观察者A 收到了更新：数据已更新！
// 观察者B 收到了更新：数据已更新！
观察者模式的应用场景
这个模式在前端开发中非常常见，例如：
- 事件监听：DOM事件系统本质上就是观察者模式。你给按钮绑定click事件，就是在“订阅”这个事件。
- 状态管理：像Vue或Redux这类框架/库内部大量使用观察者模式来响应数据变化。
- 组件通信：在复杂的前端应用中，组件之间通过发布-订阅方式通信，避免层层传递props。
基本上就这些。观察者模式不复杂，但非常实用，是理解现代前端框架工作原理的重要基础。
