文章介绍了使用JavaScript构建一个简单的EventBus类，该类支持订阅($on)和发布($emit)事件功能。示例中展示了如何订阅say和hello事件，并在触发这些事件时执行相应的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// bus
/* {
say: [callback1, callback2],
hello: [callback1]
} */
class EventBus {
constructor() {
// 什么时候走的？new EventBus() 就会走这儿
// this 是谁？实例
this.bus = {}
}
// 原型方法
$on(eventType, callback) {
if(this.bus[eventType]) {
this.bus[eventType].push(callback)
} else {
this.bus[eventType] = [callback]
}
}
$emit(eventType, ...args) {
this.bus[eventType].forEach(callback => callback(...args))
}
}
const bus = new EventBus()
// 订阅
bus.$on('say', (num1, num2) => {
console.log(num1 + num2 + '~')
});
bus.$on('say', (num1, num2) => {
console.log(num1 + num2 + '~~')
});
bus.$on('hello', (msg) => {
console.log(msg)
});
// 发布
// 把 this.bus 对应的 say 对应的值，就是数组，把数组中的函数都调用一下
bus.$emit('say', 1, 2);
bus.$emit('hello', 'Hello');
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
