手动封装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 ...
随机推荐
- spring mvc返回json格式和json字符串
首先有必要说一下,json和json字符串是不一样的,后者是一个字符串.而json是一个对象 当然如果调用位置是后台程序这几乎没有区别,因为在后台,无论什么格式数据,都是从响应流中读取字符串. 但是在 ...
- Java Bug -- java.util.ConcurrentModificationException
java.util.ConcurrentModificationException at java.util.ArrayList$ArrayListIterator.next(ArrayList.ja ...
- Beta冲刺——第一天
beta冲刺:第一天 各个成员今日完成的任务 成员 冯晓.马思远 彭辉.王爽 吴琼.郝延婷 今日完成任务 ·参会人员注册代码规范与功能测试 ·网站的前端代码调整 ·代码规范 ·系统功能测试 ·博客撰写 ...
- 《CSAPP》地址翻译
本节所使用的符号: 地址翻译 地址翻译是一个N元素的虚拟地址空间(VAS)中的元素和一个M元素的物理地址空间(PAS)中元素之间的映射. 映射实现: MMU利用页表来实现这种映射.CPU中的一个控制寄 ...
- Linux - 文件和目录
文件和目录(理解) 目标 理解 Linux 文件目录的结构 01. 单用户操作系统和多用户操作系统(科普) 单用户操作系统:指一台计算机在同一时间 只能由一个用户 使用,一个用户独自享用系统的全部硬件 ...
- LAB4
鼠标放上去可以看文件说明,exception则在exception中处理 文件头里面穿信息,为404 out.flush();把以前的全部冲掉了,所以需要放在后面
- Solidity类型Uint类型区分?
1. Solidity中默认 Uint 也就是Uint256, 也就是 无符号 256位整数范围,即 2的 256次方 减一的 10进制范围, 预计大小为: 115792089237316195423 ...
- 洛谷4556 [Vani有约会]雨天的尾巴
原题链接 每个点开一个权值线段树,然后用树上差分的方法修改,最后自底向上暴力线段树合并即可. 不过空间较大,会\(MLE\),写个内存池就可以了. #include<cstdio> #in ...
- 转 node.js和 android中java加密解密一致性问题;
原文地址,请大家去原文博客了解; http://blog.csdn.net/linminqin/article/details/19972751 我保留一份,防止删除: var crypto = re ...
- 21. pt-stalk
pt-stalk 适用场景:MySQL Server 性能波动出现的频率很低.例如.几天一次MySQL Server 性能波动出现的机率很快.例如.几秒闪过 pt-stalk h=192.168.10 ...