简单的观察者模式

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

今天，咱们来写一个简单的观察者模式

首先，定义两个类(观察者和被观察者)

//被观察者
class Subject{
  constructor(name){
    this.name = name;
  }
}
//观察者
class Observer{
  constructor(name){
    this.name = name
  }
}

创建三个对象:
    1)观察者(observer): o1(男主人)、o2(女主人)
    2) 被观察者(subject): sub(猫咪)

let sub = new Subject("猫咪")
let o1 = new Observer("男主人")
let o2 = new Observer("女主人")

接下来要做的，就是将观察者绑在被观察者身上，这样就建立起了关系。

class Subject{
  constructor(name){
    this.name = name;
    this.observers = []; //添加观察者
  }
  //定义添加观察者的方法
  attach(observer){
    this.observers.push(observer);
  }
}

调用添加观察者方法，将o1、o2添加进去

sub.attach(o1);
sub.attach(o2);

这样关系就搭建好了,现在是验证时间。

有这么个场景，猫咪初始状态玩得很开心，现在更改状态饿了，要吃饭，观察者要如何才能观察到猫咪状态的改变呢？

先给被观察者添加一个初始状态:

this.state = "玩的很开心" //初始状态

给被观察者定义一个改变状态的方法

  changeState(newState){
    this.state = newState;
    //改变状态了，要立即通知观察者,状态已改变
    this.observers.forEach(o => o.update(newState))
  }

给观察者定义一个接受新状态的方法

  update(newState){
    console.log(this.name +"观察到猫咪: "+ newState)
  }

这样，一但被观察者的状态改变，观察者就能知晓了。验证一下

sub.changeState("饿了,要立刻马上吃饭")

结果输出：

附完整代码：

class Subject{
  constructor(name){
    this.name = name;
    this.observers = []; //存储观察者
    this.state = "玩得很开心" //初始状态
  }
  attach(observer){
    this.observers.push(observer);
  }
  changeState(newState){
    this.state = newState;
    //通知观察者,状态已改变
    this.observers.forEach(o => o.update(newState))
  }
}

class Observer{
  constructor(name){
    this.name = name
  }
  update(newState){
    console.log(this.name +"观察到猫咪: "+ newState)
  }
}

let sub = new Subject("猫咪")
let o1 = new Observer("男主人")
let o2 = new Observer("女主人")
sub.attach(o1);
sub.attach(o2);
sub.changeState("饿了,要立刻马上吃饭")