当前位置：首页 > 文章列表 > 文章 > 前端 > 观察者模式与发布订阅区别解析

观察者模式与发布订阅区别解析

2026-02-18 11:42:45 0浏览收藏

本文深入剖析了JavaScript中观察者模式与发布-订阅模式的本质差异：前者通过被观察者直接持有并通知观察者，实现紧耦合、同步的响应式更新；后者借助事件总线作为中介，让发布者与订阅者彻底解耦，支持灵活的事件路由与跨模块通信。文章不仅提供了清晰可运行的代码实现，还从耦合度、通信机制、生命周期管理和典型应用场景四个维度展开对比，并结合Vue响应式系统、Vuex/Pinia等真实案例给出选型建议——帮你避开全局事件滥用陷阱，在架构设计中精准选择更适合项目复杂度与协作需求的通信范式。

javascript如何实现观察者模式_与发布订阅有何区别

观察者模式的 JavaScript 实现

观察者模式（Observer Pattern）是一种行为型设计模式，核心是让一个对象（被观察者/Subject）维护一组依赖它的对象（观察者/Observer），当被观察者状态变化时，自动通知所有观察者更新。

基础实现如下：

被观察者（Subject）

class Subject {
  constructor() {
    this.observers = [];
  }

  // 添加观察者
  addObserver(observer) {
    if (typeof observer.update === 'function') {
      this.observers.push(observer);
    }
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // 通知所有观察者
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

观察者（Observer）

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} 收到更新：`, data);
  }
}

使用示例：

const subject = new Subject();
const o1 = new Observer('UI组件');
const o2 = new Observer('日志服务');

subject.addObserver(o1);
subject.addObserver(o2);

subject.notify({ status: 'loading' }); // 两者都会收到

发布-订阅模式（Pub/Sub）的实现

发布-订阅是观察者模式的松耦合变体：不直接持有观察者引用，而是通过一个中间调度中心（事件总线）进行消息分发。发布者和订阅者完全解耦，甚至无需知道彼此存在。

简易事件总线实现：

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }

  // 发布事件
  emit(event, data) {
    const callbacks = this.events[event];
    if (callbacks && callbacks.length) {
      callbacks.forEach(cb => cb(data));
    }
  }

  // 取消订阅
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 使用
const bus = new EventBus();

bus.on('user:login', (user) => console.log('欢迎', user.name));
bus.on('user:logout', () => console.log('已登出'));

bus.emit('user:login', { name: '张三' });

二者核心区别

耦合程度不同：观察者模式中，Subject 必须显式管理 Observer 实例，存在直接引用；Pub/Sub 中发布者与订阅者仅依赖事件总线，无直接关联。
通信方式不同：观察者是“推”模型（Subject 主动调用 observer.update()）；Pub/Sub 可支持“推”或“拉”，且常按事件类型（字符串名）路由，支持一对多、多对多、条件过滤等扩展。
生命周期管理不同：观察者需手动添加/移除，易内存泄漏；Pub/Sub 通常提供 off 方法，但更依赖开发者主动清理，否则监听器可能滞留。
适用场景不同：观察者适合对象间强关联、结构清晰的场景（如 MVC 中 View 观察 Model）；Pub/Sub 更适合大型应用中跨模块、异步、解耦通信（如前端框架中的全局事件、微前端通信）。

实际开发中的选择建议

用 观察者模式 当你控制两端代码、关系稳定、需要同步响应（比如一个数据模型通知多个视图刷新）。
用 发布-订阅 当模块边界明确、团队协作复杂、或需动态增删逻辑（如插件系统、埋点上报、状态变更广播）。
现代前端中，Vue 的响应式系统底层是观察者模式；而 Vuex/Pinia 的 store.$onAction 或自定义事件总线，本质是 Pub/Sub 思想。
注意避免滥用：过度使用全局事件总线会导致逻辑分散、调试困难，推荐配合 TypeScript 类型约束 + 明确事件命名规范（如 module:eventName）。

到这里，我们也就讲完了《观察者模式与发布订阅区别解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！