5、观察者模式

观察者模式：允许一个对象在发生某个变化时自动通知其他关联模式

白话：存在两个角色：观察者、被观察者；观察者保持对被观察者的监视，当发现被观察者在做某件事时，就做出某些反应

// 观察者类
class Observer {
  update(subjectState) {
    throw new Error("该方法主要给子类重写");
  }
}

// 观察者子类 A
class createObserverA extends Observer {
  update(subjectState) {
    console.log("createObserverA subjectState", subjectState);
    // 其他逻辑....
  }
}

// 观察者子类 B
class createObserverB extends Observer {
  update(subjectState) {
    console.log("createObserverB subjectState", subjectState);
    // 其他逻辑....
  }
}

// 被观察者
class Subject {
  constructor(state) {
    this.observers = [];
    this.state = state;
  }

  // 注册观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

  // 被观察者的数据更新操作
  updateState(state) {
    this.state = state;

    // 通知所有观察者
    this.observers.forEach((ob) => ob.update(state));
  }
}

const subject = new Subject(1);
subject.addObserver(new createObserverA());
subject.addObserver(new createObserverB());

subject.updateState(2); // 将会自动通知观察者

实际案例：

Vue 的响应式就采用了代理模式 + 观察者模式

// 省略其他...

// reactive 函数
const reactive = (obj) => {
  return new Proxy(obj, { // Proxy 代理模式
    get(target, prop, receiver) {
      track(target, key, receiver) // 依赖收集
      return Reflect.get(target, prop)
    }
    set(target, prop, value, receiver) {
      Reflect.set(target, prop, value, receiver)

      trigger(target, prop, receiver) // 依赖触发
    }
  })
}

总结：一个‘做’，一个‘看’，‘看者’发现‘做者’做了某事，那就做出对应反应。

比如：妈妈在拖地，当你看到要拖到你面前时，你自然就抬脚了。