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函数

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,793评论 0 1
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,074评论 4 129
  • 1.1 spring IoC容器和beans的简介 Spring 框架的最核心基础的功能是IoC(控制反转)容器,...
    simoscode阅读 6,748评论 2 22