写一个简单的事件订阅中心eventsHub

Posted on | In | |

 在有些时候，当我们写了两个组件，当需要相互通信，该想想怎么使两个组件之间可以互相监听事件，并且能够传递obj，那下面我们用VanillaJS来实现一个简单的小demo吧。


首先创建一个事件对象
1
const eventsHub = {}

 那么接下来创建一个事件中心用来存储事件，创建的时候最好以obj的形式，不要以array形式创建。以obj方式我们能更快以订阅事件的name快速读取里面储存的fuction。

1
2
3
4
const eventsHub = {
      //用于存储事件
      events:{}
}


事件绑定

 事件绑定的时候，我们需要传入对应的事件名称key，以及callback函数，然后我们再拿这个key去事件中心去寻找是否存在该事件，存在该事件就继续网里面添加callback函数，不存在将该事件初始化一个空的Array，然后将传入的callback函数push进去

1
2
3
4
5
6
on:function (bindname,fn) {
      if (this.events[bindname] === undefined){
          this.events[bindname] = []
      }
      this.events[bindname].push(fn)
  }


事件执行

 查找该执行事件的key，获取Array里面的callback函数，全部执行

1
2
3
4
5
6
7
emit:function (bindname,data) {
    if (this.events[bindname]) {
        this.events[bindname].map((fn)=>{
            fn.call(undefined,data)
        })
    }
},


使用
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
const eventsHub = {
    events:{},
    //执行事件
    emit:function (bindname,data) {
        if (this.events[bindname]) {
            this.events[bindname].map((fn)=>{
                fn.call(undefined,data)
            })
        }
    },
    //绑定事件
    on:function (bindname,fn) {
        if (this.events[bindname] === undefined){
            this.events[bindname] = []
        }
        this.events[bindname].push(fn)
    }
    
}
export default eventsHub


//订阅
eventsHub.on('eventName',(res)=>{
    //... do something
})

//执行
 eventsHub.emit('eventName',data)