事件 on emit off 封装
/*
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 封装的更多相关文章
- 第三篇 :微信公众平台开发实战Java版之请求消息,响应消息以及事件消息类的封装
微信服务器和第三方服务器之间究竟是通过什么方式进行对话的? 下面,我们先看下图: 其实我们可以简单的理解: (1)首先,用户向微信服务器发送消息: (2)微信服务器接收到用户的消息处理之后,通过开发者 ...
- vue2自定义事件之$emit
父组件: API上的解释不多: https://cn.vuejs.org/v2/api/#vm-emit vm.$emit( event, […args] ) 参数: {string} event [ ...
- $on在构造器外部添加事件(通过$emit进行外部调用)$once执行一次的事件(通过$emit进行外部调用)$off关闭事件
$on 在构造器外部添加事件. $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法. 如果按钮在作用域外部,可以利用$emit来执行. html <div id=&quo ...
- 组件:事件传递$emit
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 原生js实现jquery库中部分事件的功能(jquery库封装二)
继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...
- JS-DOM2级事件对象跨浏览器处理(已封装)
var eventUill = { //添加事件 addHander: function(element, type, handler) { if(element.addEventListener) ...
- 基于epoll封装的事件回调miniserver
epoll技术前两节已经阐述过了,目前主要做一下封装,很多epoll的服务器都是采用事件回调方式处理, 其实并没有什么复杂的,我慢慢给大家阐述下原理. 在networking.h和networking ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
随机推荐
- 认识一下Qt用到的开发工具
http://c.biancheng.net/view/3868.html Qt 不是凭空产生的,它是基于现有工具链打造而成的,它所使用的编译器.链接器.调试器等都不是自己的,Qt 官方只是开发了上层 ...
- Spring Boot 支持https
1. 生成key JDK下 keytool -genkeypair -alias mySSL -keyalg RSA -keystore E:\tomcat.key 其中-alias是证书的别名,RS ...
- Linux日常之显示文件总结
1. 将文件file1.file2的内容都显示出来,并显示行号 cat -n file1 file2 2. 将文件file1.file2中带有字符'h'的行显示出来 cat -n file1 file ...
- mepg
MPEG(Moving Picture Experts Group,动态图像专家组)
- Cron表达式 详解
Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: (1) 7个域: Seconds Minutes Hours DayofMon ...
- Zookeeper学习笔记(下)
这是ZK学习笔记的下篇, 主要希望可以分享一些 ZK 的应用以及其应用原理 我本人的学习告一段落, 不过还遗留了一些ZK相关的任务开发和性能测试的任务, 留待以后完成之后再通过其他文章来进行分享了 Z ...
- 前端之CSS:属性操作2
css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.te ...
- JSP页面与html页面在ie下显示的样式不一致的问题
今天前端将样式与html给我文件我转化为jsp之后在我的电脑上使用IE11的IE9和其他浏览器都没有问题,但是在发给其他人检查的时候却发现在win7电脑的IE9上出现样式错乱的问题,前端调试无果的情况 ...
- Spring Cloud架构教程 (四)服务网关(路由配置)
传统路由配置 所谓的传统路由配置方式就是在不依赖于服务发现机制的情况下,通过在配置文件中具体指定每个路由表达式与服务实例的映射关系来实现API网关对外部请求的路由. 没有Eureka和Consul的服 ...
- border、outline、boxshadow那些事
border 边框是我们美化网页.增强样式最常用的手段之一.例如: <div class="text"></div> .text { width: 254p ...