javascript - Javascript 对象之间的通知

Question

如果我们有 2 个 Javascript 对象，我们如何让它们进行通信。例如如果 1 个对象中的值发生变化，如何通知另一个对象)

Answer 1

一种方法是向可观察对象添加方法，并通过此方法设置所需属性的值(如果愿意，可以使用 setter 方法)。这个 setter 方法将接受一个值和一个回调，每次调用 setter 时都会执行该回调。

该回调函数将获取观察者列表，并可能执行一些与它们相关的代码。

const observable = {
  prop: 1,
  setProp(val, cb) {
    console.log(`value of "prop" has been set to ${val}`);
    this.value = val;
    cb();
  }
};

const observer1 = {
  name: 'observer1',
  notifyMe() {
    console.log(`${this.name} has been notified`);
  }
};

const observer2 = {
  name: 'observer2',
  notifyMe() {
    console.log(`${this.name} has been notified`);
  }
};

// callback for setter method
function notifyObservers(...observers) {
  observers.forEach((obs) => {
    obs.notifyMe();
  });
}

// set value of observable and pass callback which will then
// be executed
observable.setProp(2, () => {
  notifyObservers(observer1, observer2);
});

使用代理和反射可以实现同样的效果。

const observable = {
  prop: 1
};

const observer = {
  name: 'observer',
  notifyMe() {
    console.log(`${this.name} has been notified`);
  }
};

const proxy = new Proxy(observable, {
  set(target, prop, val) {
    console.log(`value of "${prop}" has been set to ${val}`);
    observer.notifyMe();
    return Reflect.set(target, prop, val);
  }
});

proxy.prop = 2;

第一个示例和这个示例之间的区别在于，这里我们每次设置被观察对象的某些属性时都会调用 notifyMe，而在前面的示例中，我们仅在 prop 正在设置。

使用代理时，可以通过在 if 语句中包装 observer.notifyMe 部分来检查特定属性名称来实现相同的目的，例如 if (prop === 'prop' ) {observer.notifyMe() }.