发布-订阅者模式详解(大神出门又拐, 慢走不送, 本篇摘自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