JS-观察者模式

观察者对象包含
- 一个消息容器
- 三个方法
  - 订阅（注册）消息方法
  - 发布订阅的消息方法
  - 取消（移除）订阅方法

// 将观察者放在闭包中，当页面加载就立即执行
var Observer = (function () {
    // 防止消息队列暴漏而被篡改故将消息容器作为静态私有变量保存
    var _messages = {}
    return {
        // 注册信息接口
        regist(type, fn) {
            // 如果消息不存则应该创建一个该消息类型
            if (typeof _messages[type] === 'undefined') {
                // 将动作推入到该消息对应的动作执行队列中
                _messages[type] = [fn]
                // 如果此消息存在
            }else {
                // 将动作方法推入该消息对应的动作执行序列中
                _messages[type].push(fn)
            }
        },
        // 发布信息接口
        fire(type, args) {
            // 如果该消息没有被注册，则返回
            if (!_messages[type]) {
                return
            }
            var events = {
                type: type,
                args: args || {}
            },
            len = _messages[type].length
            // 遍历消息动作
            for (var i = 0; i < len; i++) {
                // 依次执行注册的消息对应的动作序列
                _messages[type][i].call(this, events)
            }
        },
        // 移除信息接口
        remove(type, fn) {
            // 如果消息动作队列存在
            if (_messages[type] instanceof Array) {
                // 从最后一个消息动作遍历
                for (var i = _messages[type].length - 1; i >= 0; i--) {
                    // 如果存在该动作则在消息动作序列中移除相应动作
                    _messages[type][i] === fn && _messages[type].splice(i, 1)
                }
            }
        }
    }
})()

// 注册一个消息
Observer.regist('test', function(e) {
    console.log(e.type, e.args.msg)
})
// 发布这则消息
Observer.fire('test', { msg: '传递参数' })

猜你喜欢