观察者&&发布订阅

这次我们要写观察者模式、上方的图只是为了表达观察者和发布订阅者模式的区别

观察者模式

// 观察者类
class Observer{
    constructor(name, subject){
        this.name = name;
        this.subject = subject;
        this.subject.addObserver(this)
    }
    // 接收目标变化
    update(){
        console.log(`${this.name}：目标发生----变化了 ${this.subject.getState()}`)
    }
}
// 目标类
class Subject{
    constructor(){
        this.observer = [];
        this.state = '0'
    }
    getState(){
        return this.state;
    }
    // 改变状态
    setState(state){
        this.state = state;
        // 通知观察者
        this.notifyAll()
    }
    // 添加观察者
    addObserver(observer){
        this.observer.push(observer);
    }
    // 通知观察者
    notifyAll(){
        this.observer.forEach( item => item.update())
    }
}
// 目标对象
let subject = new Subject();
// 观察者们
let a = new Observer('a',subject)
let b = new Observer('b',subject)
let c = new Observer('c',subject)
subject.setState('111')

观察者模式：观察者和目标直接进行交互、观察者直接订阅subject、当subect被激活的时候会触发观察者的监听事件

发布订阅模式

class EventBus{
  constructor(){
      this.callbacks = {}
  }
  $on(name,fn){
      if(!this.callbacks[name]) this.callbacks[name] = [];
      this.callbacks[name].push(fn);
  }
  $emit(name, arg){
      if(this.callbacks[name]){
          this.callbacks[name].forEach( cb => cb(arg))
      }
  }
}
let eventBus = new EventBus()
// 页面1---添加event1的订阅
eventBus.$on('event1',(arg)=>{
  console.log('页面1----event1变化了',arg)
})
// 页面2 ---添加event1的订阅
eventBus.$on('event1',(arg)=>{
  console.log('页面2---event1变化了',arg)
})
// 五秒后发布通知
setTimeout( () =>{
  eventBus.$emit('event1',{
      data:1111
  })
}, 5000)

vue的数据双向绑定和事件总线就是使用这个模式、订阅者订阅某个事件名称标记、发布者直接携带参数广播事件！

总结

优点

• 抽象耦合：在观察者和被观察者之间，建立了一个抽象的耦合，由于耦合是抽象的，可以很容易的扩展观察者和被观察者

• 广播通信

  缺点

• 依赖过多：观察者之间的细节依赖过多，会增加事件消耗和程序的复杂度、这里的 细节依赖 指的是 触发机制 , 触发链条 ; 如果 观察者设置过多 , 每次触发都要花很长时间去处理通知

• 循环调用：观察者和被观察者之间绝对不允许循环以来、否者二者之前循环调用导致系统奔溃