设计模式之Observer模式（观察者模式）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

简介：

Observer模式 ：当观察对象的状态发生变化时，会通知给观察者。Observer模式适用于根据对象状态进行相应处理的场景。观察者（Observer）和被观察者（Subject）不需要关注各自的操作，为了解耦。

注意：需要区别于发布-订阅模式，发布-订阅模式在观察者基础上多了一个调度中心；常见的场景有eventBus、Vuex。

应用场景：

日常场景：版本上线通知（收到通知，相应人员再做出相应处理） ；浏览器的事件监听；Vue响应式原理等等。

示例代码：

// 观察者列表
function ObserverList() {
  this.observerList = [];
}
ObserverList.prototype.add = function (obj) {
  return this.observerList.push(obj);
};
ObserverList.prototype.get = function (index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};
ObserverList.prototype.indexOf = function (obj, startIndex) {
  var i = startIndex;
  while (i < this.observerList.length) {
    if (this.observerList[i] === obj) {
      return i;
    }
    i++;
  }
  return -1;
};
ObserverList.prototype.removeAt = function (index) {
  this.observerList.splice(index, 1);
};

// 被观察者
function Subject() {
  this.observers = new ObserverList();
}
Subject.prototype.addObserver = function (observer) {
  this.observers.add(observer);
};
Subject.prototype.removeObserver = function (observer) {
  this.observers.removeAt(this.observers.indexOf(observer, 0));
};
Subject.prototype.notify = function (context) {
  var observerCount = this.observers.count();
  for (var i = 0; i < observerCount; i++) {
    this.observers.get(i).update(context);
  }
};

// 观察者
function Observer() {
  this.update = function () {
    // ...
  };
}

优点：

观察者模式的优点：

• 可以广泛应用于异步编程，他可以代替我们传统的回调函数，我们不需要关注对象在异步执行阶段的内部状态，我们只关心事件完成的时间点
• 取代对象之间硬编码通知机制，一个对象不必显式调用另一个对象的接口，而是松耦合的联系在一起。
• 不影响相互通信，其中一个对象改变不会影响另一个对象。

缺点：

一个被观察者，多个观察者时，不易调试，并且会影响性能。