Javascript 发布-订阅模式
Javascript 发布-订阅模式
本文内容搬运于：Javascript中理解发布-订阅模式，虽是搬运，但纯手打，如果错误，请多指正，如有侵权，请告知，立即删除！
发布-订阅模式介绍
发布-订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
现实生活中的发布-订阅模式：
比如小红最近在淘宝网上看上一双鞋子，但是呢，联系到卖家之后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以联系卖家，问卖家什么时候有货，卖家告诉她，要等一个星期才有货，卖家告诉小红，要是你习惯的话，可以收藏我们的店铺，等有货的时候再通知你，所以小红收藏了此店铺，但与此同时，小明、小华等也喜欢这双鞋，也收藏了此店铺，等来货的时候就依次会通知他们；
在上面的故事中，可以看出是一个典型的发布订阅模式，卖家是属于发布者，小红、小明等属于订阅者，订阅该店铺，卖家作为发布者，当鞋子到了的时候，会依次通知小明，小红等，依次使用旺旺等工具给他们发布消息；
发布订阅模式的优点
- 支持简单的广播通信，当对象状态发生变化时，会自动通知已经订阅过的对象。比如上面的例子，小明、小红不需要天天逛淘宝看鞋子到了没有，在合适的时间点，发布者（卖家）来货了的时候，会通知该订阅者（小红、小明等人）；
- 发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，他不管发布者如何改变；同理卖家（发布者）只需要将鞋子来货的这件事告诉订阅者（买家），他不管买家是买还是不买，还是买其他家的。只要鞋子到货了就通知订阅者即可。
对于第一点，我们日常工作中也经常使用到，比如我们的 ajax 请求，请求有成功(success)和失败(error)的回调函数，我们可以订阅ajax的success 和 error 事件，我们并不关心对象在异步运行的状态，我们只关心 success 的时候或者 error 的时候我们要做点我们自己做的事情就可以啦。
发布者订阅模式的缺点
- 创建订阅者需要消耗一定的时间和内存；
- 虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。
如何实现发布-订阅模式？
- 首先要想好谁是发布者（比如上面的卖家）
- 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者（比如上面的卖家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单）；
- 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
我们还可以在回调函数里面添加一些参数，比如鞋子的颜色，鞋子尺码等信息；
我们先来实现下简单的发布-订阅模式，代码如下：
// 定义发布者
let publisher = {}
// 缓存列表，存放订阅者回调函数
publisher.list = []
// 增加订阅者
publisher.listen = function (fn) {
// 将订阅消息添加到缓存列表
this.list.push(fn)
}
// 发布消息
publisher.trigger = function () {
for (let i = 0, fn; fn = this.list[i++];) {
fn.apply(this, arguments)
}
}
// 小红订阅如下消息
publisher.listen(function (color, size) {
console.log('颜色是：', color)
console.log('尺码是：', size)
})
// 小华订阅如下消息
publisher.listen(function (color, size) {
console.log('再次打印颜色是：', color)
console.log('再次打印尺码是：', size)
})
publisher.trigger("红色", 44)
publisher.trigger("黑色", 42)
打印结果如下：
颜色是： 红色
尺码是： 44
再次打印颜色是： 红色
再次打印尺码是： 44
颜色是： 黑色
尺码是： 42
再次打印颜色是： 黑色
再次打印尺码是： 42
我们看到订阅者接受到发布者的每个消息，但是呢，对于小红来说，她只想接受颜色为红色的消息，不想接收颜色为黑色的消息，为此我们需要对代码进行如下改造，我们可以先增加一个 key，使订阅者只订阅自己感兴趣的消息。
// 定义发布者
let publisher = {}
// 缓存列表，存放订阅者回调函数
publisher.list = []
// 增加订阅者
publisher.listen = function (key, fn) {
// 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
if (!this.list[key]) {
this.list[key] = []
}
// 将订阅消息添加到缓存列表
this.list[key].push(fn)
}
// 发布消息
publisher.trigger = function () {
// 取出消息类型的名称
let key = Array.prototype.shift.call(arguments)
// 取出该消息对应的回调函数的集合
let fns = this.list[key]
// 如果没有订阅过该消息的话，则返回
if (!fns || fns.length === 0) {
return
}
for (let i = 0, fn; fn = fns[i++];) {
// arguments 是发布消息时附送的参数
fn.apply(this, arguments)
}
}
// 小红订阅如下消息
publisher.listen('red', function (size) {
console.log('尺码是：', size)
})
// 小华订阅如下消息
publisher.listen('black', function (size) {
console.log('再次打印尺码是：', size)
})
publisher.trigger("red", 44)
publisher.trigger("black", 42)
打印结果如下：
尺码是： 44
再次打印尺码是： 42
可以看到，订阅者只订阅自己感兴趣的消息了。
发布-订阅模式的代码封装
我们知道，对于上面的代码，小红去买鞋对 publisher 进行订阅，但是如果以后我们需要对买房子或者其他的对象进行订阅呢，我们需要复制上面的代码，再重新改下里面的对象代码，为此我们需要进行代码封装：
const event = {
list: [],
listen: function (key, fn) {
if (!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
},
trigger: function () {
let key = Array.prototype.shift.call(arguments)
let fns = this.list[key]
if (!fns || fns.length === 0) {
return
}
for (let i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
}
我们再定义一个 initEvent 函数，这个函数使所有的普通对象都具有发布订阅功能，如下代码：
const initEvent = function (obj) {
for (let i in event) {
obj[i] = event[i]
}
}
我们再来测试下，我们还是给 publisher 这个对象添加发布-订阅功能：
let publisher = {}
initEvent(publisher)
// 小红订阅如下消息
publisher.listen('red', function (size) {
console.log('尺码是：', size)
})
// 小华订阅如下消息
publisher.listen('black', function (size) {
console.log('再次打印尺码是：', size)
})
publisher.trigger('red', 44)
publisher.trigger('black', 42)
打印结果如下：
尺码是： 44
再次打印尺码是： 42
如何取消订阅事件？
比如上面的栗子，小红她突然不想买鞋子了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红怎么取消该店铺的订阅呢？
event.remove = function (key, fn) {
let fns = this.list[key]
// 如果 key 对应的消息没有订阅过的话，则返回
if (!fns) {
return false
}
// 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
if (!fn) {
fns.length = 0
} else {
for (let i = fns.length - 1; i >= 0; i--) {
let _fn = fns[i]
if (_fn === fn) {
// 删除订阅者的回调函数
fns.splice(i, 1)
}
}
}
}
测试代码如下：
publisher.listen('red', f1 = function (size) {
console.log('尺码是：', size)
})
publisher.listen('red', f2 = function (size) {
console.log('再次打印尺码是：', size)
})
publisher.remove('red', f1)
publisher.trigger('red', 42)
打印结果如下：
再次打印尺码是： 42
全局-发布订阅对象代码封装
我们再来看看我们传统的 ajax 请吧，比如我们传统的 ajax 请求，请求成功后需要做如下事情：
- 渲染数据；
- 使用数据来做一个动画
那么我们以前肯定是如下写代码：
$.ajax('http://127.0.0.1/index', function (data) {
renderData(data) // 渲染数据
doAnimate(data) // 实现动画
})
假如以后还需要做点事情的话，我们还需要在里面写调用的方法，这样代码就耦合度很高，那么我们现在使用发布-订阅模式来看如何重构上面的业务需求代码：
$.ajax('http://127.0.0.1/index', function (data) {
// 发布请求成功的消息
Obj.trigger('success', data)
})
// 下面我们来订阅此消息，比如我现在订阅渲染数据这个消息
Obj.listen('success', function (data) {
renderData(data)
})
// 订阅动画这个消息
Obj.listen('success', function (data) {
doAnimate(data)
})
为此，我们可以封装一个全局发布-订阅模式对象，如下代码：
const Event = (function () {
let list = {}
let listen = function (key, fn) {
if (!list[key]) {
list[key] = []
}
list[key].push(fn)
}
let trigger = function () {
let key = Array.prototype.shift.call(arguments)
let fns = list[key]
if (!fns || fns.length === 0) {
return false
}
for (let i = 0, fn; fn = fns[i++]) {
fn.apply(this, arguments)
}
}
let remove = function (key, fn) {
let fns = list[key]
if (!fns) {
return false
}
if (!fn) {
fns.length = 0
} else {
for (let i = fns.length - 1; i >= 0; i--) {
let _fn = fns[i]
if (_fn === fn) {
fns.splice(i, 1)
}
}
}
}
return {
listen,
trigger,
remove
}
})()
测试代码如下：
Event.listen('color', function (size) {
console.log('尺码为：', size)
})
Event.trigger('color', 42)
理解模块间通信
我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；比如现在有一个页面有一个按钮，每次点击此按钮后，div 中会显示此按钮被点击的总次数，如下代码：
<button id="count">点击我</button>
<div id="showCount"></div>
我们中的 a.js 负责处理点击操作及发布消息，如下 js 代码：
let a = (function () {
let count = 0
let button = document.getElementById('count')
button.onclick = function () {
Event.trigger('add', count++)
}
})()
b.js 负责监听 add 这个消息，并把点击的总次数显示到页面上来，如下代码：
let b = (function () {
let div = document.getElementById('showCount')
Event.listen('add', function (count) {
div.innerHTML = count
})
})()
下面是 html 的代码，js 做如下运用即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="count">点击我</button>
<div id="showCount"></div>
<script>
window.Event = (function () {
let list = {}
let listen = function (key, fn) {
if (!list[key]) {
list[key] = []
}
list[key].push(fn)
}
let trigger = function () {
let key = Array.prototype.shift.call(arguments)
let fns = list[key]
if (!fns || fns.length === 0) {
return false
}
for (let i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
let remove = function (key, fn) {
let fns = list[key]
if (!fns) {
return false
}
if (!fn) {
fns.length = 0
} else {
for (let i = fns.length - 1; i >= 0; i--) {
let _fn = fns[i]
if (_fn === fn) {
fns.splice(i, 1)
}
}
}
}
return {
listen,
trigger,
remove
}
})()
</script>
<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>
如上代码，当点击一次按钮后，showcount 的 div 就会自动 +1 ,如上演示的就是两个模块之间如何使用发布-订阅模式来实现通信。
