摘要：发布订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。事件观察者模式应该是最常用的模式之一。总之，当消息一发布，所有的订阅者都会收到消息。发布订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。
发布/订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态（发布者）发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。
DOM 事件观察者模式应该是最常用的模式之一。在很多语言里都得到大量应用。包括我们平时接触的dom事件，也是js和dom之间实现的一种观察者模式。
document.body.addEventListener("click",function () {
alert(111);
},false);
document.body.addEventListener("click",function () {
alert(222);
},false);
document.body.addEventListener("click",function () {
alert(333);
},false);
document.body.click();//模拟点击事件
这里我们订阅了document.body 的 click 事件，当 body 被点击的时候，他就向订阅者发布这个消息，顺序弹出111 222 333。我们也可以随意的增加和删除订阅者。总之，当消息一发布，所有的订阅者都会收到消息。
这里，手动触发事件直接用了document.body.click()；但是更好的做法是IE下用 fireEvent，标准浏览器下用 dispatchEvent。
全局的发布/订阅对象发布/订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event 作为一个类似“中介者” 的角色，把订阅者和发布者联系起来。
let Event = (function () {
let clientList = {};
let listen;
let trigger;
let remove;
listen = function (name, cb) {
if( !clientList[name] ) {
clientList[name] = [];
}
clientList[name].push(cb);
};
trigger = function () {
let name = [].shift.call(arguments);
let fns = clientList[name];
if( !fns || fns.length == 0 ) return false;
fns.map((item, index) => {
item(...arguments); // 不要直接将arguments传入
})
};
remove = function (name, cb) {
let fns = clientList[name];
if( !fns ) return false; // name对应的消息么有被人订阅
if( !cb ) { // 没有传入cb(具体的回调函数), 表示取消 name 对应的所有订阅
fns && (fns.length = 0); // 不加括号会报错：ReferenceError: Invalid left-hand side in assignment
} else {
clientList[name] = fns.filter((item, index) => {
return item !== cb; // filter不改变原数组 return不忘记
})
/*
// 反向遍历
for(let i = fns.length - 1; i >= 0; i--) {
let _cb = fns[i];
if(_cb === cb) {
fns.splice(i, 1);
}
}
*/
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
let foo1 = function( num ){
console.log("foo triggered");
}
let foo2 = function( num ){
console.log(num);
}
Event.listen("foo", foo1);
Event.listen("foo", foo2);
Event.trigger("foo", 2);
// foo triggered
// 2
看下下面这段代码的输出，可以看到是无法取消对应的订阅信息的。就像{} === {}结果是 false一样(引用类型的特点：按地址存放)。
Event.remove("foo", function(num){console.log(num)});
Event.trigger("foo", 2);
// let obj1 = {};
// let obj2 = {};
//obj1 === obj2 // false
//but
//obj1 === obj1 // true
正确写法：
Event.remove("foo", foo2);
Event.trigger("foo", 2);
必须先订阅再发布吗
我们所了解的发布/订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。如果把顺序反过来，发布者先发布一个消息，而在此之前并没有对象来订阅它，那么这条消息就消失在宇宙中了。
建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，我们将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次，就像QQ的未读消息只会被重 新阅读一次，所以刚才的操作我们只能进行一次。
优缺点优点：
发布—订阅模式的优点非常明显：
时间上的解耦；
对象之间的解耦。
它的应用非常广泛,既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布/订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。
从架构上来看，无论是 MVC 还是 MVVM,，都少不了发布/订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。
缺点：
当然，发布/订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。
另外，发布/订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个 bug 不是件轻松的事情。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97239.html
摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式 《JavaScript设计模式与开发实践》读书笔记。 发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。 例...
摘要：观察者模式与发布订阅的区别在模式中，知道，同时还保留了的记录。发布者订阅者在大多情况下是异步方式使用消息队列。图片源于网络侵权必删如果以结构来分辨模式，发布订阅模式相比观察者模式多了一个中间件订阅器，所以发布订阅模式是不同于观察者模式的。 学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻分不清楚，博客起因如此，开始对观察者和发布...
摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式 定义 《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。 《设计模...
摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。 《JavaScript设计模式与开发实践》读书笔记。 看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...
阅读 783·2021-08-23 09:46
阅读 926·2019-08-30 15:44
阅读 2584·2019-08-30 13:53
阅读 3036·2019-08-29 12:48
阅读 3844·2019-08-26 13:46
阅读 1779·2019-08-26 13:36
阅读 3507·2019-08-26 11:46
阅读 1405·2019-08-26 10:48
