curTain

写一个观察者模式。

介绍

意图: 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

主要解决: 一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。

何时使用: 一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知,进行广播通知。

关键代码: 在抽象类里有一个 ArrayList<\Observer> 存放观察者们。

实现

观察者模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
* 观察者模式
* state 状态
* observers { Observer } 保存所有的观察者
*/

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()
})
}
// 添加观察者
attach( observer ){
this.observers.push( observer )
}
}

// 观察者
class Observer {
constructor( name, subject ){
this.name = name
this.subject = subject
this.subject.attach( 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 )

s.setState( 11 )
s.setState( 12 )
console.log( s )

测试结果:

总结:

观察者模式的要点主要是将观察者放在被观察者里面,当状态变化后,就依次通知观察者。

参考

超全的设计模式简介(45种)—观察者模式

JavaScript 中常见设计模式整理

谈谈观察者模式和发布订阅模式


 评论