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