自定义事件总线属于一种观察者模式，其中包括三个角色：
-
发布者（Publisher）：发出事件（Event）；
-
订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；
-
事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；
当然我们可以选择一些第三方的库：
-
Vue2默认是带有事件总线的功能；
-
Vue3中推荐一些第三方库，比如mitt；
当然我们也可以实现自己的事件总线：
-
事件的监听方法on；
-
事件的发射方法emit；
-
事件的取消监听off；
手写事件总线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="nav-btn">nav button</button>
<script>
// 类EventBus -> 事件总线对象
class EventBus {
constructor() {
this.eventMap = {}; //{onclick:[fn1,fn2,fn3]}
}
on(eventName, eventFn) {
let eventFns = this.eventMap[eventName];
if (!eventFns) {
eventFns = [];
this.eventMap[eventName] = eventFns;
}
eventFns.push(eventFn);
}
emit(eventName, ...args) {
const eventFns = this.eventMap[eventName];
if (!eventFns) return;
eventFns.forEach((fn) => {
fn(...args);
});
}
off(eventName, eventFn) {
const eventFns = this.eventMap[eventName];
if (!eventFns) {
console.log("本来就没有这个eventName");
return;
}
for (let i = 0; i < eventFns.length; i++) {
const fn = eventFns[i];
if (fn === eventFn) {
eventFns.splice(i, 1);
break;
}
}
// 如果eventFns已经清空了
if (eventFns.length === 0) {
delete this.eventMap[eventName];
}
}
}
const eventBus = new EventBus();
// aside.vue组件中监听事件
eventBus.on("navclick", (name, age, height) => {
console.log("navclick listener 01", name, age, height);
});
const click = () => {
console.log("navclick listener 02");
};
eventBus.on("navclick", click);
setTimeout(() => {
eventBus.off("navclick", click);
}, 5000);
eventBus.on("asideclick", () => {
console.log("asideclick listener");
});
// nav.vue
const navBtnEl = document.querySelector(".nav-btn");
navBtnEl.onclick = function () {
console.log("自己监听到");
eventBus.emit("navclick", "why", 18, 1.88);
};
</script>
</body>
</html>
网友评论