手写观察者模式

思路：两个构造函数(被观察者/观察者)

被观察者 Subject

1. 初始化：
   • 事件名 name
   • 状态 state
   • 观察者数组 observes
2. 添加观察者 add
3. 改变事件状态 setState,同时触发 forEach 观察者函数 update
4. 删除观察者 delete

观察者 Observer

1. 初始化：
   • 观察者 name
2. 触发监听函数 update

// 被观察者
//类似addEventListener('click')中的click
class Subject {
  constructor(name) {
    this.name = name //被观察事件
    this.state = '' //被观察状态
    this.observes = [] //存放观察者
  }

  add(Observer) {
    //为了统一发送数据
    this.observes.push(Observer)
  }

  setState(newState) {
    //改变数据
    this.state = newState
    // 通知所有观察者数据改变：update为固定搭配
    this.observes.forEach(o => o.update(newState))
  }

  //移除观察者
  delete(Observer) {
    let index = this.observes.indexOf(Observer)
    if (index < 0) return false
    this.observes.splice(index, 1)
  }
}

// 观察者
//类似addEventListener('click')中的类似addEventListener
class Observer {
  constructor(name) {
    this.name = name //观察者
  }
  update(newState) {
    //用来通知所有的观察者状态更新了
    console.log(this.name + '发现' + newState)
  }
}

//被观察者
let sub = new Subject('灯')

//观察者
let mm = new Observer('小明')
let jj = new Observer('小贱')

//订阅观察者 等价于 观察者订阅
sub.add(mm)
sub.add(jj)

//改变数据
sub.setState('开灯')

//取消观察者
sub.delete(jj)

//改变数据
sub.setState('关灯')