事件订阅发布
# 事件订阅发布
class EventBus {
constructor() {
// 定义事件存储对象
this.handlersMap = {}
}
// 订阅事件,意思是把事件的名,和事件函数保存到 handlersMap对象中
on(eventName, ...handler) {
// 判断事件名如果不在 handlersMap对象中,就在handlersMap对象添加事件名这个字段,并赋值为空数组, 以便下面把事件函数追加到数组中
if (!this.handlersMap[eventName]) {
this.handlersMap[eventName] = []
}
// 把handler事件函数追加到 handlersMap的eventName 对应的数组中
this.handlersMap[eventName].push(...handler)
}
// 注销事件
off(eventName, handler) {
// 如果传入的eventName事件名为空,则把handlersMap里面的事件全部清空
if (!eventName) {
this.handlersMap = {}
return
}
// 如果传入的事件名不在 handlersMap中,则直接返回,不操作
if (!this.handlersMap[eventName]) {
return
}
// 事件名存在handlersMap中,肯定是个数组, 就遍历判断传入的事件函数的位置,然后在对应的数组中删除该事件函数
this.handlersMap[eventName].forEach((currentHandler, index) => {
if (currentHandler === handler) {
this.handlersMap[eventName].splice(index, 1)
}
})
}
// 发布事件
emit(eventName, ...args) {
// 如果传入的事件名不在 handlersMap中,则直接返回,不操作
if (!this.handlersMap[eventName]) {
return
}
console.log('eventName', args)
// 事件名存在handlersMap中,肯定是个数组, 就遍历判断传入的事件函数, 并执行
this.handlersMap[eventName].forEach(handler => {
handler.apply(this, args)
})
}
}
export default new EventBus()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
编辑 (opens new window)