JavaScript设计模式：观察者模式

模式概念

在软件系统中，一个对象的状态或行为的变化将导致其他对象的状态或行为也发生改变，他们之间将产生联动。

观察者模式：

• 定义了对象之间一种一对多的依赖关系，使得一个对象的状态改变时，其相关依赖对象皆得到通知并被自动更新
• 发生改变的对象称为观察目标，被通知的对象称为观察者
• 一个观察目标可以对应一个或者多个观察者
• 观察者模式是一种对象行为型模式

模式结构

• 观察者模式包含两个继承结构：观察目标和具体观察目标的继承结构，观察者和具体观察者的继承结构。
• 观察目标里面有一个用于存放所有观察者的集合observers，以及添加、删除观察者的方法，还有一个notify方法，当观察目标状态发生更改时，通知所有的观察者，让其做出响应。
• 观察者里面有一个update方法，就是作出响应的方法，而具体观察者里面的update方法即是不同的观察者做出响应的具体实现。
• 观察者响应的同时，可能会反向访问到观察目标里面的属性，进行相应的数据设置和获取。

在实际的软件开发中，大部分我们采用的是简化版的观察者模式的结构，也就意味着我们只定义一个观察目标类，观察目标没有继承结构，通过观察目标里面的添加、删除、通知观察者集合等方法，而在不同的观察者类里面实现了不同的响应。

观察者模式包含角色如下：

• Subject 目标
• ConcreteSubject 具体目标
• Observer 观察者
• ConcreteObserver 具体观察者

模式分析

• 有时候在具体观察者类ConcreteObserver中需要使用到具体目标类ConcreteSubject中的状态(属性)，会存在关联或依赖关系。
• 如果在具体层之间具有关联关系，系统的扩展性将受到一定的影响：增加新的具体目标类有时候需要修改原有观察者的代码，在一定程度上违背了开闭原则，但是如果原有观察者类无须关联新增的具体目标，则系统扩展性不受影响。
• 也就是当我们可能需要反方访问的时候，会出现以上这种影响扩展性的行为。

代码实现

这里结合一个例子实现该模式：

猫、老鼠、狗的故事：假设猫是老鼠和狗的观察目标，老鼠和狗是观察者，猫叫老鼠跑，狗跟着叫。

//观察目标类：猫
class Subject {
  constructor() {
    this.observers = []; //观察者集合
  }
  //添加观察者
  add(observer) {
    this.observers.push(observer);
  }
  //移除观察者
  delete(name) {
    this.observers = this.observers.filter(e => e.name !== name);
  }
  //简化版的观察者模式，直接在抽象观察目标中实现notify方法，通知观察者
  notify() {
    this.observers.forEach(item => {
      item.update();
    });
  }
}

//抽象观察者
class Observer {
  constructor(name) {
    this.name = name;
  }
  //观察者更新业务
  update() {
    console.log(`观察者${this.name}做出响应`);
  }
}
//具体观察者老鼠
class MouseObserver extends Observer {
  constructor(name) {
    super(name);
  }
  run() {
    console.log(`${this.name}跑起来`);
  }
  update() {
    console.log(`观察者${this.name}做出响应`);
    this.run();
  }
}
//具体观察者狗
class DogObserver extends Observer {
  constructor(name) {
    super(name);
  }
  call() {
    console.log(`${this.name}汪汪叫`);
  }
  update() {
    console.log(`观察者${this.name}做出响应`);
    this.call();
  }
}

const cat = new Subject();

const mouse = new MouseObserver("杰瑞");
const dog = new DogObserver("旺财");
cat.add(mouse);
cat.add(dog);

//猫叫
cat.notify();
// 观察者杰瑞做出响应
// 杰瑞跑起来
// 观察者旺财做出响应
// 旺财汪汪叫

模式的效果和应用

观察者模式优点：

• 可以实现表示层和数据逻辑层的分离
• 在观察目标和观察者之间建立一个抽象的耦合
• 支持广播通信，简化了一对多系统设计的难度
• 符合开闭原则，增加新的具体观察者无须修改原有系统代码，在具体观察者与观察目标之间不存在关联关系的情况下，增加新的观察目标也很方便

观察者模式缺点：

• 将所有的观察者都通知到会花费很多时间
• 如果存在循环依赖时可能导致系统崩溃
• 没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而只是知道观察目标发生了变化

在以下情况可以使用观察者模式：

• 一个抽象模型有两个方面，其中一个方面依赖于另一个方面，将这两个方面封装在独立的对象中使它们可以各自独立地改变和复用
• 一个对象的改变将导致一个或多个其他对象发生改变，且并不知道具体有多少对象将发生改变，也不知道这些对象是谁
• 需要在系统中创建一个触发链

观察者模式实际应用：

mvc架构：将模型层看作是观察目标，视图层看作是观察者。