【孤独旅者】Vue-封装$on,$emit,$off

let EventList = {
//key:[]
}

const $on = (EventName, cb) => {
if (!(EventList[EventName])) {
EventList[EventName] = [];
}
EventList[EventName].push(cb);
}
/*
$on:事件绑定
$on(事件名称,回调函数)
先判断当前事件名称是否存在,如果存在则直接将当前函数push到当前数组中去,如果不存在则创建一个数组,然后将当前函数push到数组中去
*/

const $emit = (EventName, params) => {
if (!EventList[EventName]) return;

let EventLists = EventList[EventName];
EventLists.map((cb) => {
params ? cb(params) : cb(); //此句可有可无
})
}
/*
$emit:事件触发
$emit(事件名称,params)触发事件的时候需要触发当前事件身上所以的函数

1、判断当前当前事件名称是否存在,如果不存在则什么也不用干 直接return;
2、如果存在的情况下,获取到当前事件名称所对应的所有函数,遍历执行
3、如果第二次参数存在的情况下,调用函数的时候将第二个参数传递进去
*/

const $off = (EventName, callback) => {
if (EventList[EventName]) {
let EventListsOff = EventList[EventName];
if (cb) {
EventList[EventName] = EventListsOff.filter((cb) => {
return cb != callback;
})
} else {
EventList[EventName].length = 0;
}
}
}
/*
$off:事件解绑
$off(事件名称,需要解绑的函数
如果没有传递第二个参数则解绑所以事件
如果传递了第二个参数则解绑指定函数
1、首先判断当前事件名称是否存在,如果不存在 直接return
2、如果事件名称存在,则判断第二值是否存在,如果存在则将这个函数从数组中移除,如果不存在直接将数组清空
*/

export default {
$on,
$emit,
$off
}

猜你喜欢

转载自www.cnblogs.com/jeremy94/p/10187909.html