设计模式（观察者模式）

用class实现观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。

• 事件池 ：events
• 监听器 ：on
• 解除监听 ：of
• 触发器 ：dispatch

class Event { 
    events = {} // 事件池记录所有的相关事件及处理函数
    /* 形式
        events = {
            "click":[f1,f2,f3……],
          	 ...
        }
    */
    //添加一个事件处理 eventName 事件名称 fn 对应的处理函数
    on(eventName,fn){	
    	//当添加的事件名称不存在时
        if(!this.events[eventName]){
            this.events[eventName] = [];//设置为空数组
        }
        this.events[eventName].push(fn);//添加对应数组中
    }
    // 删除一个事件处理 eventName 事件名称 fn 对应的处理函数
    off(eventName,fn){
      	// 如果没有添加过该事件直接跳出不处理了
        if(!this.events[eventName]){
            return ;
        }
        //过滤掉当前fn后的剩下的值重新赋值（删除fn）
        this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
    }
    /*
        dispatch 负责把触发到的事件给执行了
    */
    dispatch(eventName){ //触发事件
     	// 如果没有添加过该事件直接跳出不处理了
        if(!this.events[eventName]){
            return ;
        }
        //对应的事件集合执行调用
        this.events[eventName].forEach(item => {
            item.call(this);
        });
    }
}

let event = new Event;
// let f = ()=>{
//     console.log(2);
// }
// event.on("dragstart",()=>{
//     console.log(1);
// })
// event.on("dragstart",f);
// event.off("dragstart",f);
// event.on("dragend",()=>{
//     console.log(3);
// })
console.log(event);

console.dir(document);

/*
    addEventListener
    removeEventListener
*/    
// document.onclick = function(){
//     console.log("呵呵");
// };
// document.onclick = function(){
//     console.log("哈哈");
// };
// document.addEventListener("click",()=>{
//     console.log("呵呵");
// });
// document.addEventListener("click",()=>{
//     console.log("哈哈");
// });