JavaScript 设计模式-观察者模式

观察者模式

• 观察者模式，是对象的行为模式，在对象之间定义了一对多的依赖关系

• 就是多个观察者和一个被观察者之间的关系，当被观察者发生变化的时候，会通知所有的观察者对象，他们做出相对应的操作

• 实现方法定义一组可变的策略类封装具体算法，定义一组不变的环境类将请求委托给某一个策略类

• 使用场景适用于业务场景中当一个对象的状态发生变化时，需要自动通知其他关联对象，自动刷新对象状态，或者说执行对应对象的方法，

• 比如你是一个老师，需要通知班里家长的时候，你可以建一个群（列表）。每次通知事件的时候只要循环执行这个列表就好了（群发），而不用关心这个列表里有谁

class MessageCenter {
  constructor() {
    this.message = '暂无通知'
    this.members = [] // 存放当前组的所有成员
  }

  // 获取通知消息
  getMessage() {
    return this.message
  }

  // 设置消息
  setMessage(message) {
    this.message = message
  }

  // 发送通知消息
  sendMessage(message = this.getMessage()) {
    this.message = message
    this.notifyAllObservers()
  }

  // 通知所有观察者
  notifyAllObservers() {
    this.members.forEach(member => {
      member.update()
    })
  }

  // 在成员实例化的时候,将成员添加到指定的group
  addMember(member) {
    this.members.push(member)
  }
}

// 观察者, 每个成员, 对象被实例化时被添加进 group, 被通知时执行 响应信息
class Member {
  constructor(name, group) {
    this.name = name
    this.group = group
    this.group.addMember(this) // 初始化将成员时，同时将实例添加到指定的组
  }

  // 触发观察者后动作, 发送响应信息
  update() {
    console.info(`${this.name}收到通知: ${this.group.getMessage()}`)
  }
}

let messageGroup1 = new MessageCenter()
let t1 = new Member('李妈妈', messageGroup1)
let t2 = new Member('王爸爸', messageGroup1)
let t3 = new Member('张爷爷', messageGroup1)

let messageGroup2 = new MessageCenter()
let mark = new Member('mark', messageGroup2)
let justin = new Member('justin', messageGroup2)

console.info('---------------- messageGroup1 测试 --------------')
messageGroup1.setMessage('开家长会')
messageGroup1.sendMessage()
messageGroup1.setMessage('开运动会')
messageGroup1.sendMessage()
messageGroup1.sendMessage('测试下给定消息')

console.info('---------------- messageGroup2 测试 --------------')
messageGroup2.setMessage('开饭咯')
messageGroup2.sendMessage()