J*aScript实现发布订阅模式_j*ascript设计模式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript实现发布订阅模式_jascript设计模式

2025-11-01

浏览次数：次

返回列表

发布订阅模式通过事件中心实现组件间解耦，支持on、emit、off和once方法，适用于跨组件通信与异步通知，需注意及时取消订阅以避免内存泄漏。

javascript实现发布订阅模式_javascript设计模式

发布订阅模式是一种在J*aScript中广泛使用的通信机制，特别适用于解耦组件或模块之间的依赖关系。它允许对象（称为“订阅者”）监听某个事件（由“发布者”触发），而无需彼此直接引用。这种模式在前端开发中常用于状态管理、事件总线、跨组件通信等场景。

基本概念

发布订阅模式包含三个核心角色：

事件中心（Event Bus）：负责维护事件列表，提供订阅、取消订阅和触发事件的接口。
发布者（Publisher）强>：当某个事件发生时，向事件中心发送通知。
订阅者（Subscriber）：提前注册对某个事件的兴趣，并提供回调函数处理该事件。

简单实现一个事件中心

我们可以用一个简单的J*aScript类来实现发布订阅模式：

class EventEmitter {
  constructor() {
    // 存储事件及其对应的回调函数数组
    this.events = {};
  }

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

  // 发布事件
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

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

  // 只监听一次
  once(event, callback) {
    const wrapper = (data) => {
      callback(data);
      this.off(event, wrapper);
    };
    this.on(event, wrapper);
  }
}

使用示例

下面是一个实际使用该事件中心的例子：

// 创建事件中心实例
const eventBus = new EventEmitter();

// 订阅用户登录事件
eventBus.on('userLogin', (user) => {
  console.log(`欢迎 ${user.name} 登录系统`);
});

eventBus.on('userLogin', (user) => {
  console.log(`当前用户ID: ${user.id}`);
});

// 某处触发登录事件
eventBus.emit('userLogin', { id: 1, name: 'Alice' });

// 输出：
// 欢迎 Alice 登录系统
// 当前用户ID: 1

也可以使用 once 方法监听只执行一次的事件：

睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

0 查看详情睿拓智能网站系统-网上商城

eventBus.once('appInitialized', () => {
  console.log('应用初始化完成，仅提示一次');
});

eventBus.emit('appInitialized'); // 触发一次
eventBus.emit('appInitialized'); // 不再响应