js常用设计模式4-发布-订阅模式

发布-订阅模式也叫观察者模式,它定义对象之间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javaScript开发中,我们一般用事件模型来代替传统的发布-订阅模式。
DOM的addEventListener就是发布-订阅模式。

1,售楼消息订阅

现实生活中,发布-订阅的例子很多。比如买房,我们去售楼处留下微信,当楼房有新消息时,售楼小姐就把最新消息推送给我们。如果不用这种方式,我们就需要隔一段时间向售楼小姐发送消息询问,这么一来,售楼小姐每天都要回复上千人的信息轰炸,心态爆炸。
简单实现发布-订阅:

  • 首先确定谁是信息发布者(售楼处)
  • 给发布者一个消息缓存列表,用于存放订阅者的回调函数,以便通知订阅者(售楼处的花名册)
  • 发布消息的时候,发布者会遍历缓存列表,依次触发每个回调函数(遍历花名册,挨个发微信)
// js中的事件模型就是发布-订阅模式,也叫观察者模式,其实是1对p的问题,p指代对象,这就是个多p问题
var salesOffices = {}  //定义售楼处

salesOffices.clientList = []   //缓存列表,存放订阅者的回调函数
salesOffices.listen = function (fn) {  //增加订阅者
    this.clientList.push(fn)      //订阅者的消息添加进缓存列表
}
salesOffices.trigger = function () {
    for (var i = 0, fn; fn = this.clientList[i++];) {
        fn.apply(this, arguments)    //arguments是发布消息时带上的参数
    }
}
//小明订阅
salesOffices.listen(function (price, squareMeter) {
    console.log('价格:' + price)
    console.log('面积:' + squareMeter)
})
//小红订阅
salesOffices.listen(function (price, squareMeter) {
    console.log('价格:' + price)
    console.log('面积:' + squareMeter)
})

salesOffices.trigger(1000000, 100)
salesOffices.trigger(2000000, 90)

这是一个简单的售楼消息发布-订阅模式,但有一些问题,发布的时候小明和小红都可以接收到所有人订阅的消息,这很明显是不合理的

2,修改代码,让订阅者只收到自己的消息

增加一个用于标识的key,让订阅者只收到自己感兴趣的消息

// 刚才那个没有一一对应的关系,流程很不清晰,让人怀疑里面有py交易
var salesOffices = {}
salesOffices.clientList = {}
salesOffices.listen = function (key, fn) {
    if (!this.clientList[key]) {
        this.clientList[key] = []
    }
    this.clientList[key].push(fn)
}
salesOffices.trigger = function () {
    var key = Array.prototype.shift.call(arguments)
    //去除该消息队形的回调函数集合
    fns = this.clientList[key]
    //如果没有订阅该消息,则返回
    if (!fns || fns.length === 0) {
        return false
    }
    for (var i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments)
    }
}
//squareMeter88就是我们添加的key
salesOffices.listen('squareMeter88', function (price) {
    console.log('价格:' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格:' + price)
})

salesOffices.trigger('squareMeter88', 1000000)
salesOffices.trigger('squareMeter140', 2000000)

3,发布-订阅模式的通用实现

如果小明和小红换了一家售楼部,那么又需要重新订阅,这无疑是很麻烦的,我们需要实现一个通用的全局订阅。
我们先将发布-订阅的功能提取出来,放在一个单独的对象中:

// 现在小明怀疑小红还是有py交易,所以想换一个,做一个通用的观察者
var event = {
    clientList: {},
    listen: function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function () {
        var key = Array.prototype.shift.call(arguments)
        fns = this.clientList[key]

        if (!fns || fns.length === 0) {
            return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
}

然后在定义一个installEvent函数,这个函数可以给所有对象都动态安装发布-订阅功能(实际就是做一个浅拷贝):

var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}

现在我们来try一try刚才写好的功能:

var salesOffices = {}
installEvent(salesOffices)

// 小明订阅消息
salesOffices.listen('squareMeter88', function (price) {
    console.log('价格:' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格:' + price)
})

//小红订阅消息
salesOffices.trigger('squareMeter88', 1000000)
salesOffices.trigger('squareMeter140', 2000000)

4,取消订阅

有一天,小明不想奋斗了,小明的阿姨送了小明一栋楼,小明需要取消和售楼小伙的py交易:

var event = {
    clientList: {},
    listen: function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function () {
        var key = Array.prototype.shift.call(arguments)
        fns = this.clientList[key]

        if (!fns || fns.length === 0) {
            return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
}

event.remove = function (key, fn) {
    var fns = this.clientList[key]
    if (!fns) {
        return false
    }
    //不传就是撤销所有
    if (!fn) {
         fns && (fns.length=0)
    }
    else {
        for (var i = 0, _fn; _fn = fns[i++];) {
            if (_fn = fn) {
                fns.splice(i, 1)
            }
        }
    }
}

var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}

var salesOffices = {}
installEvent(salesOffices)

salesOffices.listen('squareMeter88', f1 = function (price) {
    console.log('价格:' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格:' + price)
})

// salesOffices.trigger('squareMeter88', 1000000)
salesOffices.remove('squareMeter88', f1)

salesOffices.trigger('squareMeter140', 2000000)

5,全局的发布-订阅模式

之前实现的售楼消息订阅,还存在两点问题:
每个被做了浅拷贝的对象,都有所有的listen,trigger,和缓存列表clientList,这个有些浪费
小明和售楼处还有一些耦合。小明需要知道售楼小姐salesOffices才可以订阅,如果小明又想知道salesOffices2的信息,那么又需要订阅salesOffices2,这个操作比较麻烦。
我们可以使用一个中介,相当于卖方的中介公司,用来处理所有的订阅请求。售楼处通过中介来发布消息,客户通过中介来订阅消息。
我们创建一个全局的Event对象,作为中介者:

//全局订阅对象--中介统一管理
var Event = (function () {
    var clientList = {},
        listen,
        trigger,
        remove;

    listen = function (key, fn) {
        if (!clientList[key]) {
            clientList[key] = []
        }
        clientList[key].push(fn)
    }
    trigger = function () {
        var key = Array.prototype.shift.call(arguments)
        fns = clientList[key]

        if (!fns || fns.length === 0) {
            return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
    remove = function (key, fn) {
        var fns = clientList[key]
        if (!fns) {
            return false
        }
        //不传就是撤销所有
        if (!fn) {
            fns && fns.length
        }
        else {
            for (var i = 0, _fn; _fn = fns[i++];) {
                if (_fn = fn) {
                    fns.splice(i, 1)
                }
            }
        }
    }
    return {
        listen,
        trigger,
        remove
    }
})()

Event.listen('squareMeter88', function (price) {
    console.log('价格:' + price)
})
Event.trigger('squareMeter88', 1000000)

6,总结

发布-订阅模式的有点很明显,一是时间上的解耦,二是对象上的解耦。发布-订阅模式的应用相当广泛,它和中介者模式有一些类似之处,可以帮助实现中介者模式。
个人认为,在处理的事情上,发布-订阅模式功能相对单一,主要就是收发消息,解决的是发布者和订阅者之间的多对多关系;中介者模式功能五花八门,怎么写都可以,解决的是对象与对象之间的多对多关系,将对象与对象的网状关系,解耦成中介者与对象之间的一对多关系。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容