发布/订阅模式的实现方案

发布/订阅模式(Publish/Subscribe)是JavaScript异步编程中一种重要的设计模式，它允许对象间定义一对多的依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知。这种模式在事件驱动架构中尤为常见，能够有效解耦发布者和订阅者。

基本概念

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

发布者(Publisher)：负责发布消息/事件
订阅者(Subscriber)：通过订阅特定消息/事件来接收通知
消息通道(Channel)：作为中介，管理消息的发布和订阅关系

原生JavaScript实现

简单实现方案

javascript 复制代码

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

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

  // 发布事件
  emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => {
        callback.apply(null, args);
      });
    }
  }

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

  // 一次性订阅
  once(eventName, callback) {
    const wrapper = (...args) => {
      callback.apply(null, args);
      this.off(eventName, wrapper);
    };
    this.on(eventName, wrapper);
  }
}

使用示例

javascript 复制代码

const emitter = new EventEmitter();

// 订阅
emitter.on('message', (msg) => {
  console.log('收到消息:', msg);
});

// 发布
emitter.emit('message', 'Hello World!');

// 取消订阅
const handler = (msg) => console.log('另一个处理:', msg);
emitter.on('message', handler);
emitter.off('message', handler);

// 一次性订阅
emitter.once('one-time', () => console.log('只会执行一次'));
emitter.emit('one-time');
emitter.emit('one-time'); // 不会执行

基于Promise的实现

javascript 复制代码

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

  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
    return () => this.off(eventName, listener);
  }

  async emit(eventName, ...args) {
    const listeners = this.events[eventName] || [];
    for (const listener of listeners) {
      await listener(...args);
    }
  }

  off(eventName, listener) {
    const listeners = this.events[eventName];
    if (listeners) {
      this.events[eventName] = listeners.filter(l => l !== listener);
    }
  }
}

第三方库实现

使用RxJS

javascript 复制代码

import { Subject } from 'rxjs';

// 创建主题
const messageSubject = new Subject();

// 订阅
const subscription = messageSubject.subscribe({
  next: (msg) => console.log('收到消息:', msg),
  error: (err) => console.error('发生错误:', err),
  complete: () => console.log('消息流结束')
});

// 发布
messageSubject.next('Hello RxJS');

// 取消订阅
subscription.unsubscribe();

使用EventEmitter3

javascript 复制代码

import { EventEmitter } from 'eventemitter3';

const emitter = new EventEmitter();

emitter.on('event', (a, b) => {
  console.log(a, b);
});

emitter.emit('event', 'a', 'b');

实际应用场景

UI组件通信：不同组件间通过事件进行通信
WebSocket消息处理：处理来自服务器的实时消息
状态管理：如Redux的store订阅机制
微前端架构：不同微应用间的通信
Node.js事件系统：如HTTP服务器的request事件

性能优化考虑

内存泄漏：确保取消不再需要的订阅
事件爆炸：限制高频事件的触发频率(防抖/节流)
异步处理：考虑使用微任务队列避免阻塞主线程
错误处理：为事件处理器添加try-catch或Promise.catch

发布/订阅模式为JavaScript异步编程提供了灵活的解耦方案，合理使用可以显著提升代码的可维护性和扩展性。