观察者模式需Subject持有Observer引用并同步通知，发布-订阅通过事件中心解耦；前者适用于强绑定场景，后者适合松耦合跨模块通信。
JavaScript 中的观察者模式可以直接用对象和数组手动实现，不需要第三方库；它和发布-订阅模式的关键区别在于：观察者模式中 Subject（被观察者）必须持有 Observer（观察者）的引用，而发布-订阅模式通过事件中心解耦两者。
怎么手写一个基础的观察者模式
核心是三个角色：Subject（被观察者）、Observer（观察者）、以及它们之间的注册/通知逻辑。重点不是“多酷”，而是“谁持有谁的引用”——Subject 必须保存 Observer 实例列表，并在状态变化时主动遍历调用其
方法。
常见错误是把
回调函数
当 Observer 对象，导致无法退订；或者在
里直接执行异步操作，破坏同步通知语义。
应是一个有
方法的对象，而非裸函数
的
是数组，
/
操作要确保引用一致（不能靠值比较）
应同步执行，避免时序错乱；如需异步，应由调用方控制（例如包装成
）
发布-订阅模式用 Event Emitter 实现更自然
发布-订阅不依赖对象引用关系，而是靠字符串类型的事件名作中介。所有订阅者都向一个中央
注册，发布者只管
，不关心谁在听。这意味着模块可以完全独立加载、销毁，不会因残留引用导致内存泄漏。
立即学习
“
Java免费学习笔记（深入）
”；
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
典型陷阱是忘记
或使用匿名函数订阅，造成重复监听或无法退订；另一个是事件名拼写不一致（比如
和
），导致静默失败。
事件名建议统一用小写加连字符（kebab-case），避免大小写歧义
订阅时尽量传具名函数，或在闭包外保留对 handler 的引用以便退订
方法比手动
更安全，适合一次性响应
什么时候该选观察者，什么时候该用发布-订阅
选观察者模式的场景非常具体：两个对象生命周期强绑定，且需要细粒度控制通知时机（例如一个 UI 组件精确响应某个 Model 字段变化）。Vue 2 的响应式系统底层就大量使用了观察者模式变体（
+
）。
发布-订阅更适合跨模块通信，尤其是松耦合系统（如微
前端
、插件架构）。但要注意：过度依赖全局事件中心会让数据流难以追踪，调试成本上升。
如果两个类在同一个模块内紧密协作（如
和它的
），观察者更直白
如果通知方和响应方来自不同包、甚至不同团队维护（如支付 SDK 发出
），发布-订阅是唯一可行选择
React 中的 Context +
是观察者模式的思想体现；而自定义 Hooks 封装
则偏向发布-订阅
真正容易被忽略的是退订时机——观察者模式中忘记
会导致内存泄漏；发布-订阅中忘记
会引发重复执行。这两者都不能靠 GC 自动清理，必须显式处理。
updatenotifyObserverupdateSubjectobserversaddremovenotifysetTimeout(() => 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 都会收到EventEmitteremitoff'data-updated''dataUpdated'onceoffclass 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); // 必须传同一个引用DepWatcherFormValidationRule'payment-success'useReduceruseEventremoveoff