1. 程式人生 > >【孤獨旅者】Vue-封裝$on,$emit,$off

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