观察者模式
- 观察者模式是基于发布订阅模式的,所以在介绍观察者模式前,我们先来看看发布订阅模式吧
- 发布订阅模式
发布订阅模式 主要有两个方法 发布-- emit 和 订阅 --on
订阅的函数不会立即执行 只有当触发emit 的时候才会依次执行
以生活中的例子来说—比如在购物时,遇到库存不足的商品,点击有货通知,等有货了就会执行通知发送短信,下面我们就这个例子模拟实现一下,感受一下用法
let event = {
_arr:[], //用来存储订阅
on(fn){
this._arr.push(fn);
},
emit(){
this._arr.forEach(fn=>fn());
}
}
let shops = {
event,
subscribe(){
event.on(()=>{
console.log("到货啦!!");
})
},
Purchase(){
setTimeout(() => {
event.emit();
}, 3000);
}
}
shops.subscribe(); //用户预定到货通知
shops.subscribe();
shops.Purchase(); //进货后通知用户
- 接下来我们进入主题,来看看观察者模式是如何实现的
我们可以看看这个类图,先进行一波思考
我们大致可以看出,观察者在被观测者中存储,可以一对一也可以一对多,当被观测者状态改变时,通知观察者执行操作
我们在以生活中的例子来体会,比如一个家庭中有一个婴儿,那么婴儿为被观察者,父母为观察者,以此来进行一下模拟
class Subject { //被观察者
constructor(){
this.state = '睡觉'
this.arr = []
}
attach(observer){
this.arr.push(observer);
}
setState(newState){
this.state = newState;
this.arr.forEach(observer => observer.update(newState));
}
}
//观察者
class Observer {
constructor(name){
this.name = name;
}
update(newState){
console.log(`${this.name}发现:宝宝现在在----------->${newState}`);
}
}
let baby = new Subject();
let mom = new Observer("妈妈");
let dad = new Observer("爸爸");
baby.attach(mom);//相当于on
baby.attach(dad);
setTimeout(() => {
baby.setState("睡醒了");//相当于触发emit
}, 3000);
- 希望对大家有所帮助 如果有错误请及时通知 以免误导其他同学