事件发布订阅系统

创建

const event = new Events()

方法

• 订阅事件on('eventName', fn,[...args])
• 触发事件fire('eventName',[...fireArgs])
• 取消订阅off('eventName',fn)
• 订阅事件(一次性)once('eventName', fn,[...args])

代码

class Events {
    constructor(){
        this.events = {}
    }
    on(eventName,fn,...args){
        if(!this.events[eventName]){
            this.events[eventName] = []
        }
        this.events[eventName].push({
            fn,
            args
        })
    }
    fire(eventName,...fireArgs){
        var sss = fireArgs
        if(!this.events[eventName]) return
        this.events[eventName].forEach((item,idx,arr) => {
            item.fn.call(null,...item.args,...sss)
            if(item.once){
                arr.splice(idx,1)
            }
        })
    }
    off(eventName,fn){
        if(!this.events[eventName]) return
        const idx = this.events[eventName].findIndex((item) => item.fn == fn)
        this.events[eventName].splice(idx,1)
    }
    once(eventName,fn,...args){
        if(!this.events[eventName]){
            this.events[eventName] = []
        }
        this.events[eventName].push({
            fn,
            args,
            once: true
        })
    }
}

测试

	var obj ={
	    aaa:'asdasd',
	    fn1: function(... args){
	        console.log('event111', ... args, this.aaa)
	    },
	    fn2: (...args) => console.log('event222', ... args, this.aaa)
	}
	var fn3 = (... args) => console.log('event333', ... args)
	var event = new Events();
	event.on('eventname', obj.fn1.bind(obj), 1, 2, 3);
	// event111 1 2 3 4 5 6 asdasd
	event.on('eventname', obj.fn2.bind(obj), 1, 2, 3);
	// 箭头函数this不能绑定
	// event222 1 2 3 4 5 6 undefined
	event.on('eventname', fn3, 1, 2, 3);
	// event222 1 2 3 4 5 6
	event.fire('eventname', 4, 5, 6);