封装发布订阅模式-多功能传递数据

        本篇文章灵感是基于使用vue3之后而想记录下来的，众多使用vue2的伙伴们都知道this.$emit()这个函数方法吧，这个方法的原理就是发布订阅模式，能实现什么功能呢，就是关于组件之间传值的问题，但是在vue3中这个方法被取消了，现在就需要我们自己来实现它，具体如下：

/**
 * * 发布订阅模式
 * */
 
class Subscribe {
  constructor() {
    //创建执行的事件中心
    this.subscribes = new Map();
  };
  // 初始化id
  getId() {
    return Date.now() + Math.random();
  };
  // 订阅事件的触发器
  on(eventName, callBack) {
    // 创建名称事件序列
    const subscribeCallBacks = this.subscribes.get(eventName) || new Map();
    // 根据id给事件序列化
    const uuid = this.getId();
    subscribeCallBacks.set(uuid, callBack);
    // 赋值给eventName事件
    this.subscribes.set(eventName, subscribeCallBacks);
    return uuid;
  };
  // 发布事件
  emit(eventName, ...args) {
    // 判断事件队列是否存在 eventName 如果没有就创建一个空对象
    const subscribeCallBacks = this.subscribes.get(eventName) || new Map();
    // 循环获取 eventName 事件对象上的事件序列
    for (const [uuid, callback] of subscribeCallBacks) {
      callback.call(this, ...args);
    };
  };
  // 删除事件
  off(eventName, uuid) {
    // 判断eventName是否有值
    if (!eventName) {
      // 如果没有值就删除所有事件
      this.subscribes.clear();
      return;
    };
    // 判断事件是否存在
    const isContent = this.subscribes.has(eventName);
    if (isContent) {
      // 事件存在判断是否有删除的id
      if (uuid) {
        // 有id就删除这个事件中的id事件
        const subscribeCallBacks = this.subscribes.get(eventName);
        // 判断id是否正确
        const idSure = subscribeCallBacks.has(uuid);
        if (idSure) {
          // 如果存在就删除id项，并将原来数据存放入事件中
          // 没有就不做操作
          subscribeCallBacks.delete(uuid);
          this.subscribes.set(eventName, subscribeCallBacks);
        };
      } else {
        // 没有id就删除这个事件里面的所有事件序列
        this.subscribes.delete(eventName);
      };
    };
  };
};

const event = new Subscribe();
export default event;

        如果你使用vue3或者react甚至是其它前端框架，都可以使用发布订阅去传递数据，或者查看某种状态，代码是死的，人的思想是活的，就看你想怎么用，最后希望这篇文章可以帮助你。