javascript设计模式笔记-15 观察者模式

简述

  • 这应该是一个很常见的模式。
  • 例如 $(*).on('click', fn()); 就是一个观察者模式。
  • 所以直接看例子吧!

例子

妈妈叫小孩回家吃饭就是一个观察者模式例子。

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
58
59
60
61
62
63
64
65
// 发布者
var Mom = function () {
this.son = [];
};

// 发布方法
Mom.prototype.call = function (meal) {
this.son.forEach(function (v) {
v.receive(meal);
});
};

// 订阅者
var Son = function (name) {
this.name = name;
};

Son.prototype = {
// 订阅方法
subscribe: function (mom) {
var _this = this;
var isCall = mom.son.some(function (v) {
return v === _this;
});

if(!isCall) {
mom.son.push(_this);
}

return this;
},

// 退订方法
unSubscribe: function (mom) {
var _this = this;
mom.son = mom.son.filter(function (v) {
return v !== _this;
});

return this;
},

// 接收方法
receive: function (meal) {
alert(this.name + '!,妈妈叫你吃' + meal + '啦!');
}
}

// 声明发布者
var mom = new Mom();

// 声明订阅者
var xiaoM = new Son('小明');

// 订阅
xiaoM.subscribe(mom);

// 发布
mom.call('早饭');
mom.call('中饭');

// 退订
xiaoM.unSubscribe(mom);

mom.call('晚饭'); // 吃不到晚饭啦!