概念

观察者模式：当对象间存在一对多关系时，则使用观察者模式,比如当一个对象被修改时，则会自动通知他的依赖对象，观察者模式属于行为模式

比如我们最常见的addeventListener

当我们定义一个click事件时，如果使用onClick ,如下，后者就会覆盖前者

  document.onclick = function(){
     console.log('123')
  }
 document.onclick = function(){
  console.log('456')
}

但是我们如果用addEventListener来实现呢，则会全部都输出

 document.addEventListener('click',()=>{
      console.log('123')
    })
    document.addEventListener('click',()=>{
      console.log('456')
    })

接下来我们就自己来实现一个观察者模式的类

    class Event {
      events = {} 
      /*
      添加事件处理

      */
      on(eventName,fn){
        if(!this.events[eventName]){
          this.events[eventName] = []
        }

        if(!this.events[eventName].includes(fn)){
          this.events[eventName].push(fn)
        }
      }
      off(eventName,fn){
        if(!this.events[eventName]){
          return
        }
        this.events[eventName] = this.events[eventName].filter(item=>item!==fn)
      }
      //事件触发
      dispatch(eventName,...arg){
        if(!this.events[eventName]){
          return
        }
        this.events[eventName].forEach(item => {
          item.call(this,...arg)
        });
      }
    }

js设计模式之观察者模式

概念