大道至简——一个例子讲清楚观察者模式
熊宝宝需要一刻不停的看护,饿了要喂奶,湿了要换尿布,熊妈熊爸就是一个观察者,需要时刻不停的观察宝宝的状态,宝宝的状态一旦发生变化,熊爸熊妈就要开始”揍孩子“。
class Baby {
constructor(os) {
this.state = '开心'
this.observer = []
}
getState() {
return this.state
}
// 关联所有订阅者
attach(obs) {
this.observer.push(obs)
}
// 宝宝的状态发生变化通知观察者,baby是一个状态发布者
notifyAllObs(obs) {
obs.doSomeing(this.state)
}
setState(state) {
this.state = state
this.observer.forEach((obs) => {
this.notifyAllObs(obs)
})
}
}
class Observer {
constructor(name, baby) {
this.name = name
baby.attach(this) // 观察baby的状态变化
}
doSomeing(state) {
if (state == '不开心' && this.name == '妈妈') {
console.log(`${this.name}:宝宝${state},要喂奶了`)
} else if (state == '不开心' && this.name == '爸爸') {
console.log(`${this.name}:宝宝${state},要换尿布了`)
}
}
}
const baby = new Baby()
const obs1 = new Observer('妈妈', baby)
const obs2 = new Observer('爸爸', baby)
baby.setState('不开心')
//输出结果
//妈妈:宝宝不开心,要喂奶了
//爸爸:宝宝不开心,要换尿布了