发布-订阅模式也叫观察者模式,它定义对象之间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在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,总结
发布-订阅模式的有点很明显,一是时间上的解耦,二是对象上的解耦。发布-订阅模式的应用相当广泛,它和中介者模式有一些类似之处,可以帮助实现中介者模式。
个人认为,在处理的事情上,发布-订阅模式功能相对单一,主要就是收发消息,解决的是发布者和订阅者之间的多对多关系;中介者模式功能五花八门,怎么写都可以,解决的是对象与对象之间的多对多关系,将对象与对象的网状关系,解耦成中介者与对象之间的一对多关系。