如何手动封装 $ on off emit?
思路
$on(eventName,cb)
判断当前事件是否存在,如果存在则直接将函数push添加到数组中去
如果事件名称不存在,则创建一个数组 然后将函数添加到数组中去
$emit(eventName,[params])
判断当前事件是否存在 如果存在则拿到当前事件名称的数组,将其遍历调用,如需传递参数则在调用的时候
添加参数
$off(eventName,[cb])
判断当前事件是否存在,如果存在,则判断第二个参数是否存在
如果参数2不存在直接将数组清空
如果存在则找函数的下标,进行移除
let eventListener = {} const $on = (eventName,cb)=>{ if(!eventListener[eventName]){ eventListener[eventName] = []; } eventListener[eventName].push(cb) } const $emit = (eventName,params)=>{ if(eventListener[eventName]){ eventListener[eventName].map((cb)=>{ cb(params); }) } } const $off = (eventName,cb)=>{ if(eventListener[eventName]){ if(cb){ let index = eventListener[eventName].indexOf(cb); eventListener[eventName].splice(index,1); }else{ eventListener[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","懵逼了?");