观察者模式-封装

• 发布 & 订阅

var msgCenter = (function () {//消息中心
    var _msg = {}//存储消息
    /*
        var _msg = {
            'carInfo':[person1.alreadyRegister.carInfo,person2.alreadyRegister.carInfo,person3.alreadyRegister.carInfo],
            'newsInfo':[[person1.alreadyRegister.newsInfo,person3.alreadyRegister.newsInfo]]
        }
    */
    return {
        register (type, fn) {//用于订阅一个消息
            //type什么类型的消息
            //fn当消息中心去发布这条消息的时候，去执行的回调函数
            if (_msg[type]) {
                _msg[type].push(fn)
            } else {
                _msg[type] = [fn]
            }
        },
        fire (type, args) {//用于发布消息
            //type 消息类型
            //args 发布消息所携带的一些信息
            //发布消息后订阅消息的回调函数就会触发
            if (!_msg[type]) {
                return
            }
            var event = {//给args设置一个type
                type: type,
                args: args || {}
            }
            for (var i = 0; i < _msg[type].length; i++) {
                // console.log( _msg[type][i])
                _msg[type][i](event)
            }
        },
        // 用于取消订阅的消息
        cancel (type, fn) {
            //type什么类型的消息
            //fn取消这个类型的哪一个回调函数
            if (!_msg[type]) {//如果没有传入的类型什么都不做
                return
            }
            for (var i = 0; i < _msg[type].length; i++) {
                if (_msg[type][i] === fn) {//判断传入的是否有此函数
                    _msg[type].splice(i, 1)//如果有直接删除
                    break
                }
            }
        }
    }

})()
function Person () {
    this.alreadyRegister = {//实例所拥有的消息类型

    }
}
Person.prototype.register = function (type, fn) {//添加消息订阅
    if (this.alreadyRegister[type]) {
        console.log('你已经订阅过这个消息了，请不要重复订阅')
    } {
        msgCenter.register(type, fn)
        this.alreadyRegister[type] = fn
    }
}

Person.prototype.cancel = function (type) {//清除消息订阅
    msgCenter.cancel(type, this.alreadyRegister[type])
    delete this.alreadyRegister[type]//删除本地实例上的消息
}
//ES6
class P {
    alreadyRegister = {//实例所拥有的消息类型

    }
    register (type, fn) {//添加消息订阅
       register (type, fn) {//添加消息订阅
        if (this.alreadyRegister[type]) {
            console.log('你已经订阅过这个消息了，请不要重复订阅')
        } {
            msgCenter.register(type, fn)
            this.alreadyRegister[type] = fn
        }
    }
    }
    cancel (type) {//清除消息订阅
        msgCenter.cancel(type, this.alreadyRegister[type])
        delete this.alreadyRegister[type]//删除本地实例上的消息
    }
}
//测试
var person1 = new Person()
var person2 = new Person()
var person3 = new Person()
//订阅
person1.register('carInfo', function (e) {
    console.log('person1得到了关于' + e.type + '的消息', '消息内容:' + e.args.info)
})
person1.register('newsInfo', function (e) {
    console.log('person1得到了关于' + e.type + '的消息', '消息内容:' + e.args.info)
})
person2.register('carInfo', function (e) {
    console.log('person2得到了关于' + e.type + '的消息', '消息内容:' + e.args.info)
})
person3.register('newsInfo', function (e) {
    console.log('person3得到了关于' + e.type + '的消息', '消息内容:' + e.args.info)
})
person3.register('carInfo', function (e) {
    console.log('person3得到了关于' + e.type + '的消息', '消息内容:' + e.args.info)
})
//发布
msgCenter.fire('carInfo', { info: '新款消息上市了！' })
msgCenter.fire('newsInfo', { info: '某国家领导人访华！' })