美文网首页我爱编程
js自定义事件接口

js自定义事件接口

作者: lvzhiyi | 来源:发表于2018-05-17 23:18 被阅读0次

    不管是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自定义事件接口

        本文链接:https://www.haomeiwen.com/subject/vptydftx.html