JavaScript设计模式：观察者模式与发布-订阅模式

一，两者区别

有人把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式，其实两者是有区别的，观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。

从图中可以看出，观察者模式中观察者和目标直接进行交互，而发布订阅模式中统一由调度中心进行处理，订阅者和发布者互不干扰。这样一方面实现了解耦，还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息，但是不想所有的订阅者都接收到，就可以在调度中心做一些处理，类似于权限控制之类的。还可以做一些节流操作。

 

 

二，观察者模式

观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。

// 目标者
class Subject {
  constructor() {
    this. observers = []; // 观察者列表
  }
 
  // 添加订阅者
  add(observer) {
    this.observers.push(observer);
  }
 
  // 删除...
  remove(observer) {
    let idx = this.observers.findIndex(item => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }
 
  // 通知
  notify() {
    for(let o of this.observers) {
      o.update();
    }
  }
}
 
// 观察者
class Observer {
  constructor(name) {
    this.name = name;
  }
 
  // 目标对象更新时触发的回调，即收到更新通知后的回调
  update() {
    console.log(`目标者通知我更新了，我是：${this.name}`);
  }
}
 
// 实例化目标者
let subject = new Subject();
 
// 实例化两个观察者
let obs1 = new Observer('前端');
let obs2 = new Observer('后端');
 
// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);
 
subject.notify();  

//目标者通知我更新了，我是：前端
//目标者通知我更新了，我是：后端

　　

　　

优缺点：

　　优点明显：降低耦合，两者都专注于自身功能；

　　缺点也很明显：所有观察者都能收到通知，无法过滤筛选；

 

三，发布-订阅模式

发布订阅模式：基于一个事件（主题）通道，希望接收通知的对象 Subscriber 通过自定义事件订阅主题，被激活事件的对象 Publisher 通过发布主题事件的方式通知各个订阅该主题的 Subscriber 对象。

// 控制中心
let pubSub = {
  list: {},
 
  // 订阅
  subscribe: function(key, fn) {
    if (!this.list[key]) this.list[key] = [];
 
    this.list[key].push(fn);
  },
 
  //取消订阅
  unsubscribe: function(key, fn) {
    let fnList = this.list[key];
 
    if (!fnList) return false;
 
    if (!fn) { // 不传入指定的方法，清空所用 key 下的订阅
      fnList && (fnList.length = 0);
    } else {
      fnList.forEach((item, index) => {
        item === fn && fnList.splice(index, 1);
      });
    }
  },
 
  // 发布
  publish: function(key, ...args) {
    for (let fn of this.list[key]) fn.call(this, ...args);
  }
}
 
// 订阅
pubSub.subscribe('onwork', time => {
  console.log(`上班了：${time}`);
})
pubSub.subscribe('offwork', time => {
  console.log(`下班了：${time}`);
})
pubSub.subscribe('launch', time => {
  console.log(`吃饭了：${time}`);
})
 
pubSub.subscribe('onwork', work => {
  console.log(`上班了：${work}`);
})
 
// 发布
pubSub.publish('offwork', '18:00:00'); //下班了：18:00:00
pubSub.publish('launch', '12:00:00');  //吃饭了：12:00:00
 
// 取消订阅
pubSub.unsubscribe('onwork');

　　

优缺点：

　　优点：解耦更好，细粒度更容易掌控；

　　缺点：不易阅读，额外对象创建，消耗时间和内存（很多设计模式的通病）

 

四，总结

 发布订阅模式更灵活，是进阶版的观察者模式，指定对应分发。

1. 观察者模式维护单一事件对应多个依赖该事件的对象关系；

2. 发布订阅维护多个事件（主题）及依赖各事件（主题）的对象之间的关系；

3. 观察者模式是目标对象直接触发通知（全部通知），观察对象被迫接收通知。发布订阅模式多了个中间层（事件中心），由其去管理通知广播（只通知订阅对应事件的对象）；

4. 观察者模式对象间依赖关系较强，发布订阅模式中对象之间实现真正的解耦。