Javascript如何实现发布订阅模式_它与观察者模式有何不同？

发布订阅模式通过事件总线解耦发布者与订阅者，核心实现含on、emit、off三方法，以对象映射事件名与回调数组；观察者模式则需观察者主动注册到被观察对象，存在直接依赖。

JavaScript 中的发布订阅模式（Pub/Sub）通过一个中央事件总线（Event Bus）解耦发布者和订阅者，两者不直接通信；而观察者模式中，观察者需主动注册到被观察对象（Subject），存在直接依赖关系。

如何用 JavaScript 实现发布订阅模式

核心是维护一个事件中心，支持 on（订阅）、emit（发布） 和 off（取消订阅） 三个方法。每个事件类型对应一个回调函数队列：

• 使用对象存储事件名 → 回调数组的映射，例如 events = { 'user:login': [cb1, cb2] }
• on：将回调推入对应事件的数组
• emit：遍历该事件的所有回调并执行，支持传参
• off：从数组中移除指定回调（注意要处理引用一致，或支持按事件名清空）

简易实现示例：

class EventBus {
  constructor() {
    this.events = {};
  }
  on(type, callback) {
    if (!this.events[type]) this.events[type] = [];
    this.events[type].push(callback);
  }
  emit(type, ...args) {
    const cbs = this.events[type];
    if (cbs && cbs.length) cbs.forEach(cb => cb(...args));
  }
  off(type, callback) {
    if (!callback) {
      this.events[type] = [];
    } else {
      this.events[type] = this.events[type]?.filter(cb => cb !== callback) || [];
    }
  }
}

发布订阅模式 vs 观察者模式：关键区别

二者都解决“一对多”通知问题，但结构与耦合程度不同：

标签： vue react javascript java go 回调函数 区别