vue封装 $on、$emit、$off

1.$on 事件的订阅

$on(eventName,callback)  参数1:事件名称  参数2:事件函数
判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称
value为一个数组 将callback push到数组中

const eventList = {};
const $on = (eventName,callback)=>{
     if(!eventList[eventName]){
         eventList[eventName] = [];
     }
     eventList[eventName].push(callback)
}

2.$emit 事件的触发

$emit(eventName,[params]) 参数1:事件名称 参数2:[需要传递的参数]
判断当前事件的名称是否存在，如果存在则遍历数组，得到所有的函数，并执行。然后将params当做实参传递到函数中去

const eventList = {};
const $emit = (eventName,params)=>{
    if(eventList[eventName]){
         let arr = eventList[eventName];
         arr.map((cb)=>{
             cb(params)
         })
    }
}

3.$off 事件的解绑

$off(eventName,[callback])  参数1:事件名称  参数2:[事件函数]
判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找到相对应的下标 然后将函数在数组中移除
如果不存在则将整个数组清空

const eventList = {};
const $off = (eventName,callback)=>{
    if(eventList[eventName]){
          if(callback){
                 let index = eventList[eventName].indexOf(callback);
                 eventList[eventName].splice(index,1)
           }
    }else{
           eventList[eventName].length = 0;  
    }
}

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