手动封装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_05 可变类型与不可变类型、集合、字符串格式化
可变数据类型与不可变数据类型: 1.可变:列表,字典 2.不可变:字符串,数字,元组 访问顺序: 1.顺序访问:字符串,列表,元组 2.映射:字典 集合 由不同元素组成的集合,集合中是一组无序排列的可 ...
- 使用AsyncTask类实现简单的异步处理操作
AsyncTask: 1.这是一种相比Handler更轻量级的处理异步任务的工具类 2.它和Handler类一样,都是为了不影响主线程(UI)而使用的((注:UI的更新只能在主线程中完成) 3.这个工 ...
- com.mysql.jdbc.Connection.isValid(I)Z
spring boot项目 运行提示这个错误的时候 只需要配置
- LevelDB源码分析-Compact
Compaction compact由背景线程完成,代码中触发背景线程的函数为: void DBImpl::MaybeScheduleCompaction() { mutex_.AssertHeld( ...
- SQL 读取csv 文件批量插入数据
use test /* create table temp_pre ( vc_product_id varchar(20) default '', en_in_amount numeric(9,2)d ...
- Junit介绍以及使用
在介绍junit之前,把一些知识点提前了解一下 单元测试是一个对单一实体(类或方法)的测试. 测试用例(Test Case)是为某个特殊目标而编制的一组测试输入.执行条件以及预期结果,以便测试某个程序 ...
- Python实现EXCEL表格的排序功能
EXCEL的数值排序功能还是挺强大的,升序.降序,尤其自定义排序,能够对多个字段进行排序工作. 那么,在Python大法中,有没有这样强大的排序功能呢?答案是有的,而且本人觉得Python的排序功能, ...
- HALCON示例:BOTTLE.HDEV 光学字符识别(分割OCR)
* * bottle.hdev: Segment and read numbers on a beer bottle 分割读取啤酒瓶上的数字* * Step 0: Preparations* Spec ...
- BlockTrain网络
[BlockTrain网络] 1.每个节点都参与全⽹络的路由功能,同时也可能包含其他功能.每个节点都参与验证并传播交易及区块信息,发现并维持与对等节点的连接.在图6-1所⽰的全节点⽤例中,名为“⽹络路 ...
- python爬虫小说代码,可用的
python爬虫小说代码,可用的,以笔趣阁为例子,python3.6以上,可用 作者的QQ:342290433,汉唐自远工程师 import requests import refrom lxml i ...