前端设计模式——发布订阅者模式

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

观察者模式让我们不需要在异步运行期间关心内部状态，只关心订阅事件的发生点，而且可以让两个对象象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。

其实Vue框架中有很多地方都用到了这个模式，比如组件间传递参数$emit、$on，还有watch的实现等。这个模式在前端使用非常广泛。

案例：

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 ), // (1); 
 fns = this.clientList[ key ]; 
 if ( !fns || fns.length === 0 ){ // 如果没有绑定对应的消息
 return false; 
 } 
 for( var i = 0, fn; fn = fns[ i++ ]; ){ 
 fn.apply( this, arguments ); // (2) // arguments 是 trigger 时带上的参数
 } 
 } 
}; 
//再定义一个 installEvent 函数，这个函数可以给所有的对象都动态安装发布—订阅功能：
var installEvent = function( obj ){ 
 for ( var i in event ){ 
 obj[ i ] = event[ i ]; 
 } 
}; 
//使用salesOffices动态增加发布—订阅功能：
var salesOffices = {}; 
installEvent( salesOffices ); 
salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅消息
 console.log( '价格= ' + price ); 
});

在 JavaScript 中，我们无需去选择使用推模型还是拉模型。推模型是指在事件发生时， 发布者一次性把所有更改的状态和数据都推送给订阅者。拉模型不同的地方是，发布者仅仅通知 阅者事件已经发生了，此外发布者要提供一些公开的接口供订阅者来主动拉取数据。拉模型的 处是可以让订阅者“按需获取”，但同时有可能让发布者变成一个“门户大开”的对象，同时 增加了代码量和复杂度。 刚好在 JavaScript 中，arguments 可以很方便地表示参数列表，所以我们一般都会选择推模型， 使用 Function.prototype.apply 方法把所有参数都推送给订阅者。

发布—订阅模式的优点非常明显，一为时间上的解耦，二为对象之间的解耦。它的应用非常 广泛，既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。从架构上来看，无论是 MVC 还是 MVVM， 都少不了发布—订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。