观察者模式: 当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,自动重新更新获取这个变量的新值。

示例代码:

<script>
//观察者(observer)模式: 当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,让他们自动重新获得这个变量的新值。
var data={
  money:1000,
  setMoney(money){
    this.money=money;
    //只要money被修改,就要调用notifyAll()
    this.notifyAll();
  },
  observers:[],
  notifyAll(){
    this.observers.forEach(function(obj){
      obj.getMoney() //要求,凡是进入observers数组中的对象,必须自身携带一个getMoney()函数,表示自己是关注money变化的
    })
  }
}

var obj1={
  money:0,
  getMoney(){
    console.log(`obj1得知data的money被改为${data.money},并重新获得data.money`);
    this.money=data.money;
  }
}
var obj2={
  money:0,
  getMoney(){
    console.log(`obj2得知data的money被改为${data.money},并重新获得data.money`);
    this.money=data.money;
  }
}
var obj3={
  money:0,
  getMoney(){
    console.log(`obj3得知data的money被改为${data.money},并重新获得data.money`);
    this.money=data.money;
  }
}
data.observers.push(obj1);
data.observers.push(obj2);
data.observers.push(obj3);
data.setMoney(900);
console.log(obj1.money, obj2.money, obj3.money)
data.setMoney(800);
console.log(obj1.money, obj2.money, obj3.money)
</script>

1.data对象,专门保存所有关注的数据和操作数据的方法,只不过需要额外定义一个数组保存所有关注这个数据的其他对象

2.setMoney,为data中的修改data中变量的方法,而且在调用setMoney这个方法之后又会调用notifyAll(),notifyAll()用来遍历保存所有观察者对象的数组,并调用每个观察者内部的getMoney()方法。

3.创建多个需要观察该data中money变量的观察者对象,每个观察者都有一个getMoney的值。

4.将这些关注money的对象,追加到data兑现给得观察者数组里面。

结果:只要data中用setMoney修改了money变量就自带notifyAll()函数,遍历保存观察者对象们的数组,自动调用每个观察者的getMoney()函数。则,每个观察者都能在money修改时,第一时间重新获取得money 的新值。

Logo

前往低代码交流专区

更多推荐