JS发布-订阅模式 和 观察者模式
1、发布订阅模式
发布-订阅模式不同于观察者模式，之前经常容易将两者统一起来， 它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。在 JS 开发中，我们一般用事件模型来替代传统的发布-订阅模式。
1.发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如我们可以订阅 ajax 请求的 error ，success 等事件。或者如果想在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布-订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。
2.发布-订阅模式可以取代对象之间的硬编码的通知机制，一个对象不用再显式的调用另一个对象的某个接口。发布-订阅模式让两个对象松耦合的联系在一起，虽然不太清楚彼此的细节，但这不影响他们之间的相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要修改时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由的改变它们。
1.DOM 事件
我们使用的 DOM 节点上绑定事件函数，就是发布-订阅模式
document.body.addEventListener('click',function(){
alert(123);
});
document.body.click();这里需要监控用户点击 document.body 的动作，但是我们没办法预知用户将在什么时候点击。所以我们订阅 document.body 上的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布这个消息。这很像购房例子，购房者不知道房子什么时候开售，于是他在订阅消息后等待售楼处发布消息。
当然我们可以随意增加或者删除订阅者，增加任何订阅者都不会影响发布者，例如：
document.body.addEventListener('click',function(){
alert(345);
});
document.body.addEventListener('click',function(){
alert(456);
})2.自定义事件
除了 DOM 事件，我们经常会实现一些自定义事件，这种依靠自定义事件完成的发布-订阅模式可以用于任何 JavaScript 代码中。实现步骤：
- 首先要指定谁充当发布者（比如售楼处）；
- 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）；
- 最后发布消息，发布者会遍历这个缓存列表，一次触发里面存放的订阅者回调函数（遍历花名册，挨个给客户发短信）；
另外，我们还可以往毁掉函数里面填入一些参数，订阅者可以接收这些参数。这是很必要的，比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息后可以进行各自的处理：
var salesOffices = {}; //定义售楼处
salesOffices.clientList = []; //缓存列表，存放订阅者的回调函数
salesOffices.listen = function(fn){ //增加订阅者
this.clientList.push(fn); //订阅的消息添加进缓存列表
}
salesOffices.trigger = function(){ //发布消息
for(var i = 0,fn;fn = this.clientList[i++];){
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(20000,88); //输出两次：200万，88平
salesOffices.trigger(30000,110); //输出两次：300万，110平至此我们实现了一个简单的发布-订阅模式，但这里还存在一些问题，我们看到订阅者接收到了发布者无差别发布的每个消息，虽然小明只想买 88 平的房子，但是发布者把小红需要的 110 平信息也发送给了小明，这对小明来说是不必要的困扰（骚扰短信）。所以我们有必要增加一个标识 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 = [].shift.call(arguments); //取出消息的类型 key
var fns = this.clientList[key]; //取出该消息对应的回调函数集合
if(!fns || fns.length === 0){ //如果没有订阅该消息，则返回
return false;
}
for(var i=0,fn;fn = fns[i++];){
fn.apply(this,arguments); //arguments 是发布消息时传递的参数
}
}
//测试
salesOffices.listen('sm88',function(price){//小明订阅的88平消息
console.log('price:'+price);
})
salesOffices.listen('sm110',function(price){//小红订阅的110平消息
console.log('price:'+price);
})
//发布消息
salesOffices.trigger('sm88',20000);//发布后，只有只有小明接收到这个88消息：price:2000000
salesOffices.trigger('sm110',30000);//发布后，只有只有小红接收到这个110消息：price:30000003.发布-订阅模式的通用实现
现在我们看到了如何让售楼处拥有接受订阅和发布事件的功能。假设现在小明又要去另一个售楼处买房子，那么是否必须在另一个售楼处对象上重写一次呢，有没有办法让所有的对象都拥有发布-订阅功能呢？答案是有的，JS 作为一门解释执行的语言，给对象添加职责是理所当然的，我们把发布-订阅的功能提取出来，放到一个单独的对象内：
var psEvent = {
clientList:{},
listen:function(key,fn){
if(!this.clientList[key]){
this.clientList[key] = [];
}
this.clientList[key].push(fn); //订阅的消息添加进对应类型的缓存列表
},
trigger:function(){
var key = [].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);//arguments 是 trigger 时传入的参数
}
}
}再定义一个 installEvent 函数，这个函数可以给所有的对象都动态安装发布-订阅功能：
var installEvent = function(obj){
for(var i in psEvent){
obj[i] = psEvent[i];
}
};测试：
var salesOffices = {}; //生命一个新的对象
installEvent(salesOffices);//给 salesOffices 对象安装发布订阅功能
//测试
salesOffices.listen('sm88',function(price){//小明订阅的88平消息
console.log('price:'+price);
})
salesOffices.listen('sm110',function(price){//小红订阅的110平消息
console.log('price:'+price);
})
//发布消息
salesOffices.trigger('sm88',20000);//发布后，只有只有小明接收到这个88消息：price:2000000
salesOffices.trigger('sm110',30000);//发布后，只有只有小红接收到这个110消息：price:30000004.取消订阅的事件
有时候，我们也许需要取消订阅事件的功能。例如小明突然不想买房子了，为了避免继续接收到售楼处的短信，小明需要取消之前订阅的事件。现在我们给 psEvent 对象增加 remove 方法：
psEvent.remove = function(key,fn){
var fns = this.clientList[key];
if(!fns){ //如果 key 对应的消息没有被人订阅，则直接返回
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); //删除订阅者的回调函数
}
}
}
}测试：
var salesOffices = {}; //生命一个新的对象
installEvent(salesOffices);//给 salesOffices 对象安装发布订阅功能
//测试
salesOffices.listen('sm88',fn1 = function(price){//小明订阅的88平消息
console.log('price:'+price);
})
salesOffices.listen('sm110',fn2 = function(price){//小红订阅的110平消息
console.log('price:'+price);
})
//删除小明的订阅
salesOffices.remove('sm88',fn1); //删除后将不再打印小明的消息
//发布消息
salesOffices.trigger('sm110',30000);//发布后，只有只有小红接收到这个110消息：price:3000000
我们将其封装到了两个全局变量中，一个是 psEvent，一个是 installEvent，现在我们将其合并到一起，当传入一个参数对象时，我们把 psEvent 安装到这个传入的参数对象上，如果没有传入参数，则返回一个带有发布-订阅功能的对象。
function installEvent(initObj){
var psEvent = {
clientList:{},
listen:function(key,fn){
if(!this.clientList[key]){
this.clientList[key] = [];
}
//订阅的消息添加进相应的缓存列表
this.clientList[key].push(fn);
},
trigger:function(){
var key = [].shift.call(arguments);
var fns = this.clientList[key];
//没有绑定相应的消息
if(!fns || fns.length === 0) return false;
//发布消息通知订阅者
for(var i=0;i5.全局的发布-订阅对象
刚刚我们实现的发布-订阅模式还存在了两个小问题：
1. 我们给每个发布者对象都添加了 listen 和 trigger 方法，以及一个缓存列表 clientList，这其实是一种资源浪费。
2. 小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是 salesOffices，才能顺利的订阅事件。代码：
salesOffices.listen('sm88',fn1 = function(price){//小明订阅的88平消息
console.log('price:'+price);
})如果小明还关心 300 平的房子，而这套房子的卖家是 salesOffices2，这意味着小明要开始订阅 salesOffices2 对象，代码：
salesOffices2.listen('sm300',fn1 = function(price){//小明订阅的300平消息
console.log('price:'+price);
})其实在现实中，买房子未必需要亲自去售楼处，我们只要把订阅的请求交给中介公司，而各大房产公司也只需要通过中介来发布房子信息。这样一来，我们不用关系消息是来自那个房产公司，我们在意的是能否顺利收到消息。当然，为了保证订阅者和发布者能顺利通信，订阅者和发布者都必须知道这个中介公司。
同样在程序中，发布-订阅模式可以用一个全局的 Event 对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event 作为一个类似“中介者”的角色，把订阅者和发布者联系起来。代码：
var Event = (function(){
var clientList = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!clientList[key]){
clientList[key] = [];
}
clientList[key].push(fn);
};
trigger = function(){
var key = Array.prototype.shift.call(arguments),
fns = clientList[key];
if(!fns || fns.length===0){
return false;
}
for(var i=0,fn;fn=fns[i++];){
fn.apply(this,arguments);
}
};
remove = function(key,fn){
var fns = clientList[key];
if(!fns){
return false;
}
if(!fn){
fns && (fns.length=0);
}else{
for(var len = fns.length-1;len>=0;len--){
var _fn = fns[len];
if(_fn === fn){
fns.splice(len,1);
}
}
}
};
return {
listen:listen,
trigger:trigger,
remove:remove
}
})();//测试：
Event.listen('sm88',function(price){//订阅消息
console.log(price,'price88');
});
Event.trigger('sm88',20000);//发布消息6.模块间通信
上面我们实现的发布-订阅模式，是基于一个全局的 Event 对象，我们利用它可以在两个封装良好的模块中进行通信，这两个模块可以完全不知道对方的存在。就如果有了中介公司之后，我们不再需要知道房子开售的消息来自哪个售楼处。
比如现在有两个模块，a 模块里面有一个按钮，每次点击按钮后，b 模块里的 div 中会显示按钮的总点击次数，我们用全局发布-订阅模式完成下面的代码，使得 a 模块和 b 模块可以在保持封装性的前提下进行通信。
但是这里我们要留意另一个问题，模块之间如果用了太多的全局发布-订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。我们最终会搞不清楚消息来自哪个模块，或者消息会流向哪个模块，这又会给我们的维护带来一些麻烦，也许某个模块的作用就是暴露一些接口给其他模块调用。
2.观察者模式
观察者模式定义了对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的时对象之间的通讯，观察者模式就是观察者与被观察者之间的通讯。
代码：简单实现就是被观察者里面存储了观察者的对象列表，当被观察者发生某种行为的时候，会调用观察者的方法。
class Observed {
constructor () {
this.state = 0
// 观察者队列
this.observers = []
}
getState () {
// 返回当前值
return this.state
}
setState (val) {
this.state = val
// 当值发生改变的时候通知所有的观察者
this.notify()
}
// 添加观察者到队列中
attach (observer) {
this.observers.push(observer)
}
notify () {
this.observers.forEach(observer => {
// 所有的观察者实现一个update方法来实现观察者的业务逻辑
observer.update(this.state)
})
}
}
// 观察者
class Observer {
constructor (name, observed) {
this.name = name
// 拿到被观察者
this.observed = observed
// 把当前的观察者添加到观察者队列中
this.observed.attach(this)
// 当前观察者要做的事情列表
this.effects = []
}
update (val) {
// 观察者监听到被观察着发生变化后所有的副作用在这里呈现
this.effects.forEach(effect => {
effect.call(this, val)
})
}
addEffects (effect) {
this.effects.push(effect)
}
}
// test
// 初始化一个被观察者对象
let observed = new Observed()
// 初始化一个观察者对象，传入name 和 被观察者
let observer1 = new Observer('ob1', observed)
observer1.addEffects(function(){console.log(this, `${this.name} updated, getState:${this.observed.getState()}`)})
let observer2 = new Observer('ob2', observed)
observer2.addEffects(function(val){console.log(this.name + 'val:', val)})
let observer3 = new Observer('ob3', observed)
observer3.addEffects(function(val){console.log(this.name + 'val:', val)})
// 改变被观察者的值
observed.setState(888)3.观察者模式与发布订阅模式的区别
先从图片中看看区别：
可以看出，发布订阅模式相比观察者模式多了一个事件通道，事件通道作为调度中心，管理事件的订阅和发布工作，彻底隔绝了订阅者和发布者的依赖关系。即订阅者在订阅事件的时候，只关注事件本身，而不关心谁会发布这个事件；发布者在发布事件的时候，只关注事件本身，而不关心谁订阅了这个事件。
观察者模式有两个重要的角色，即目标和观察者，在目标和观察者之间没有事件通道的。一方面，观察者想要订阅目标事件，由于没有事件通道，因此必须将自己添加到目标中进行管理；另一方面，目标在触发事件的时候，也无法将通知操作委托给事件通道，因此只能亲自去通知所有的观察者。
差异总结：
- 角色角度来看，发布订阅模式需要三种角色，发布者、事件中心、订阅者。而观察者模式需要两种角色，目标和观察者，无事件中心负责通信。
- 从耦合度上来看，发布订阅模式是一个中心调度模式，订阅者和发布者是没有直接关联的，通过事件中心尽心关联，两者是解耦的。而观察者模式中的目标和观察者是直接关联的，耦合在一起（有些观念说观察者是解耦，解耦的是业务代码，不是目标和观察者本身）
4.观察者模式和发布订阅模式的区别
发布订阅模式：
优点：灵活，由于发布订阅模式的发布者和订阅者是解耦的，只要引入事件中心，无论在何处都可以发布订阅。同时发布者和订阅者相互之间不影响。
发布订阅模式在使用不当的情况下，容易造成数据流混乱，所以才有了React提出的单向数据流思想，就是为了解决数据流混乱的问题。
缺点：
1.容易导致代码不好维护，灵活是优点，同时也是缺点，使用不当的情况下就会造成数据流混乱，导致代码不好维护。
2.性能消耗更大，订阅发布模式需要维护事件队列，订阅的事件越多，内存消耗就越大。
观察者模式：
优点：响应式，目标变化就会通知观察者，这是观察者模式最大的优点，也是因为这个优点观察者模式才会在前端这么出名。
缺点：不灵活，相比发布订阅模式，由于目标和观察者是耦合在一起的，所以观察者模式需要同时引入目标和观察者才能达到响应式的效果。而发布订阅模式只需要因为事件中心，订阅者和发布者可以不在一处。
参考：发布订阅模式和观察者模式区别_sky_100的博客-CSDN博客