手写发布订阅

发布订阅是一种设计模式，所谓设计模式就是写代码的套路

发布订阅模式主要包含三个API，分别是on、emit/trigger、off

 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


const eventHub = {
  // 任务队列（任务即函数）
  queueMap: {
    // click: [f1, f2]，
    // hover: [f3, f4]
  },
  
  // 订阅事件，即保存事件及其任务
	on: (event, fn) => { 
    // 如果没有找到事件对应的任务队列，则初始化新的队列
    eventHub.queueMap[event] = eventHub.queueMap[event] || []
    // 入队
  	eventHub.queueMap[event].push(fn)
  },
  
  // 发布事件，即触发事件
	emit: (event, data) => { 
  	// 循环遍历对应事件的任务队列，并按顺序执行任务
    const fnList = eventHub.queueMap[event]
    if(!fnList) return 
    fnList.forEach(f => f(data))
  },
  
  // 取消订阅事件，即移除某项任务
	off: (event, fn) => { 
    // 因为是读操作，所以可以使用alias设计模式，简化代码
    const fnList = eventHub.queueMap[event]
    // 如果对应事件的队列中没有此任务，则什么都不做
  	if(!fnList) return
    // 找到任务在队列中的index
    const index = fnList.indexOf(fn)
    // 同上，如果没找到，则什么都不做
    if(index < 0) return 
    // 找到了就删除，代表取消事件监听
    fnList.splice(index, 1)
  },
}
eventHub.on('click', console.log)
eventHub.on('click', console.error)
eventHub.off('click', console.log)
setTimeout(() => {
	eventHub.emit('click', '打印输出内容')  
}, 3000)

利用class实现，原理相同

 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


class EventHub {
  queueMap = {}
  on(event, fn) {
    this.queueMap[event] = this.queueMap[event] || []
    this.queueMap[event].push(fn)
  }
  emit(event, data) {
    const fnList = this.queueMap[event] || []
    fnList.forEach(fn => fn(data))
  }
  off(event, fn) {
    const fnList = this.queueMap[event] || []
    const index = fnList.indexOf(fn)
    if(index < 0) return
    fnList.splice(index, 1)
  }
}
// 使用
const e = new EventHub()
e.on('click', (name)=>{
  console.log('hi '+ name)
})
e.on('click', (name)=>{
  console.log('hello '+ name)
})
setTimeout(()=>{
  e.emit('click', 'gsq')
},3000)

利用写好的

Contents