观察者模式定义对象间一对多依赖关系，当被观察者状态改变时通知所有观察者更新；核心为Subject（维护列表并提供订阅/退订/通知方法）与Observer（响应变化的函数或含update方法的对象）。
观察者模式（Observer Pattern）在 JavaScript 中非常常用，本质是定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知并自动更新。它天然契合 JS 的事件机制，实现起来简洁灵活。
核心结构：Subject（被观察者） + Observer（观察者）
关键角色有两个：
-
Subject：维护观察者列表，提供
subscribe（添加）、unsubscribe（移除）、notify（广播）方法； -
Observer：通常是一个函数或含
update方法的对象，负责响应变化。
基础手写实现（函数式风格）
用闭包封装状态，避免暴露内部数组：
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
if (typeof observer === 'function') {
this.observers.push(observer);
return () => this.unsubscribe(observer); // 返回取消订阅函数
}
}
unsubscribe(observer) {
const index = this.observers.indexOf(observer);
if (index > -1) this.observers.splice(index, 1);
}
notify(data) {
this.observers.forEach(fn => fn(data));
}
}
// 使用示例
const subject = new Subject();
const handler1 = (msg) => console.log('收到：', msg);
const handler2 = (msg) => alert('弹窗提醒：' + msg);
const unsubscribe1 = subject.subscribe(handler1);
subject.subscribe(handler2);
subject.notify('系统上线了！'); // 两个都触发
unsubscribe1(); // 取消 handler1
subject.notify('新版本发布'); // 只有 handler2 触发
增强版：支持事件类型与解耦（类似 EventEmitter）
真实项目中常需按“事件名”分类通知，避免全量广播：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
class EventEmitter {
constructor() {
this.events = {}; // { 'click': [fn1, fn2], 'data': [...] }
}
on(event, listener) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(listener);
return () => this.off(event, listener);
}
off(event, listener) {
if (!this.events[event]) return;
const index = this.events[event].indexOf(listener);
if (index > -1) this.events[event].splice(index, 1);
}
emit(event, ...args) {
const listeners = this.events[event] || [];
listeners.forEach(fn => fn(...args));
}
}
// 使用
const ee = new EventEmitter();
ee.on('user:login', (user) => console.log('欢迎', user.name));
ee.on('user:logout', () => console.log('已登出'));
ee.emit('user:login', { name: '张三' });
注意事项与实用建议
手写观察者不难，但几个细节容易踩坑：
-
避免内存泄漏：务必提供
unsubscribe或off，尤其在组件销毁（如 React useEffect cleanup、Vue beforeUnmount）时调用； - 监听器执行顺序：JS 中数组遍历是同步且按注册顺序，如需控制顺序，可考虑插入优先级或使用 Map 维护；
-
错误隔离：单个监听器报错不应阻断其他监听器，可在
notify内加try/catch； - 不用重复造轮子：复杂场景推荐用成熟库（如 RxJS 的 Observable、或者 mitt、tiny-emitter 等轻量 EventEmitter）。
基本上就这些。观察者模式本身不复杂，关键是理解“谁发、谁收、怎么断连”，再结合具体场景选择函数式或类式、单事件还是多事件设计。
