莽夫

观察者模式

观察者模式: 又被称发布-订阅者模式或消息机制, 定义了一种依赖关系, 解决了主体对象与观察者之间功能的耦合.

观察者模式可以解决模块间通信, 给模块间解耦.

实现一个简单的观察者

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
var observer = (function () {
    // 防止消息队列暴露而被而被篡改 故将消息容器座位静态私有变量保存
    var __messages = {}
    return {
        // 注册信息接口
        regist: function (type, fn) {
            // 如果此消息不存在则应该创建一个该消息类型
            if (typeof __messages[type] === 'undefined') {
                // 将动作推入到该消息对应的动作执行队列中
                __messages[type] = [fn]
            } else {
                // 如果此消息存在
                // 将动作方法推入该消息对应的动作执行序列中
                __messages[type].push(fn)
            }
            return this
        },
        // 发布信息接口
        fire: function (type) {
            // 如果该消息没有被注册, 则返回
            if (!__messages[type]) {
                return
            }
            let args = [...arguments].splice(1)
            for (var i = 0, len = __messages[type].length; i < len; i++) {
                // 依次执行注册的消息对应的动作序列
                __messages[type][i].call(this, ...args)
            }
        },
        // 移除信息接口
        remove: function () {
            // 如果消息动作队列存在
            if (__messages[type] instanceof Array) {
                // 从最后一个消息动作遍历
                var i = __messages[type].length - 1
                for (; i >= 0; i--) {
                    // 如果存在该动作 则在消息动作序列中移除相应动作
                    __messages[type][i] === fn && __messages[type].splice(i, 1)
                }
            }
        },
    }
})()

测试

1
2
3
4
5
observer.regist('test', function (name, age) {
    console.log(name, age)
})
observer.fire('test', 'cl', 29)
observer.fire('test', 'lc', 20)