观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于三种设计类型(创建型、组合型和行为型)中的行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。
总结来说观察者模式有两个特点:
1.发布&订阅
2.1对N
观察者模式的现实举例
想象一下,你是一位顶尖歌手,粉丝没日没夜地询问你下个单曲什么时候发。 为了从中解放,你承诺(发布)会在单曲发布的第一时间发给他们。你给了粉丝们一个列表。他们可以在上面填写他们的电子邮件地址,以便当歌曲发布后,让所有订阅了的人能够立即收到。即便遇到不测,例如录音室发生了火灾,以致你无法发布新歌,他们也能及时收到相关通知。
用js代码实现观察者模式
首先先画一个 UML 简图
根据 UML 简图用js代码实现
// 主题,保存状态,状态变化后触发所有观察者对象
class Subject {
constructor () {
this.state = 0
this.observers = []
}
getState () {
return this.state
}
setState (state) {
this.state = state
this.notifyAllObservers()
}
notifyAllObservers () {
this.observers.forEach(observer => {
observer.update()
})
}
add (observer) {
this.observers.push(observer)
}
remove (observer) {
this.observers = this.observers.filter(sub => sub !== observer)
}
}
// 观察者
class Observer {
constructor (name, subject) {
this.name = name
this.subject = subject
this.subject.add(this)
}
update () {
console.log(`${this.name} update, state: ${this.subject.getState()}`);
}
}
// 测试
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)
s.setState(1)
s.setState(2)
s.setState(3)
s.remove(o1)
s.setState(4)
设计原则
主题和观察者分离,不是主动触发而是被动监听,两者解耦