JavaScript常用设计模式：发布订阅模式
前端页面开发中经常会用到设计模式，其中最常见的是单例模式、工厂模式和发布订阅模式。如大名鼎鼎的 JQuery 就是单例模式，整个页面中只有 $ 一个全局变量作为 JQuery 的引用。本文暂不讨论单例模式，而是介绍发布订阅模式，这个模式在 Vue 的中也有使用，例如在 Vue 中初始化的全局总线就是一个发布订阅模式的应用。
本篇将主要整理和实现一个发布订阅模型单例。
发布订阅模式
发布订阅模式是一种在开发中经常会使用到的设计模式，一般由订阅者订阅话题，然后由发布者发布话题，以便实现一种异步的事件回调。
后端中大名鼎鼎的 Redis 数据库也参考了该模式，另外，在物联网开发中注明的MQTT协议，则完全实现了该模式。
微信公众号也基于这种模式，比如：
- 只有公众号关注者才能收到公众号的推送，关注者即订阅者；
- 公众号值负责推送，不关心订阅者是谁，只要订阅者存在，就发送推文；
- 订阅者不需要轮询，也不用查阅是否有数据更新，当公众号需要推送消息时，订阅者就会收到消息；
- 关注了公众号的人也可以取消关注，即订阅者可以取消订阅；
用公众号这个模型来看，发布者与订阅者直接其实是不需要互相关心的，订阅者只负责订阅，发布者只负责发布，当发布者发布消息时，订阅者就会收到消息。
我们把发布者抽象为总线，熟悉硬件开发的朋友应该比较熟悉这个名词比如 I2C 总线，设备与主机之间也是通过地址来今天通讯。
总线中的发布者即总线本身，只不过这个是可以编程的。总线需要实现至少三个方法：
- on，订阅事件，关联事件回调；
- emit，触发事件，相当于发布消息，
- off，取消订阅，实际是取消事件关联函数。
我们来实现它：
function Bus () {
let topicHandles = {};
// 添加监听
function addListener(topic, func) {
if (!topicHandles[topic]) {
topicHandles[topic] = [];
}
topicHandles[topic].push(func);
}
// 移除监听
function removeListener(topic, func) {
if (!topicHandles[topic]) return;
let index = topicHandles[topic].indexOf(func);
if (index > -1) {
topicHandles[topic].splice(index, 1);
}
}
// 触发监听回调
function trigTopicHandle(topic, ...params) {
if (!topicHandles[topic]) return;
for (let func in topicHandles[topic]) {
topicHandles[topic][func](...params);
}
}
return {
on: function (topic, func) {
if (typeof func !== "function") {
throw "func must be a function";
}
addListener(topic, func);
},
emit: function (topic, ...parmas) {
trigTopicHandle(topic, ...parmas);
},
off: function (topic, func) {
if (typeof func !== "function") {
throw "func must be a function";
}
removeListener(topic, func);
}
}
}
上面代码实现的 Bus 既是发布者，也是订阅者。
代码中 topicHandles 是一个对象，存放的是 topic 与回调函数的映射，在代码中定义了一些变量和函数，全部使用的是局部定义，没有在 this 上绑定，因为我们不希望开发者访问其中的数据，topicHandles 应该只能由 Bus 对象自己来维护。
实例化一个总线对象：
var bus = Bus();
订阅
当我们需要订阅一个 topic 时，可以这样实现：
bus.on("deviceOnline", function () {
console.log("device online");
})
上面的回调函数是一个匿名函数，有时候，我们需要可以取消某个函数的订阅关系，这么时候需要使用一个具名函数，所以也可以这样写：
function onDeviceOnline () {
console.log("device online");
}
如果需要撤掉某个函数与话题的回调关系，可以使用 off 方法来解除：
bus.off("deviceOnline", onDeviceOnline);
发布
发布也很简单：
bus.emit("deviceOnline");
// 控制台输出：
// device online
功能扩展
很多时候，我们希望只订阅一次话题，所以增加一个 once 方法；同时，我们也希望能清楚某个话题的所有回调，于是再增加 clear 方法。
function Bus () {
let topicHandles = {};
// 添加监听
function addListener(topic, func, once = false) {
if (!topicHandles[topic]) {
topicHandles[topic] = [];
}
topicHandles[topic].push({
handle: func,
once: once
});
}
// 移除监听
function removeListener(topic, func = null) {
if (!topicHandles[topic]) return;
if (func !== null) {
for (let i in topicHandles[topic]) {
if (topicHandles[topic][i].handle === func) {
topicHandles[topic].splice(i, 1);
return;
}
}
}
else {
delete topicHandles[topic];
}
}
// 触发监听回调
function trigTopicHandle(topic, ...params) {
if (!topicHandles[topic]) return;
for (let i in topicHandles[topic]) {
topicHandles[topic][i].handle(...params);
if (topicHandles[topic][i].once) {
topicHandles[topic].splice(i, 1);
i--;
}
}
}
return {
on: function (topic, func, once = false) {
if (typeof func !== "function") {
throw "func must be a function";
}
addListener(topic, func, once);
},
once: function (topic, func) {
this.on(topic, func, true);
},
emit: function (topic, ...parmas) {
trigTopicHandle(topic, ...parmas);
},
off: function (topic, func) {
if (typeof func !== "function") {
throw "func must be a function";
}
removeListener(topic, func);
},
clear: function (topic) {
removeListener(topic);
}
}
}
测试：
var bus = Bus();
bus.once("hello", function () {
console.log("hello");
})
bus.emit("hello");
bus.emit("hello");
// 输出
// hello
可以看到，只有一个 hello 输出，这是符合预期的。到目前为止，这是一个有效的发布订阅管理器，基于这个函数我们可以在任何地方来异步的推送消息。
