事件总线

24 阅读2分钟

事件总线是什么

image.png

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

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

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

原始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);
};

控制台使用 image.png

这段代码实现的 $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({}) 

控制台使用

image.png