事件总线是什么
事件总线是一种常见的设计模式,用于在不同的模块之间进行事件的注册、注销和触发。
它通常是一个中央化的事件管理器,用于协调不同模块之间的事件通信。
在事件总线中,模块可以注册感兴趣的事件,并提供相应的处理函数。当该事件被触发时,事件总线会自动调用所有已注册的处理函数,并将相应的参数传递给它们。通过事件总线,不同的模块可以通过事件来进行通信,从而实现解耦和复用。
原始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({})
控制台使用