发布/订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态（发布者）发生改变时，所有依赖于它的对象都将得到通知。在 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 不是件轻松的事情。
网友评论