实现 MVVM (三) - 发布订阅 / 观察者模式

发布订阅 / 观察者模式。即多个用户(观察者 Observer)都可以订阅某个主题(Subject)。当主题内容实现更新时,订阅了该主题下的所有用户都能够收到相应的通知(Notify)。

代码实现

Subject 是构造函数,new Subject() 创建一个主题对象。该对象内部维护订阅当前主题的观察者数组。主题上包含三种方法,添加观察者(addObserver)、删除观察者(removeObserver)和通知观察者更新(notify)。 当 notify 时实际上是调用全部观察者 observer 自身的 update 方法。

Observer 是构造函数,new Observer() 创建一个观察者对象,该对象里面含有一个 update 方法。

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
// 观察者模式
function Subject() {
this.observers = []
}

// 添加观察者
Subject.prototype.addObserver = function(observer) {
this.observers.push(observer)
}

// 删除观察者
Subject.prototype.removeObserver = function(observer) {
var index = this.observers.indexOf(observer)
if(index > -1){
this.observers.splice(index,1)
}
}

// 通知观察者更新
Subject.prototype.notify = function() {
this.observers.forEach(function(observer){
observer.update()
})
}

function Observer(name) {
this.name = name
this.update = function() {
console.log(name + ' update...')
}
}

// 创建主题
var subject = new Subject()

// 创建观察者1
var observer1 = new Observer('even')
// 添加观察者1
subject.addObserver(observer1)

// 创建观察者2
var observer2 = new Observer('yao')
// 添加观察者2
subject.addObserver(observer2)

// 通知所有观察者更新
subject.notify()


ES6 构造器 / 类 写法

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
class Subject {
constructor() {
this.observers = []
}
addObserver(observer) {
this.observers.push(observer)
}
removeObserver(observer) {
var index = this.observers.indexOf(observer)
if(index > -1){
this.observers.splice(index,1)
}
}
notify() {
this.observers.forEach(observer => {
observer.update()
})
}
}

class Observer {
constructor() {
this.update = function() {
}
}
}

let subject = new Subject()
let observer = new Observer()
observer.update = function() {
console.log('observer update...')
}
subject.addObserver(observer)
subject.notify()
本文结束  感谢您的阅读
0%