js设计模式--行为型--观察者模式

　　行为型：观察者模式

　　观察者模式：定义一种一对多的依赖关系，让多个观察者对象同时监听某一个对象，当这个目标对象的状态发生改变时，会通知所有的观察者对象，使它们自动更新。

　　使用：一个对象（目标对象）的状态发生改变，所有依赖对象（观察者对象）都将得到广播通知。

　　方式：使用面向对象技术，将这种依赖关系弱化。

　　案例：如有一个聊天群，里面有产品经理，前端，后端，UI，产品经理会把需求发到群里，然后@所有人，这个过程就是观察者模式。

/**
 * 观察者模式
 **/
// 定义 基础 发布者类
class Publisher {
  constructor() {
    this.observers = [];
    console.log("Publisher 初始化");
  }
  // 增加订阅者
  add(observer) {
    console.log("新增订阅者");
    this.observers.push(observer);
  }
  // 移除订阅者
  remove(observer) {
    console.log("移除订阅者");
    this.observers.forEach((item, i) => {
      if (item === observer) {
        this.observers.splice(i, 1);
      }
    });
  }
  // 通知订阅者
  notify() {
    console.log("通知订阅者");
    this.observers.forEach((observer) => {
      observer.update(this);
    });
  }
}

// 定义 基础 订阅者类
class Observer {
  constructor() {
    console.log("初始化订阅者");
  }
  update() {
    console.log("更新订阅者");
  }
}

// 定义具体的 发布类
class PrdPublisher extends Publisher {
  constructor() {
    /** super
     * 表示父类的构造函数，用来新建父类的this对象。
     * 在子类的构造函数中，只有调用super之后，才可以使用this关键字，
     * 否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
     * */
    super();
    // 初始化
    this.prdState = null;
    this.observers = [];
    console.log("具体的发布类，初始化");
  }
  //获取当前的 prdState
  getState() {
    console.log("获取当前 prdState");
    return this.prdState;
  }
  // 改变 prdState 的值
  setState(state) {
    console.log("改变 prdState");
    // prd的值发生改变
    this.prdState = state;
    // 需求文档变更，立刻通知所有开发者
    this.notify();
  }
}

// 定义具体的 观察者
class DevObserver extends Observer {
  constructor() {
    super();
    this.prdState = {};
    console.log("初始化 观察者");
  }
  // 具体的更新方法
  update(publisher) {
    // 更新
    this.prdState = publisher.getState();
    // 调用工作函数
    this.work();
  }
  work() {
    // 具体的业务方法
    console.log("具体业务方法");
  }
}

// 创建订阅者：前端开发李雷
const liLei = new DevObserver();
const A = new DevObserver();
const B = new DevObserver();
// 韩梅梅出现了
const hanMeiMei = new PrdPublisher();
// 需求文档出现了
const prd = {
  // 具体的需求内容
};
// 韩梅梅开始拉群
hanMeiMei.add(liLei);
hanMeiMei.add(A);
hanMeiMei.add(B);
// 韩梅梅发送了需求文档，并@了所有人
hanMeiMei.setState(prd);

　　观察者模式和发布-订阅者模式的区别？

　　相同：在核心思想，运行机制没有本质的差别。

　　不同：发布者直接触及到订阅者的操作，叫做观察者模式。

　　　　   发布者不直接触及到订阅者，而是由统一的第三方来完成实际的通信操作，叫做发布-订阅者模式。