js自定义事件接口

不管是angular还是vue都暴露了自定义事件的接口,$emit $on $broadcase等,现在我们尝试自己封装一个简单结构的自定义事件,分别暴露:

  • 事件注册 on
  • 事件触发 emit
  • 事件销毁 off
class Event {
    maps = {};
    emit(type,params) {
        const stack = this.maps[type] || [];
        stack.some(listener => listener(params));
    }

    on(type, listener) {
        if (!this.maps.hasOwnProperty(type)) {
            this.maps[type] = [];
        }
        this.maps[type].push(listener);
    }

    off(type, listener) {
        const index = this.maps.indexOf(listener);
        this.maps.splice(index, 1);
    }
}

说明:注册的监听函数listener储存为一个maps里面的一个数组,就可以重复注册同一事件,然后同一触发;emit触发方法携带params参数,传给listener函数

你可能感兴趣的:(js自定义事件接口)