事件总线-发布订阅模式,js笔试题

请你⽤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'
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值