写一个EventEmitter类,包含on,emit,off,once方法

EventEmitter类的核心:事件触发与事件监听器功能的封装
那么如何来手动写一个EventEmitter

class EventEmitter{
    constructor(){
        //在事件被创建或者实例化的时候调用此方法
        //注册一个空对象
        this.events = {}
    }
    //绑定事件函数
    on(type,callback){
    //首先判断这个事件是否存在
        if(this.events[type]){
        //如果存在的话直接给数组this.events[type]尾部添加回调函数
            this.events[type].push(callback)
        }
        else{
        //如果不存在则建立
            this.events[type] = [callback]
        }
    }
    //触发事件
    emit(type,...args){
        if(this.events[type]){
        //遍历数组,并且传值运算
            this.events[type].forEach(fn=>{
                fn(...args)
            })
        }
    }
    //停止监听某个事件
    off(type,callback){
        if(this.events[type]){
        //使用过滤器filter 如果fn和传入的callback相等的时候就删除它
            this.events[type]=this.events[type].filter(fn=>{
                fn !==callback
            })
        }
    }
    //单次监听器,只能被触发一次,下次触发就不会响应
    once(type,callback){
        let onlyOnce = function(...args){
        //执行此回调函数
            callback(...args)
            //执行完毕后关闭回调函数,就达到了一次性触发
            this.off(type,onlyOnce)
        }
        //绑定onlyOnce回调函数
        this.on(type,onlyOnce)
    }
}

let e = new EventEmitter()
e.on('喝水时间到:',function(name){
    console.log(name+'该喝水了')
})
e.on('吃饭时间到:',function(name){
    console.log(name+'该吃饭了')
})
e.emit('喝水时间到:','蒋若依')
e.emit('吃饭时间到:','马强')

代码运算结果是:
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值