【Javascript】设计模式之发布订阅模式

文章目录

1、现实中的发布－订阅模式
2、DOM 事件
3、简单的发布-订阅模式
4、通用的发布-订阅模式
5、先发布再订阅
6、小结

发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式

1、现实中的发布－订阅模式

小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼
处告诉小明，不久后还有一些尾盘推出。于是小明离开之前，把电话号码留在了售楼处，相同的还有小红，小强。于是新楼盘推出的时候，售楼处会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们

2、DOM 事件

只要我们曾经在 DOM 节点上面绑定过事件函数，那我们就曾经使用过发布—订阅模式

document.body.addEventListener( 'click', function(){ alert(2); 
}, false ); document.body.click(); // 模拟用户点击

3、简单的发布-订阅模式

发布-订阅模式的实现步骤
1、定义发布者
2、给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者
3、最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数

代码示例：

var salesOffices = {}; // 定义发布者
salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数
salesOffices.listen = function (fn) {// 增加订阅者this.clientList.push(fn); // 订阅的消息添加进缓存列表
};
salesOffices.trigger = function () {// 发布消息for (var i = 0; i < this.clientList.length; i++) {var fn = this.clientList.length;fn.apply(this, arguments); // arguments 是发布消息时带上的参数}
};

测试：

salesOffices.listen(function (price, squareMeter) {// 小明订阅消息console.log('小明价格= ' + price);console.log('小明squareMeter= ' + squareMeter);
});
salesOffices.listen(function (price, squareMeter) {// 小红订阅消息console.log('小红价格= ' + price);console.log('小红squareMeter= ' + squareMeter);
});salesOffices.trigger(2000, 300);
salesOffices.trigger(2000, 700);

问题：
订阅者接收到了发布者发布的每个消息，有些并不是订阅者需要的

解决：
要增加一个标示 key，让订阅者只订阅自己感兴趣的消息：
改写代码：

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); // 取出消息类型var fns = this.clientList[key]; // 取出该消息对应的回调函数集合if (!fns || fns.length === 0) {// 如果没有订阅该消息，则返回return false;}for (var i = 0; i < fns.length; i++) {var fn = fns[i];fn.apply(this, arguments); // (2) // arguments 是发布消息时附送的参数}
};

测试：

salesOffices.listen('squareMeter88', function (price) {// 小明订阅 88 平方米房子的消息console.log('价格= ' + price); // 输出： 2000000
});
salesOffices.listen('squareMeter110', function (price) {// 小红订阅 110 平方米房子的消息console.log('价格= ' + price); // 输出： 3000000
});salesOffices.trigger('squareMeter88', 30000);
salesOffices.trigger('squareMeter110', 70000);

4、通用的发布-订阅模式

包含：发布-订阅，取消订阅

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);var fns = this.clientList[key];if (!fns || fns.length === 0) {return false;}for (var i = 0, fn; (fn = fns[i++]); ) {fn.apply(this, arguments);}},// 增加 remove 方法remove(key, fn) {var fns = this.clientList[key];if (!fns) {return false;}if (!fn) {fns && (fns.length = 0);} else {for (var i = fns.length - 1; i >= 0; i--) {var _fn = fns[i];if (fn === _fn) {fns.splice(i, 1);}}}},
};

测试：

var f1 = function (price) {console.log('价格= ' + price);
};
Event.listen('s88', f1);var f2 = function (price) {console.log('价格= ' + price);
};
Event.listen('s110', f2);Event.remove('s110', f2); // 删除订阅Event.trigger('s88', 30000);
Event.trigger('s110', 70000);

5、先发布再订阅

应用场景：发布者发布的内容，不管订阅者在发布之前订阅，或者发布之后订阅，都可触发订阅者订阅的内容

代码：

