事件总线

事件总线是什么

事件总线是一种常见的设计模式，用于在不同的模块之间进行事件的注册、注销和触发。

它通常是一个中央化的事件管理器，用于协调不同模块之间的事件通信。

在事件总线中，模块可以注册感兴趣的事件，并提供相应的处理函数。当该事件被触发时，事件总线会自动调用所有已注册的处理函数，并将相应的参数传递给它们。通过事件总线，不同的模块可以通过事件来进行通信，从而实现解耦和复用。

原始js 实现事件总线

// 记录事件名和处理函数列表
const listeners = {};

export default {

  // 监听事件
  $on(eventName, handler) {
    if (!listeners[eventName]) {
      listeners[eventName] = new Set();
    }
    listeners[eventName].add(handler);
  },
  
  //  取消监听事件
  $off(eventName, handler) {
    if (!listeners[eventName]) {
      return;
    }
    listeners[eventName].delete(handler);
  },
  
  //  触发监听事件函数
  $emit(eventName, ...args) {
    if (!listeners[eventName]) {
      return;
    }
    for (let handler of listeners[eventName]) {
      handler(...args);
    }
  },
};

演示 使用

导入下

import eventBus from "./eventBus";

window.eventBus = eventBus;

window.handle1 = (data) => {
  console.log("handle1处理", data);
};

window.handle2 = (data) => {
  console.log("handle2处理", data);
};

控制台使用

这段代码实现的 $on、$off 和 $emit 方法与 Vue.js 中的 $on、$off 和 $emit 方法有很大的相似之处，但也有一些区别。

相同点：

• $on 方法用于注册一个事件的处理函数；
• $off 方法用于注销一个事件的处理函数；
• $emit 方法用于触发一个事件，并将参数传递给相应的处理函数；
• 在实现上都使用了一个对象来存储事件和处理函数之间的映射关系。

不同点：

• Vue.js 中的 $on、$off 和 $emit 是 Vue 实例对象的内置方法，用于在 Vue 组件之间进行事件的注册、注销和触发，而上面提供的代码是一个独立的 JavaScript 模块，可以用于在不同模块之间进行事件的通信；
• Vue.js 中的 $on 和 $off 方法可以接受一个可选的第三个参数 vm，用于指定事件回调函数中的 this 上下文，而上面提供的代码没有这个参数；
• 在 Vue.js 中，$emit 方法可以接受一个可选的第二个参数 args，用于传递额外的参数，而上面提供的代码使用了 ES6 的 rest parameters 语法来接受额外的参数。

总的来说，这两组方法都可以用于实现事件的注册、注销和触发，但 Vue.js 中的方法更加灵活和复杂，适用于 Vue 组件之间的事件通信，而上面提供的代码则更加简单和通用，适用于不同模块之间的事件通信

使用vue 实现事件总线

import Vue from "vue"
export default new Vue({}) 

控制台使用