美文网首页我爱编程
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中的事件

    JS中的事件 一:自定义事件 1.使用Event自定义事件 使用Event接口,可以自定义事件。但是该接口无法在事...

  • js自定义事件接口

    不管是angular还是vue都暴露了自定义事件的接口,$emit $on $broadcase等,现在我们尝试自...

  • 自定义事件js

    title: 自定义事件date: 2017-06-06 15:36:04tags: 自定义事件 js的自定义事件...

  • jQuery例子记录(持续更新)

    目录: 1.自定义事件2.操作DOM(与JS原生对比) 1.自定义事件 绑定自定义事件: 事件名称refresh....

  • mitt

    安装 js 引入: 发送mybus.emit('自定义事件名称','数据');接收mybus.on('自定义事件名...

  • Markdown

    touch.js学习 准备工作 引用 touch.js是百度开源的一套支持原生js事件和自定义事件的js库...

  • MarkDown学习

    touch.js学习 准备工作 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多...

  • MARKDOWN学习?

    touch.js学习 准备工作 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多...

  • touch.js

    touch.js学习 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多这种库 封...

  • IFE2017,动态数据绑定(二)学习笔记

    自定义事件 我们知道JS里绑定事件有addEventListener()这个方法。在JS中我们可以这样创建一个自定...

网友评论

    本文标题:js自定义事件接口

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