javascript如何实现发布订阅_它与观察者模式有何不同-js教程-PHP中文网

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

狼影

发布： 2025-12-17 22:32:02

原创

107人浏览过

发布订阅模式通过事件中心实现发布者与订阅者完全解耦，核心是维护事件名到回调数组的映射，支持on、emit、off操作；而观察者模式中被观察者直接持有观察者列表，耦合度更高。

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

JavaScript 中的发布订阅模式（Pub/Sub）是一种松耦合的事件通信机制，核心是通过一个“事件中心”来中介发布者和订阅者，双方互不持有对方引用。它和观察者模式（Observer Pattern）表面相似，但设计意图、结构关系和适用场景有本质区别。

如何用 JavaScript 实现一个简易发布订阅系统

关键在于维护一个事件映射表（event map），支持注册（on）、触发（emit）、取消（off）三个基本操作：

用对象或 Map 存储事件名 → 回调函数数组的映射
on(event, callback)：把回调推入对应事件的数组
emit(event, ...args)：遍历该事件的所有回调并执行
off(event, callback?)：可清除全部或指定回调

示例代码：

class EventBus {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, ...args) {
    const callbacks = this.events[event];
    if (callbacks && callbacks.length) {
      callbacks.forEach(cb => cb(...args));
    }
  }
  off(event, callback) {
    if (!callback) {
      delete this.events[event];
      return;
    }
    const list = this.events[event];
    if (list) {
      const index = list.indexOf(callback);
      if (index > -1) list.splice(index, 1);
    }
  }
}

// 使用
const bus = new EventBus();
bus.on('user:login', (user) => console.log('欢迎', user.name));
bus.emit('user:login', { name: '张三' });

登录后复制

发布订阅 vs 观察者模式：核心区别在哪

二者都解决“一对多通知”，但角色关系与依赖方式不同：

腾讯AI 开放平台

腾讯AI开放平台

381

查看详情

立即学习“Java免费学习笔记（深入）”；

观察者模式中，Subject（被观察者）直接持有 Observer（观察者）列表，Subject 负责添加、通知、移除 Observer；Observer 需主动订阅 Subject 实例
发布订阅中，Publisher 和 Subscriber 都只依赖 Event Bus（中间件），彼此完全解耦；没有直接引用，甚至可以跨模块、跨文件、跨生命周期存在
观察者模式是“对象内聚”的设计，常用于 UI 组件更新（如 Vue2 的响应式）；发布订阅更偏向“消息总线”，适合应用级事件通信（如路由切换、登录状态广播）

实际开发中怎么选

看耦合程度和控制权归属：

组件内部状态变化需通知几个固定子组件？→ 用观察者（或现代框架的响应式 API，如 Vue3 的 effect / React 的 useState + useEffect）
多个不相关模块需要响应同一业务事件（比如“用户登出”要清缓存、关 WebSocket、跳登录页）？→ 用发布订阅，避免互相 import 或全局变量
需要异步、延迟、过滤、中间件（如日志、权限校验）？→ 可在 EventBus 上扩展，而原生观察者模式很难自然支持

基本上就这些。发布订阅不是银弹，但它是组织大型前端项目事件流的实用工具；理解它和观察者模式的区别，能帮你更准确地做架构决策。

以上就是javascript如何实现发布订阅_它与观察者模式有何不同的详细内容，更多请关注php中文网其它相关文章！