前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。
发布-订阅模式
定义与介绍
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在JavaScript开发中,我们一般使用事件模型来替代传统的发布-订阅模式。
实际上,常用的DOM事件就是发布-订阅模式:
document.body.addEventListener('click', function() {
alert(2);
}, false)
document.body.click(); // 模拟用户点击
我们监听用户点击document.body
的动作,但我们没办法预知用户什么时候点击,所以我们订阅document.body
上的click
事件。当点击发生时,便会向订阅者发布这个消息。
发布-订阅模式的例子
假设这样一个场景: 很多客人在售楼部咨询买房,但目前还没有开盘,所以客人们把自己的联系方式留在售楼部,等到楼房开盘时,售楼部就会根据留下的联系方式,来通知咨询过的客户。
这就是一个典型的发布-订阅模式的场景。
// 全局发布-订阅对象
let Event = (function() {
// 订阅者Map, key为订阅内容关键字,value为通知方法的数组。
let clientList = {
},
listen,
trigger,
remove;
// 增加订阅者,传入一个订阅关键字key 和一个通知方法fn
listen = function(key, fn) {
if(!clientList[key]) {
clientList[key] = [];
}
clientList[key].push(fn);
};
// 发布消息,第一个参数为要发布的订阅关键字key,后边的参数为发布时的传参
trigger = function() {
// 取出第一个参数key
let key = Array.prototype.shift.call(arguments