高级前端必会设计模式之观察者模式

前端JavaScript设计模式-观察者模式：

观察者模式简单的概念是，让多个观察者对象同时监听同一个主题对象，当主题对象状态发生变化时，会通知所有的观察者对象，让他们自动触发更新

// 主题对象
class Subject{
  constructor(){
    this.state = 0
    this.observers = []
  }
  getState(){
    return this.state
  }
  setState(state){
    this.state = state
    this.notifyAllObservers()
  }
  notifyAllObservers(){
    this.observers.forEach(observer => {
      observer.update()
    })
  }
  attach(observer){
    this.observer.push(observer)
  }
}

// 观察者对象
class Observer{
  constructor(name,subject){
    this.name = name
    this.subject = subject
    this.subject.attach(this)
  }
  update(){
    console.log(`name=${this.name},state=${this.subject.getState()}`)
  }
}

let sub = new Subject()
let obs1 = new Observer('obs1',sub)
let obs2 = new Observer('obs2',sub)
let obs3 = new Observer('obs3',sub)

// 改变主题对象中state状态时触发
sub.setState('2')
sub.setState('8')
sub.setState('5')

观察者模式在程序中用的比较多，例如jQuery的click点击事件原理就是通过观察者模式实现的

vue提供的数据双向绑定也是运用了观察者模式的思想，还有React等等

观察者模式主要实现了一对一、一对多监听

许多面试者经常在面试中被问到观察者模式和发布订阅相关知识

然后就以为观察者模式的主要思想来源于发布订阅

实际上观察者模式和发布订阅两者互不相关

观察者模式是观察者监听到被观察者发生变化时，观察者自身也同步发生变化

发布订阅是有个中间层来控制发布者和订阅者之间的操作，发布者通知给中间层，中间层接收并对订阅者发送通知，订阅者接收通知