手动封装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] = [];
}
}
将其暴露出去方便引用
export default {
$on:on,
$emit:emit,
$off:off
}
手动封装on,emit,off的更多相关文章
- 【Vue】---- 手动封装on,emit,off
一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 如何封装$on,$emit,$off——学vue前你必须懂得封装!
let evevtListenr = {} 封装$on const $on = (eventName,cb)=>{ if(!evevtListenr[eventName]){ ...
- 手动封装一个node命令集工具
了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...
- 手动封装一个属于自己的AJAX类库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手动封装OpenCV1.0的IplImage读取保存功能遇到的小问题
最近准备重新学习图像处理的知识,主要目的是自己实现一遍图像处理的算法,所以除了读取.保存图像外的操作都自己写,没想到直接封装OpenCV的读取.保存功能的第一步就出错.关键代码如下 void MyIm ...
- 手动封装js原生XMLHttprequest异步请求
Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...
- 【react】---手动封装一个简易版的redux
export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = &qu ...
随机推荐
- Python 程序下载经办人照片
进行图片下载,需要提前准备好下载图片的存放文件夹: python在与文件.目录打交道时,少不了os模块.os模块包含普遍的操作系统功能. os.path.exists(filepath)——检验指定的 ...
- 目标检测框架py-faster-rcnn修改anchor_box
众所周知,anchor_box控制了回归框的大小,我们有时候检测的是大物体或小物体时,需要调整回归框的大小的时候,得改一下anchor_box.基于rgb公开的py-faster-rcnn修改anch ...
- Eurekalog
Eurekalog E:\Program Files (x86)\Neos Eureka S.r.l\EurekaLog 7\Packages\Studio25\EurekaLogComponent ...
- Spring -- <tx:annotation-driven>注解基于JDK动态代理和CGLIB动态代理的实现Spring注解管理事务(@Trasactional)的区别。
借鉴:http://jinnianshilongnian.iteye.com/blog/1508018 基于JDK动态代理和CGLIB动态代理的实现Spring注解管理事务(@Trasactional ...
- ecs主机被破解后下载的执行文件的脚本
#!/bin/bashchmod 777 xiaochattr 777 haha/etc/init.d/iptables stop;service iptables stop;SuSEfirewall ...
- XSLT 创建CDATA节点
创建文本结点 (1)直接写入文本: text1 (2)通过<xsl:text>创建文本结点: <xsl:text>text2</xsl:text> (3)通过< ...
- linux check
建议安装chkrootkit.rkhunter.Lynis.ISPProtect这类安全工具,定期做扫描
- Handler相关
1.延迟方法 Message msg = new Message(); msg.what = 0x111; // netWorkHandler.sendMessage(msg); //延迟方法三 ...
- OpenJudge NOI 4976 硬币
http://noi.openjudge.cn/ch0207/4976/ 描述 宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面 ...
- AndFix注意事项
1.生成补丁,修改前后的apk包都必须签名. 2.AndFix 不支持修改布局文件. 3.文件的路径必须正确. 4.AndFix 不支持添加匿名内部类(就是点击事件). 5.AndFix 不支持添加新 ...