订阅模式

最新推荐文章于 2023-05-22 00:15:00 发布

Stark6

最新推荐文章于 2023-05-22 00:15:00 发布

阅读量164

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/stark6/article/details/120042188

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这是一个关于JavaScript事件订阅和发布的实现。代码定义了一个`Subscription`类，它包含`eventList`和`offLineList`两个属性，用于存储事件和回调。`on`方法用于订阅事件，`once`用于一次性订阅，`off`用于取消订阅，`emit`则用于触发事件。当事件触发时，如果对应回调列表为空，则事件会被缓存，待组件加载完成后派发。

摘要由CSDN通过智能技术生成

class Subscription {
  #eventList = new Map();
  #offLineList = new Map();

  on(eventName, eventCallback, once = false) {
    const list = this.#eventList.get(eventName) || [];
    list.push({ eventCallback, once });
    this.#eventList.set(eventName, list);

    // 派发之前缓存的队列
    const offLineIndex = this.#offLineList.get(eventName) || 0;
    for (let i = 0; i < offLineIndex.length; i++) {
      this.emit(eventName);
    }
    this.#offLineList.delete(eventName);
  }

  once(eventName, eventCallback) {
    this.on(eventName, eventCallback, true);
  }

  off(eventName, eventCallback) {
    if (!this.#eventList.has(eventName)) {
      throw new Error("该事件并没有发布过订阅!");
    }

    if (!eventCallback) {
      this.#eventList.delete(eventName);
      return;
    }

    const list = this.#eventList.get(eventName);
    const filerList = list.filter((a) => a !== eventCallback);
    this.#eventList.set(eventName, filerList);
  }

  emit(eventName) {
    if (!this.#eventList.has(eventName)) {
      throw new Error("该事件并没有发布过订阅!");
    }

    const list = this.#eventList.get(eventName);

    // 异步组件还未加载完成，缓存队列
    if (!list.length) {
      const i = this.#offLineList.get(eventName) || 0;
      this.#offLineList.set(eventName, i++);
      return;
    }

    const filerList = list.filter(({ eventCallback, once }) => {
      eventCallback();
      return !once;
    });
    this.#eventList.set(eventName, filerList);
  }
}

const subscription = new Subscription();