自己动手模拟MVVM之三实践观察者模式

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 742 字 | 阅读时长 ≈ 3 分钟

一个典型的观察者模式应用场景是用户在一个网站订阅主题，多个用户（观察者Observer）都可以订阅某个主题（Subject），当主题内容更新时订阅该主题的用户都能收到通知。

代码实践

先来定义一个主题Subject，通过new Subject()创建一个主题对象，该对象内部维护订阅当前主题的观察者数组。主题对象上有一些方法，如添加观察者（addObserver）、删除观察者（removeObserver）、通知观察者更新（notify）。 当notify被调用时，实际上调用全部观察者observer自身的update方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Subject
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()
  })
}

然后定义观察者Observer，new Observer()创建一个观察者对象，该对象有一个update方法，当收到主题的变更通知时，update方法会被调用。

1
2
3
4
5
6
function Observer(name) {
    this.name = name;
}
Observer.prototype.update=function(){
    console.log(this.name + ' update...')
}

使用写好的Subject和Observe测试下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建主题
var subject = new Subject()

//创建观察者1
var observer1 = new Observer('dhx')
//主题添加观察者1
subject.addObserver(observer1)
//创建观察者2
var observer2 = new Observer('jack')
//主题添加观察者2
subject.addObserver(observer2)

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

// 输出
// dhx update...
// jack update...

一点改进

在上面的代码中，添加订阅主题的操作是主题进行的，不太符正常的情形，正常应该是观察者去主动关注主题，所以我们对Observe添加订阅主题的方法。修改后的Observe；

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
function Observer(name) {
    this.name = name;
}
Observer.prototype.update=function(){
    console.log(this.name + ' update...')
}
// 添加关注主题的方法
Observer.prototype.subscribeTo=function(subject){
    subject.addObserver(this);
}

// 修改后调用改为
// 创建主题
var subject = new Subject()

//创建观察者1
var observer1 = new Observer('dhx')
//主题添加观察者1
subject.addObserver(observer1)
//创建观察者2
var observer2 = new Observer('jack')
//主题添加观察者2
subject.addObserver(observer2)

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

// 输出
// dhx update...
// jack update...

到此基本完成观察者模式的代码。

换成 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 主题
class Subject {
    constructor() {
        this.observers = [];
    }
    
    addObserver(observer) {
        this.observers.push(observer);
    }
    
    removeObserver(observer) {
        let index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    }
    
    notify() {
        this.observers.forEach(function (observer) {
            observer.update();
        });
    }
}

// 观察者
class Observer{
    constructor(name) {
        this.name = name;
    }
    update() {
        console.log(this.name + " update...");
    }
    // 添加关注主题的方法
    subscribeTo(subject) {
        subject.addObserver(this);
    }
}

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

//创建观察者1
var observer1 = new Observer("dhx");
//主题添加观察者1
subject.addObserver(observer1);
//创建观察者2
var observer2 = new Observer("jack");
//主题添加观察者2
subject.addObserver(observer2);

//主题通知所有的观察者更新
subject.notify();

// 输出
// dhx update...
// jack update...

总结

感谢阅读，欢迎提出问题，一起进步！