笔记

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('晚饭');  // 吃不到晚饭啦！