JS 手写Event订阅发布模式

class MyEvent {
    fnMap = {}//通过对象的key value 方式存储key 与 fnList 回调的数组方法 关系
    constructor(){

    }
    addEvent(key,fn){ //订阅事件
        if(!(key in this.fnMap)){
            this.fnMap[key] = []
        }
        this.fnMap[key].push(fn)
    }
    dispatchEvent(key,...arg){ //发布事件
        if(!(key in this.fnMap)){
           console.error(key,"事件未注册")
           return;
        }
        this.fnMap[key].forEach(fn => {
            fn(...arg);
        }); 
    }
    removeEvent(key){ //移除事件
        if(!(key in this.fnMap)){
            console.error(key,"事件未注册")
            return;
         }
         delete this.fnMap[key]
    }
}
let test = new MyEvent();
test.addEvent("callFn", (param) => {
    console.log("回调1",param)
})

test.addEvent("callFn", (param) => {
    console.log("回调2",param)
})

test.dispatchEvent("callFn","参数1");
// test.removeEvent("callFn")
test.dispatchEvent("callFn","参数2");

dom 中观察者的应用

// document.body 同时注册两个click在 

 document.body.addEventListener('click' , ()=> {
     console.log("点击处理1")
 })
 document.body.addEventListener('click' , ()=> {
     console.log("点击处理2")
 })
 // document.body.click() //模拟用户点击， 触发上面两个事件