/*
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. 01.Linux-CentOS系统清理缓存脚本

    #自动清理缓存脚本 [root@k8s-node3 ~]# vim freemem.sh#! /bin/sh#当前已使用内存大小used=`free -m | awk 'NR==2' | awk '{ ...

  2. JS实现网页飘窗

    1.在html中设置一个飘窗的div,div中可以添加图片,添加文字通过css展现在飘窗中: <!--飘窗--> <div id="roll"> <i ...

  3. IPv6是未来趋势?部署IPv6有什么技术障碍?

    没有人在用IPv6?我相信有很多人在谈话中听到了类似的内容,虽然很难说服这些人,越来越多的组织正在部署IPv6,特别是当采用率在20岁时如此缓慢到目前为止存在的一年,这些实例至少让我有机会让他们再次思 ...

  4. django之logo日志的配置和使用

    一:为什么使用日志 假如,在项目调试过程中,在某些地方加上了print()函数,输出了一些调试信息.在项目上线的时候,不要将调试信息暴露出去,但是调试信息还要用,该怎么办?项目测试运行在远端服务器上, ...

  5. Arduino-数学函数

  6. Chrome设置--disable-web-security解决跨域问题

    这里介绍的是--disable-web-security参数.这个参数可以降低chrome浏览器的安全性,禁用同源策略,利于开发人员本地调试. (1)新建一个chrome快捷方式,右键“属性”,“快捷 ...

  7. Python---进阶---函数式编程---按照权重排序

    一. 权重是100 价格占的权重是40%,销量占的权重是17%,评级站的权重是13%,评论占的权重是30% ---------------------------------------------- ...

  8. frps启动

    1.找到frps.ini文件 find  / -name 'frps.ini' 2.窗口启动 ./frps -c ./frps.ini 3.关闭窗口,后台运行 setsid  ./frps -c ./ ...

  9. 【leetcode】523. Continuous Subarray Sum

    题目如下: 解题思路:本题需要用到这么一个数学定理.对于任意三个整数a,b,k(k !=0),如果 a%k = b%k,那么(a-b)%k = 0.利用这个定理,我们可以对数组从头开始进行求和,同时利 ...

  10. python+requests接口自动化框架

    为什么要做接口自动化框架 1.业务与配置的分离 2.数据与程序的分离:数据的变更不影响程序 3.有日志功能,实现无人值守 4.自动发送测试报告 5.不懂编程的测试人员也可以进行测试 正常接口测试的流程 ...