js custom-event

title: js custom-event date: 2018-09-08 20:41:49 tags:

类似于 jq的.on('click',fn) 的自定义事件

class Emitter  {
    constructor(_listeners) {
        this._listeners = {}; //一个全局的对象
    }
    // Method
    subscribe(type,callback) { // 注册事件
        if (typeof this._listeners[type] === "undefined") {
            this._listeners[type] = [];
        }
        if (typeof callback === "function") {
            this._listeners[type].push(callback); //把事件函数存进去
        }
        return this;
    }
    emit(type) { // 触发事件
        var args = Array.prototype.slice.call(arguments, 0)
        var event = args.shift()
        var list, events
        if ( !(events = this._listeners) ) return
        if ( !(list = this._listeners[event]) ) return
        for (var i=0; i<list.length; i++) { // 把参数传进去
            list[i].apply(this, args)
        }
        return this
    }
    release(type, fn) { // 释放
        if (typeof type === "string") {
            this._listeners[type].splice(fn, 1);
        }
        return this;
    }
}
const emitter = new Emitter(); //初始化 emitter
const array = [];
const sub1 = emitter.subscribe('click',  (...args)=> console.log(args)); //注册
array.push({sub1:0})
const sub2 = emitter.subscribe('click',  (...args)=> console.log(args));
array.push({sub1:1})
emitter.release('click', array.sub1) // 释放
emitter.emit('click',1,2) // 唤起