/*
on 绑定

emit 触发

off 解绑

//存放事件
eventList = {
  key:val  
  handle:[]
}

1对多
on(eventName,callback);
handle:-------N多个
1、判断事件名称是否存在

2、如果存在的情况下将cb存放在eventName这个数组当中

3、如果不存在创建key值为eventName val值为数组

1对多
emit(eventName,params);

当调用emit的时候获取到eventName这的值,对值判断,如果值不存在直接return
如果存在遍历这个值全局进行调用,然后将params传入这些函数

off(eventName,[callback])
当调用off的时候获取到eventName这的值,对值判断,如果值不存在直接return
如果存在判断callback是否存在 如果存在删除指定的函数
如果不存在将当前数组清空

*/

const EventList = {

}

const on = function(eventName,callback){
  if(!EventList[eventName]){
  EventList[eventName] = [];
}

  EventList[eventName].push(callback);
}

const emit = function(eventName,params){
  if(!EventList[eventName])return;

  EventList[eventName].map((cb)=>{
    cb(params)
  })
}

const off = function(eventName,callback){
   if(!EventList[eventName])return;

  if(callback){
    let index = EventList[eventName].indexOf(callback);
    EventList[eventName].splice(index,1);
  }else{
    EventList[eventName] = [];
  }
}

事件 on emit off 封装的更多相关文章

  1. 第三篇 :微信公众平台开发实战Java版之请求消息,响应消息以及事件消息类的封装

    微信服务器和第三方服务器之间究竟是通过什么方式进行对话的? 下面,我们先看下图: 其实我们可以简单的理解: (1)首先,用户向微信服务器发送消息: (2)微信服务器接收到用户的消息处理之后,通过开发者 ...

  2. vue2自定义事件之$emit

    父组件: API上的解释不多: https://cn.vuejs.org/v2/api/#vm-emit vm.$emit( event, […args] ) 参数: {string} event [ ...

  3. $on在构造器外部添加事件(通过$emit进行外部调用)$once执行一次的事件(通过$emit进行外部调用)$off关闭事件

    $on 在构造器外部添加事件. $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法. 如果按钮在作用域外部,可以利用$emit来执行. html <div id=&quo ...

  4. 组件:事件传递$emit

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  5. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  6. 原生js实现jquery库中部分事件的功能(jquery库封装二)

    继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...

  7. JS-DOM2级事件对象跨浏览器处理(已封装)

    var eventUill = { //添加事件 addHander: function(element, type, handler) { if(element.addEventListener) ...

  8. 基于epoll封装的事件回调miniserver

    epoll技术前两节已经阐述过了,目前主要做一下封装,很多epoll的服务器都是采用事件回调方式处理, 其实并没有什么复杂的,我慢慢给大家阐述下原理. 在networking.h和networking ...

  9. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...

随机推荐

  1. pandas进阶

    pandas是基于numpy构建的库,在数据处理方面可以把它理解为numpy的加强版,由于numpy主要用于科学计算,特长不在于数据处理,我们平常处理的数据一般带有列标签和index索引,这时pand ...

  2. 1125. Chain the Ropes (25)

    Given some segments of rope, you are supposed to chain them into one rope. Each time you may only fo ...

  3. IDEA更改左侧目录层级结构

    齿轮---Compact Empty Middle Packages

  4. gradle配置国内阿里云镜像

    对单个项目生效,在项目中的build.gradle修改内容 buildscript { repositories { maven { url 'http://maven.aliyun.com/nexu ...

  5. "Host 'onlyyou-bridal.jp' is blocked because of many connection errors; unblock with 'mysqladminlush-hosts'"

    错误链接数太多 ,清理mysqladminlush-hosts 这个文件 直接 service mysqld restart  解决了~~~ ccess denied for user 'root'@ ...

  6. Zookeeper学习笔记(中)

    Zookeeper学习笔记(中) Zookeeper的基本原理和基本实现 深入了解ZK的基本原理 ZK的一致性: ZAB 协议: Zookeeper 原子消息广播协议 ZK通过选举保证 leader ...

  7. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  8. Django【第22篇】:基于Ajax实现的登录

    基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...

  9. 认识js数组

    1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数 ...

  10. React Native 之SectionList

    接上一篇: /pages/SectionListDemo.js import React, {Fragment,Component} from 'react'; import { SafeAreaVi ...