观察者模式定义对象间一对多依赖关系，当被观察者状态改变时自动通知所有观察者更新；核心角色为Subject（维护观察者列表并通知）和Observer（实现update接口响应通知）。
观察者模式（Observer Pattern）是 JavaScript 中最常用的行为型设计模式之一，核心思想是：**定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会自动收到通知并更新**。它特别适合处理事件驱动、数据响应式、状态同步等场景，比如 Vue 的响应式系统、DOM 事件监听、自定义事件总线等底层都离不开它。
观察者模式的核心角色
它包含两个关键角色：
- Subject（被观察者 / 发布者）：维护一组观察者，提供添加、删除、通知观察者的方法；自身状态变化时主动触发通知。
-
Observer（观察者 / 订阅者）：定义统一的更新接口（如
update()），在被通知时执行具体逻辑。
手写一个简洁可用的观察者模式
下面是一个轻量、可直接运行的实现，不依赖框架，突出本质逻辑：
class Subject {
constructor() {
this.observers = [];
}
// 添加观察者
subscribe(observer) {
if (typeof observer.update === 'function') {
this.observers.push(observer);
}
}
// 移除观察者
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
// 通知所有观察者（可传入数据）
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name, callback) {
this.name = name;
this.callback = callback;
}
update(data) {
this.callback(data, this.name);
}
}
// 使用示例
const subject = new Subject();
const obs1 = new Observer('UI组件A', (data, name) => {
console.log(`${name} 收到：`, data);
});
const obs2 = new Observer('日志服务', (data, name) => {
console.log(`${name} 记录：`, JSON.stringify(data));
});
subject.subscribe(obs1);
subject.subscribe(obs2);
subject.notify({ status: 'loading', progress: 50 });
// 输出：
// UI组件A 收到： { status: 'loading', progress: 50 }
// 日志服务 记录： {"status":"loading","progress":50}
更贴近实际开发的优化版本
真实项目中常需要支持「按事件类型订阅」、「一次性监听」、「取消全部」等功能。可以升级为类似 EventEmitter 的风格：
立即学习“Java免费学习笔记（深入）”；
class EventHub {
constructor() {
this.events = {};
}
on(type, handler) {
if (!this.events[type]) this.events[type] = [];
this.events[type].push(handler);
}
once(type, handler) {
const wrapper = (...args) => {
handler(...args);
this.off(type, wrapper);
};
this.on(type, wrapper);
}
emit(type, ...args) {
const handlers = this.events[type] || [];
handlers.forEach(fn => fn(...args));
}
off(type, handler) {
if (!this.events[type]) return;
this.events[type] = this.events[type].filter(fn => fn !== handler);
}
clear(type) {
if (type) delete this.events[type];
else this.events = {};
}
}
// 使用
const hub = new EventHub();
hub.on('user-login', user => console.log('欢迎', user.name));
hub.emit('user-login', { name: '张三' });
和发布-订阅模式的区别（常见误区）
很多人把观察者模式和发布-订阅（Pub/Sub）混为一谈，其实关键区别在于：是否有中间调度中心。
- 观察者模式中，Subject 和 Observer 是直接关联的（松耦合但有引用）；
- 发布-订阅模式引入了第三方事件总线（Event Bus），发布者和订阅者完全解耦，互不知晓对方存在。
上面的 EventHub 就是典型的发布-订阅实现 —— 它更灵活，更适合大型应用模块通信；而基础 Subject/Observer 更适合小范围、强语义的状态联动（如一个 Model 和多个 View）。
基本上就这些。观察者模式不复杂，但容易忽略“解耦时机”和“内存泄漏”问题（比如忘了 unsubscribe）。用好它，能让代码更清晰、响应更及时。
