JS设计模式-观察者模式

• 观察者模式 包含发布订阅
• 与发布订阅的区别 ： 发布和订阅是没有关系的，观察者模式观察者和被观察者是有关系的，观察者可以是多个，类似订阅

现在我们有一个新需求，观察小朋友的变化，如果小朋友的状态发生了变化，我们要第一时间知道：

// 观察者模式 包含发布订阅
// 与发布订阅的区别 ： 发布和订阅是没有关系的，观察者模式观察者和被观察者是有关系的，观察者可以是多个，类似订阅
class Subject {  // 被观察者
  constructor(name) {
    this.name = name;
    this.observer = [];
    this.state = '学习'
  }
  attach(o) { // 注册观察者
    this.observer.push(o);
  }
  setState(newState) {
    this.state = `${this.name}在${newState}`;
    this.observer.forEach(o => o.update(this.state));
  }
}

class Observer {  // 观察者
  constructor(name) {
    this.name = name
  }
  update(newState) {
    console.log(`观察者：${this.name};被观察者：${newState}`)
  }
}

let o1 = new Observer('老大'); // 创建观察者1
let o2 = new Observer('老2');  // 创建观察者2
let s1 = new Subject('小弟');  // 创建被观察者1
s1.attach(o1); // 注册观察者
s1.attach(o2); // 注册观察者
s1.setState('吃饭'); // 被观察者状态改变  观察者:老大;被观察者:小弟在吃饭    观察者:老2;被观察者:小弟在吃饭
s1.setState('睡觉'); // 被观察者状态改变  观察者:老大;被观察者:小弟在睡觉    观察者:老2;被观察者：小弟在睡觉