请你⽤js实现⼀个事件分发系统,该系统需要满⾜以下要求(请给出实现思路和具体代码):
1. 可以通过 emit 触发事件
2. 可以通过 on 监听事件,在事件触发时会调⽤相应的回调函数
3. 可以通过 off 来移除事件监听
4. 同⼀个事件类型,允许有多个回调函数,这些回调函数的处理顺序按先注册先触发的流程来
依次触发
利用class封装一个类,里面定义emit,on,off方法 通过 this.events[event] 获取了名为 event 的事件处理函数数组 emit接收两个参数一个是事件一个是参数。遍历事件处理函数数组,依次调用这个其中的回调函数 apply第一个参数是null或者undefined,就是把this的指向window,然后把参数传给事件的处理函数 on 在事件触发时会调⽤相应的callback回调函数,把当前的这个callback事件处理函数放到把名为event的事件处理函数里面, remove 通过filtes筛选出数组中不等于当前函数的事件
class EventEmitter(){
constructor() { this.events = {}; } emit(event, ...args) { const callbacks = this.events[event]; callbacks.forEach(fn=>fn.apply(null, args)); return this; } on(event,callback) { let callbacks = this.events[event] ; callbacks && callbacks.push(callback); this.events[event] = callbacks; return this; } remove(event,callback) { let callbacks = this.events[event]|| [];; let ev = callbacks.filter(fn => fn !== callback); this.events[event]=ev; return this; }
}
// 测试
let eventBus = new EventEmitter()
let fn1 = function(name, age) {
console.log(`${name} ${age}`)
}
let fn2 = function(name, age) {
console.log(`hello, ${name} ${age}`)
}
eventBus.on('aaa', fn1)
eventBus.on('aaa', fn2)
eventBus.emit('aaa', false, '布兰', 12)
// '布兰 12'
// 'hello, 布兰 12'