使用ES6语法封装一个事件对象(EventEmitter)

最近在重温ES6的语法,里面的Proxy可以改写对象的点语法,于是突发其想地利用这个特性,去实现一个事件触发对象,这个对象的调用方式借鉴了Vue的事件API。在ES5可以使用defineProperty实现,粗糙的实现代码贴下面:

class EventEmitter {
    constructor() {
        this.eventMap = {}
        this.onceEventMap = {}
        this.event = new Proxy({}, {
            set: (target, property, fn) => {
                this.eventMap[property] || (this.eventMap[property] = [])
                this.eventMap[property].push(fn)
                return true
            }
        })  
        this.onceEvent = new Proxy({}, {
            set: (target, property, fn) => {
                this.onceEventMap[property] || (this.onceEventMap[property] = [])
                this.onceEventMap[property].push(fn)
                return true
            }
        })
    } 
    on(name, fn) {
        this.event[name] = fn
        delete this.onceEventMap[name]
    }
    off(name) {
        delete this.eventMap[name]
        delete this.onceEventMap[name]
    }
    emit(name, ...val) {
        this.eventMap[name] && this.eventMap[name].forEach(fn => {
            fn(...val)
        })
        this.onceEventMap[name] && (this.onceEventMap[name].forEach(fn => {
            fn(...val)
        }), this.off(name))
    }
    once(name, fn) {
        this.onceEvent[name] = fn
        delete this.eventMap[name]
    }
}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值