怎么实现javascript的观察者模式_它与发布订阅模式有何不同？_网络技术

怎么实现javascript的观察者模式_它与发布订阅模式有何不同？

发布时间 - 2026-01-06 00:00:00 点击率：次

观察者模式需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，不关心谁在听。这意味着模块可以完全独立加载、销毁，不会因残留引用导致内存泄漏。

典型陷阱是忘记 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 自动清理，必须显式处理。

# vue # react # javascript # java # 前端 # go # 回调函数 # 区别 # red

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：升级openssh的实例详解

下一篇：分享一些linux运维的基础知识

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：升级openssh的实例详解

下一篇：分享一些linux运维的基础知识