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
 }