实例:使用 Proxy 实现观察者模式

观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。

  1. const person = observable({
  2. name: '张三',
  3. age: 20
  4. });
  5. function print() {
  6. console.log(`${person.name}, ${person.age}`)
  7. }
  8. observe(print);
  9. person.name = '李四';
  10. // 输出
  11. // 李四, 20

上面代码中,数据对象person是观察目标,函数print是观察者。一旦数据对象发生变化,print就会自动执行。

下面,使用 Proxy 写一个观察者模式的最简单实现,即实现observableobserve这两个函数。思路是observable函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。

  1. const queuedObservers = new Set();
  2. const observe = fn => queuedObservers.add(fn);
  3. const observable = obj => new Proxy(obj, {set});
  4. function set(target, key, value, receiver) {
  5. const result = Reflect.set(target, key, value, receiver);
  6. queuedObservers.forEach(observer => observer());
  7. return result;
  8. }

上面代码中,先定义了一个Set集合,所有观察者函数都放进这个集合。然后,observable函数返回原始对象的代理,拦截赋值操作。拦截函数set之中,会自动执行所有观察者。