发布-订阅者模式详解（大神出门又拐， 慢走不送， 本篇摘自javaScript设计模式与开发实践 - 曾探 纯手抄很累的 _）
什么是发布订阅模式呢， 简单说啊， 比如小明最近看上一套房子， 到了售楼处才被告知该楼盘已售罄， 然后性感的售楼MM告诉小明之后还会有一个新的楼盘开盘， 至于什么时候开售并不确定， 于是乎小明万分期待的记下了售楼MM的电话， 并且每天会打电话去询问， 同样的还有小a, 小b, 小c, 小d, 售楼MM要崩溃了， 她一天接到n个询问的电话
当然现实中没有这么傻的售楼MM， 正常应该是这样操作的： 小明离开后， 留下了自己的电话号，同样小a, 小b, 小c, 小d也是如此， 售楼妹子答应他们， 只要楼盘一开售， 就会立马给他们打电话依次通知
上边这个例子就是一个典型的发布-订阅模式 小名，小a等购买者都是订阅者， 他们订购了房子开售的消息。 而售楼处是发布者，在合适的事件他们会遍历花名册上的电话好嘛， 依次给购买者发布购房消息。
首先我们先写一个最简单的例子 - 自定义实现
var salesBuilding = {}; // 定义售楼处
salesBuilding.clientList = []; // 订阅者列表
salesBuilding.listen = function(fn) { // 增加订阅者
this.clientList.push(fn);
};
salesBuilding.target = function() { // 发布消息
for(var i = 0, fn; fn = this.clientList[i++];) {
fn.apply(this, arguments);
}
}
// 简单测试一下
salesBuilding.listen(function(price, squareMeter) { // 小明订阅
console.log('价格=' + price);
console.log('平方米=' + squareMeter);
});
salesBuilding.listen(function(price, squareMeter) { // 小红订阅
console.log('价格=' + price);
console.log('平方米=' + squareMeter);
});
// salesBuilding.target(1000000, 80); // 输出： 100W， 80平米
// salesBuilding.target(1300000, 100); // 输出： 130W， 100平米
ok， 一个简单的订阅-发布者已经完成，但是这里有一个小小的问题， 比如说小明只想订阅80平米的房子， 但是发布者却把100平米的房子的消息也推送给了小明， 这对小明来说是不必要的困扰， 所以我们有必要增加一个表示key， 先不要猴急的往下看， 自己该如何实现呢～～
小伙伴们不要掉队， 跟着我的思路 走～ 走 走 走你～
代码如下
var salesBuilding = {}; // 定义售楼处
salesBuilding.clientList = {}; // 订阅者列表
salesBuilding.listen = function(key, fn) { // 增加订阅者
if (!this.clientList[key]) { //如果没有订阅过此类消息， 就给此类消息创建一个缓存列表
this.clientList[key] = [];
}
this.clientList[key].push(fn);
};
salesBuilding.target = function() {
var key = Array.prototype.shift.call(arguments); // 取出key
var fns = this.clientList[key]; // 取出该key对应的回调函数集合
if (!fns || fns.length === 0) { // 如果没有订阅 返回false
return false;
}
for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
fn.apply(this, arguments);
}
}
salesBuilding.listen('squareMeter80', function(price) { // 小红订阅
console.log('价格=' + price);
})
salesBuilding.listen('squareMeter100', function(price) { // 小明订阅
console.log('价格=' + price);
})
salesBuilding.target('squareMeter80', '100W'); // 输出 100W
salesBuilding.target('squareMeter100', '130W'); // 输出 130W
大功告成 现在订阅者可以只订阅自己感兴趣的事件了
取消订阅事件
你以为这就完了吗？ 怎么可能， 哼哼哼
有时候我们我们也需要取消订阅事件的功能， 比如小明突然不想买房子了， 为了避免继续接受售楼妹子的骚扰， 小明需要取消之前的订阅的事件
ok， 思考， 思考一下～
代码贴上
salesBuilding.remove = function(key, fn) { // 删除功能
var fns = this.clientList[key];
if (!fns) { // 如果key对应的消息没有被订阅， 则直接false
return false;
}
if (!fn) {
fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数， 则直接清空key对应的所有订阅
}
for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历， 不懂自己百度
var _fn = fns[i]
if (_fn === fn) {
fns.splice(i, 1); // 删除订阅者的回调函数
}
}
}
// 测试一下下
salesBuilding.remove('squareMeter80'); // 删除88平米的订阅
salesBuilding.target('squareMeter80', '100W'); // 不会输出
salesBuilding.target('squareMeter100', '130W'); // 输出 130W
全局的发布订阅对象
回想一下刚才实现的发布-订阅模式， 我们给售楼处添加了发布-订阅模式的功能， 可这里还存在两个小问题
1 我们给每个对象都添加listen和target方法， 以及一个缓存列表， 其实是浪费资源的。
2 小明跟售楼处对象还是存在一定耦合性的， 小明至少要知道售楼处对象的名字是salesBuilding， 才能顺利订阅
代码如下
salesBuilding.listen('squareMeter80', f = function(price) { // 小明订阅
console.log('价格=' + price);
})
如果小明还关心300平米的房子， 而这套房子的卖家是salesBuilding2222的房子， 这意味着小明还需要订购salesBuilding2222
代码如下
salesBuilding2222.listen('squareMeter80', f = function(price) { // 小明订阅
console.log('价格=' + price);
})
其实在现实中， 买房子未必要亲自去售楼处， 只要把我们订阅的请求交给中介公司， 而各大房产中心也只需要通过中介公司来发布房子信息， 这样以来， 我们就不需要关注消息是来自哪个房产公司的。
同样在程序中， 发布-订阅模式可以用一个全局event对象来实现， 订阅者不需要了解消息来自哪个发布者， 发布者也不知道消息会推送到哪个订阅者， event作为一个类似中介的角色，把订阅者和发布者联系了起来。 (其实就是把之前的代码稍微组装一下)
var event = (function() {
var clientList = {};
var listen = [];
var target = [];
var remove = [];
listen = function(key, fn) { // 增加订阅者
if (!clientList[key]) { //如果没有订阅过此类消息， 就给此类消息创建一个缓存列表
clientList[key] = [];
}
clientList[key].push(fn);
};
remove = function(key, fn) { // 删除功能
var fns = clientList[key];
if (!fns) { // 如果key对应的消息没有被订阅， 则直接false
return false;
}
if (!fn) {
fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数， 则直接清空key对应的所有订阅
}
for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历， 不懂自己百度
var _fn = fns[i]
if (_fn === fn) {
fns.splice(i, 1); // 删除订阅者的回调函数
}
}
};
target = function() {
var key = Array.prototype.shift.call(arguments); // 取出key
var fns = clientList[key]; // 取出该key对应的回调函数集合
if (!fns || fns.length === 0) { // 如果没有订阅 返回false
return false;
}
for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
fn.apply(this, arguments);
}
}
return {
target,
remove,
listen
};
})();
event.remove('squareMeter80'); // 删除88平米的订阅
event.target('squareMeter80', '100W'); // 不会输出
event.target('squareMeter100', '130W'); // 输出 130W
