JavaScript----原生js封裝事件綁定$on、事件觸發$emit和事件移除$off

原生js封裝事件綁定$on、事件觸發$emit和事件移除$off

事件分析：一對多，觀察者模式

　　1.建立事件倉庫：obj{key:val,key:val}

　　2.事件綁定(name,fn)：先判斷事件名稱name在事件倉庫中是否存在，不存在，則初始化obj[name]=[];将需要綁定的事件push進數組中.

　　3.事件觸發(name,val)：先判斷事件名稱name在事件倉庫中是否存在，存在則周遊數組每個fn元素，調用事件;val為傳遞的參數.

　　4.事件移除(name,fn):先判斷事件名稱name在事件倉庫中是否存在，再判斷fn是否有，最後判斷fn是否存在數組中，存在則删除fn數組元素；若無fn則清空數組.

原生js封裝事件：

let obj = {};
const $on = (name,fn)=>{
    if(!obj[name]){
        obj[name] = [];
    }
    obj[name].push(fn);
}

const $emit = (name,val)=>{
    if(obj[name]){
        obj[name].map((fn)=>{
            fn(val);
        });
    }
}

const $off = (name,fn)=>{
    if(obj[name]){
        if(fn){
            let index = obj[name].indexOf(fn);
            if(index > -1){
                obj[name].splice(index,1);
            }           
        }else{
            obj[name].length = 0;
            //設長度為0比obj[name] = []更優，因為如果是空數組則又開辟了一個新空間，設長度為0則不必開辟新空間
        }  
    }
}

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