Vue封裝的事件函數

/*
事件池
eventList = {
handle:[fn1,fn2,fn3]
abc:[fn1,fn2,fn3]
}
||
eventList = {

}

$on(eventName,callback)
判斷當前事件名稱是否存在，如果不存在則創建一個key值為事件名稱 value為一個數組
將callback push到數組中

如果事件名稱存在則直接添加到數組中去

$emit(eventName,[params])

判斷當前事件名稱是否存在，如果存在則遍歷數組，得到所有的函數，並執行。然后將params當做實參傳遞到函數中去

$off(eventName,[callback])

判斷當前事件名稱是否存在，如果存在繼續判斷第二個參數是否存在，如果存在則找到相對於的下標 然后將函數在數組中移除
如果不存在則將整個數組清空
*/

const eventList = {}

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

 

const $emit = (eventName,params)=>{
if(eventList[eventName]){
let arr = eventList[eventName];
arr.map((cb)=>{//cb是遍歷的數組中的每一個函數 map會返回一個item
cb(params);
})
}

}

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;
}
}
}

function fn1(val){
console.log(111,val)
}

function fn2(val){
console.log(222,val)
}

function fn3(val) {
console.log(333,val)
}

 

$on("handle",fn1)
$on("handle",fn2)
$on("handle",fn3)
$off("handle",fn1)
$emit("handle","abc")