JavaScript发布订阅事件

发布订阅模式

• 发布订阅模式（Pub/Sub）是一种事件驱动通信模式，它允许一个组件发布事件，而其他组件可以订阅这些事件。发布订阅模式在许多应用程序中都很有用，例如在需要在多个组件之间共享数据的情况下，自定义事件监听场景等。

ES5-发布订阅

function PubSub() {
  this.eventListeners = {};
}

PubSub.prototype.on = function (event, handler) {
  if (typeof handler !== "function") {
    throw new Error("Event handler should be a function");
  }
  if (this.eventListeners[event]) {
    this.eventListeners[event].push(handler);
  } else {
    this.eventListeners[event] = [handler];
  }
};

PubSub.prototype.off = function (event, handler) {
  if (typeof handler !== "function") {
    throw new Error("Event handler should be a function");
  }
  if (!this.eventListeners[event]) {
    return;
  }
  this.eventListeners[event] = this.eventListeners[event].filter(function (
    registeredHandler
  ) {
    return registeredHandler !== handler;
  });
};

PubSub.prototype.emit = function (event, ...args) {
  const handlers = this.eventListeners[event];
  if (!handlers) {
    return;
  }
  for (let handler of handlers) {
    handler.apply(this, args);
  }
};

// 直接使用
const Restaurant = new PubSub()
const handler = function () {
  console.log('chips handler called')
}
Restaurant.on('chips', handler)
Restaurant.emit('chips', handler)
// 输出 `chips handler called`

ES6-发布订阅

class PubSub {
    constructor() {
        this.eventListeners = {};
    }

  on(event, handler) {
    if (typeof handler !== "function") {
      throw new Error("Event handler should be a function");
    }

    if (this.eventListeners[event]) {
      this.eventListeners[event].push(handler);
    } else {
      this.eventListeners[event] = [handler];
    }
  }

  off(event, handler) {
    if (typeof handler !== "function") {
      throw new Error("Event handler should be a function");
    }

    if (!this.eventListeners[event]) {
      return;
    }

    this.eventListeners[event] = this.eventListeners[event].filter(
      (registeredHandler) => registeredHandler !== handler
    );
  }

  emit(event, ...args) {
    const handlers = this.eventListeners[event];

    if (!handlers) {
      return;
    }

    for (const handler of handlers) {
      handler.apply(this, args);
    }
  }
}

TS - 发布订阅

class PubSub {
  private eventListeners: { [event: string]: Function[] } = {};

  on(event: string, handler: Function): void {
    if (typeof handler !== "function") {
      throw new Error("Event handler should be a function");
    }

    if (this.eventListeners[event]) {
      this.eventListeners[event].push(handler);
    } else {
      this.eventListeners[event] = [handler];
    }
  }

  off(event: string, handler: Function): void {
    if (typeof handler !== "function") {
      throw new Error("Event handler should be a function");
    }

    if (!this.eventListeners[event]) {
      return;
    }

    this.eventListeners[event] = this.eventListeners[event].filter(
      (registeredHandler) => registeredHandler !== handler
    );
  }

  emit(event: string, ...args: any[]): void {
    const handlers = this.eventListeners[event];

    if (!handlers) {
      return;
    }

    for (const handler of handlers) {
      handler.apply(this, args);
    }
  }
}