观察者模式

观察者模式
又称 发布/订阅 模式
目前市场上的开发人员, 分成两派人员
=> 一派人, 认为 观察者 和 发布/订阅 是一个设计模式
=> 一派人, 认为 观察者 和 发布/订阅 是两个设计模式
两派人到现在也没有定论

  观察者角度(这两个是一个东西)
    + 就像我们小时候的班主任一样
      => 班主任, 年级主任, 教务主任, 都有一个共同的能力叫做 请家长
      => 他们就是暗中观察我们的人, 一旦我们做的事情和他们想的不一样, 就回触发技能
      => 他们就是观察者, 当被观察者一旦出现变化, 立马触发他们的技能
    + 被观察者
      => 就是一个学生, 你的状态就应该是 好好学习
      => 一旦你的状态改变为 玩手机
      => 立马就会通知正在观察着你的人, 观察着你的人, 就会触发技能
    + 目的:
      => 让 观察者 看着 被观察者, 只要数据改变了
      => 就让 观察者 做一些事情
*/


// 有两个构造函数
// 1. 被观察者(学生, 小明, 小红, ...)
class Student {
  constructor () {
    // 一个学生本身的状态, 就应该是好好学习
    this.state = '好好学习'
    // 准备一个数组
    // 谁在检时者这个学生, 就放在数组里面
    // 将来一旦状态从 好好学习 变成 玩手机的时候, 应该让这个 [] 里面的所有老师触发技能
    this.observers = []
  }

  // 方法
  // 1. 可以改变状态的方法
  setState (value) {
    // 可以把自己的状态改变
    this.state = value
    // 状态一旦改变, 就要通知看着你的人
    this.notify()
  }

  // 2. 获取自己的状态
  getState () {
    return this.state
  }

  // 3. 添加观察着
  // 向 this.observers 里面追加一个看着这个同学的人
  attach (observer) {
    this.observers.push(observer)
  }

  // 4. 通知 this.observers 数组里面的每一个人, 状态改变了
  notify () {
    this.observers.forEach(item => item.qingjiazhang( this.state ))
  }

}

// 2. 观察着(老师, 班主任, 教学主任, 年级主任, ...)
class Observer {
  // constructor 就相当于 es5 的构造函数体 => 构造器
  constructor (name) {
    // 用它来标明一下我是班主任还是年级主任还是教务主任
    this.name = name
  }

  // 方法, 就是这些老师能触发的技能
  qingjiazhang (state) {
    console.log(`我是 ${ this.name }, 因为你 ${ state } 了, 我要请你家长来!`)
  }
}


var xiaoming = new Student() // 被观察者

var banzhuren = new Observer('班主任') // 观察者
var jiaowuzhuren = new Observer('教务主任') // 观察者
var nianjizhuren = new Observer('年级主任') // 观察者
// 让班主任看着小明
xiaoming.attach(banzhuren)
// 让教务主任看着小明
xiaoming.attach(jiaowuzhuren)
// 让年级主任看着小明
xiaoming.attach(nianjizhuren)

// 当小明状态改变的时候
//   xiaoming.setState() 就能改变 小明 现在的状态
//   就会触发 xiaoming.notify()
//   就会把 xiaoming.observers 这个数里里面的每一个对象的 请家长技能调用
xiaoming.setState('玩手机') // 对象调用方式, this -> 点前面是谁就是谁





// console.log(xiaoming)