【孤独旅者】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

}

转载于:https://www.cnblogs.com/jeremy94/p/10187909.html