Vue当中的观察者模式(observer)
观察者模式: 当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,自动重新更新获取这个变量的新值。示例代码:<script>//观察者(observer)模式: 当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,让他们自动重新获得这个变量的新值。var data={money:1000,setMoney(money){this.money=money;//只要mo
·
观察者模式: 当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,自动重新更新获取这个变量的新值。
示例代码:
<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 的新值。
更多推荐
已为社区贡献2条内容
所有评论(0)