观察者模式需Subject持有Observer引用并同步通知，发布-订阅通过事件中心解耦；前者适用于强绑定场景，后者适合松耦合跨模块通信。
JavaScript 中的观察者模式可以直接用对象和数组手动实现，不需要第三方库；它和发布-订阅模式的关键区别在于：观察者模式中 Subject（被观察者）必须持有 Observer（观察者）的引用，而发布-订阅模式通过事件中心解耦两者。
怎么手写一个基础的观察者模式
核心是三个角色：Subject（被观察者）、Observer（观察者）、以及它们之间的注册/通知逻辑。重点不是“多酷”，而是“谁持有谁的引用”——Subject 必须保存 Observer 实例列表，并在状态变化时主动遍历调用其 update 方法。
常见错误是把回调函数当 Observer 对象，导致无法退订；或者在 notify 里直接执行异步操作，破坏同步通知语义。
-
Observer应是一个有update方法的对象，而非裸函数 -
Subject的observers是数组，add/remove操作要确保引用一致（不能靠值比较） -
notify应同步执行，避免时序错乱；如需异步，应由调用方控制（例如包装成setTimeout(() => subject.notify(), 0)）
class Subject {
constructor() {
this.observers = [];
}
add(observer) {
if (typeof observer.update === 'function') {
this.observers.push(observer);
}
}
remove(observer) {
const index = this.observers.indexOf(observer);
if (index > -1) this.observers.splice(index, 1);
}
notify(data) {
this.observers.forEach(obs => obs.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} received:`, data);
}
}
const subject = new Subject();
const obs1 = new Observer('Alice');
const obs2 = new Observer('Bob');
subject.add(obs1);
subject.add(obs2);
subject.notify({ msg: 'hello' }); // Alice 和 Bob 都会收到
发布-订阅模式用 Event Emitter 实现更自然
发布-订阅不依赖对象引用关系，而是靠字符串类型的事件名作中介。所有订阅者都向一个中央 EventEmitter 注册，发布者只管 emit，不关心谁在听。这意味着模块可以完全独立加载、销毁，不会因残留引用导致内存泄漏。
立即学习“Java免费学习笔记（深入）”；
典型陷阱是忘记 off 或使用匿名函数订阅，造成重复监听或无法退订；另一个是事件名拼写不一致（比如 'data-updated' 和 'dataUpdated'），导致静默失败。
- 事件名建议统一用小写加连字符（kebab-case），避免大小写歧义
- 订阅时尽量传具名函数，或在闭包外保留对 handler 的引用以便退订
-
once方法比手动off更安全，适合一次性响应
class EventEmitter {
constructor() {
this.events = {};
}
on(event, handler) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(handler);
}
off(event, handler) {
if (!this.events[event]) return;
const i = this.events[event].indexOf(handler);
if (i > -1) this.events[event].splice(i, 1);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(h => h(...args));
}
}
}
const ee = new EventEmitter();
const handler = (msg) => console.log('got:', msg);
ee.on('user-login', handler);
ee.emit('user-login', { id: 123 });
ee.off('user-login', handler); // 必须传同一个引用
什么时候该选观察者，什么时候该用发布-订阅
选观察者模式的场景非常具体：两个对象生命周期强绑定，且需要细粒度控制通知时机（例如一个 UI 组件精确响应某个 Model 字段变化）。Vue 2 的响应式系统底层就大量使用了观察者模式变体（Dep + Watcher）。
发布-订阅更适合跨模块通信，尤其是松耦合系统（如微前端、插件架构）。但要注意：过度依赖全局事件中心会让数据流难以追踪，调试成本上升。
- 如果两个类在同一个模块内紧密协作（如
Form和它的ValidationRule），观察者更直白 - 如果通知方和响应方来自不同包、甚至不同团队维护（如支付 SDK 发出
'payment-success'），发布-订阅是唯一可行选择 - React 中的 Context +
useReducer是观察者模式的思想体现；而自定义 Hooks 封装useEvent则偏向发布-订阅
真正容易被忽略的是退订时机——观察者模式中忘记 remove 会导致内存泄漏；发布-订阅中忘记 off 会引发重复执行。这两者都不能靠 GC 自动清理，必须显式处理。
