JS设计模式——发布订阅模式

发布订阅模式

该模式大多数用于自定义事件

1. 通用代码

var event = {}
event.cacheList = {}
event.on = function (key, fn) {
    if (!event.cacheList[key]) {
        event.cacheList[key] = []
    }
    event.cacheList[key].push(fn)
}
event.fire = function () {
    var key = Array.prototype.shift.apply(arguments)
    var fns = event.cacheList[key]
    if (!fns || fns.length === 0) {
        return false
    }
    for (var i = 0, len = fns.length; i < len; i++) {
        fns[i].apply(this, arguments)
    }
}
event.remove = function (key, fn) {
    var fns = event.cacheList[key]
    if (!fns || fns.length === 0) {
        return false
    }
    if (!fn) {
        fns && (fns.length = 0)
    } else {
        for (var i = 0, len = fns.length; i < len; i++) {
            if (fns[i] === fn) {
                fns.splice(i, 1)
            }
        }
    }
}
var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}
var sellOffice = {}
installEvent(sellOffice)
sellOffice.on('square200', function () {
    console.log('square200')
})
sellOffice.on('square200', function () {

    console.log("square200 2")
})
sellOffice.fire('square200')
sellOffice.remove('square200')
sellOffice.fire('square200')

2.分析

这里其中关键的一点就是利用对象键值对存储了事件，在某个事件调用存储的事件，移除事件也是通过对对象重新赋值。这里使用对象作为存储的数据格式是因为通过键查询的复杂度是1，可以快速搜索到某个键存储的函数列表。