var Event = (function () {var clientList = {};var offlineStack = {}; // 离线缓存参数var triggerStack = {}; // 已触发trigger的参数缓存var listen;var trigger;var remove;listen = function (key, fn) {if (!clientList[key]) {clientList[key] = [];}clientList[key].push(fn);// 如果此时订阅的事件，已经发布了，则自定触发一次订阅内容（fn）if (triggerStack[key]) {fn.apply(this, triggerStack[key]);} else if (offlineStack[key]) {// 如果是离线状态，则触发事件fn.apply(this, offlineStack[key]);}};trigger = function () {var key = Array.prototype.shift.call(arguments);var fns = clientList[key];if (fns) {// 已经有人订阅此事件，将参数缓存//（假如有些订阅者比较晚订阅，且发布者已经发布过了，那么这个订阅者订阅的时候，自动触发一次订阅内容）triggerStack[key] = [...arguments];for (var i = 0; i < fns.length; i++) {fns[i].apply(this, arguments);}} else {// 表示当前还没有人订阅此事件，则先将参数缓存起来offlineStack[key] = [...arguments];}};// 取消订阅remove = function (key, fn) {var fns = this.clientList[key];if (!fns) {return false;}if (!fn) {// 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅fns && (fns.length = 0);} else {for (var l = fns.length - 1; l >= 0; l--) {var _fn = fns[l];if (_fn === fn) {fns.splice(l, 1);}}}};return {listen: listen,trigger: trigger,remove: remove,};
})();

测试1：先订阅，再发布

// 先订阅
Event.listen('test1', function (a) {console.log('我是发布之前的订阅者1:', a);
});
Event.listen('test1', function (a) {console.log('我是发布之前的订阅者2:', a);
});
// 再发布
Event.trigger('test1', 12);// 我是发布之前的订阅者1: 12
// 我是发布之前的订阅者2: 12

测试2：先发布，再订阅

// 先发布
Event.trigger('test1', 12);// 再订阅
Event.listen('test1', function (a) {console.log('我是发布之后的订阅者1:', a);
});
Event.listen('test1', function (a) {console.log('我是发布之后的订阅者2:', a);
});// 我是发布之后的订阅者1: 12
// 我是发布之后的订阅者2: 12

测试3：先订阅，再发布，再订阅

// 先订阅
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者2:', a);
})// 再发布
console.log('---第1次发布');
Event.trigger('lis1', 123);
console.log('---第1次发布完成');// 再订阅
Event.listen('lis1', function (b) {console.log('我是发布之后的订阅者~:', b);
})// ---第1次发布
// 我是发布之前的订阅者1: 123
// 我是发布之前的订阅者2: 123
// ---第1次发布完成
// 我是发布之后的订阅者~: 123

测试4：先发布，再订阅，再发布，再订阅

// 先发布
console.log('------第1次发布-------');
Event.trigger('lis1', 123);// 再订阅
Event.listen('lis1', function (a) {console.log('我是发布之后的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之后的订阅者2:', a);
})// 再发布
console.log('------第2次发布-------');
Event.trigger('lis1', 456);// 再订阅
Event.listen('lis1', function (a) {console.log('我是发布之后的再次订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之后的再次订阅者2:', a);
})// ------第1次发布-------
// 我是发布之后的订阅者1: 123
// 我是发布之后的订阅者2: 123// ------第2次发布-------
// 我是发布之后的订阅者1: 456
// 我是发布之后的订阅者2: 456
// 我是发布z之后的再次订阅者1: 456
// 我是发布z之后的再次订阅者2: 456

测试5：先订阅，再发布，再订阅，再发布

Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者1:', a);
})
Event.listen('lis1', function (a) {console.log('我是发布之前的订阅者2:', a);
})console.log('---第1次发布');
Event.trigger('lis1', 123);
console.log('---第1次发布完成');Event.listen('lis1', function (b) {console.log('我是发布之后的订阅者~:', b);
})console.log('---第2次发布');
Event.trigger('lis1', 456);
console.log('---第2次发布完成');// ---第1次发布
// 我是发布之前的订阅者1: 123
// 我是发布之前的订阅者2: 123
// ---第1次发布完成
// 我是发布之后的订阅者~: 123// ---第2次发布
// 我是发布之前的订阅者1: 456
// 我是发布之前的订阅者2: 456
// 我是发布之后的订阅者~: 456
// ---第2次发布完成