JavaScript设计模式之KVO接口设计

背景

MVVM设计模式是React Native/React中最常用的设计模式之一。RN页面元素通过KVO，将页面刷新逻辑和state对象进行绑定，从而实现数据驱动页面刷新。对于一个简单的页面，这样做没问题。但对于一个有大量数据需要操作的页面（比如一个用到多个独立UI组件，这些独立UI组件不应有较多内部数据处理逻辑），如果我们把各种数据的请求和数据操作都放到V中操作，可想而知这个页面代码的可读性、扩展性和可维护性会有多差。因此有些场景下，RN有必要对UI和数据进行再一次解耦。

解决方案

假设我们创建一个新的ViewModel类，在这个类中进行我们前面讨论的各种数据请求、数据，同时维护一个和state相同的数据模型，如果state可以根据ViewModel类中的数据变化而同步变化，那么进一步的解耦目的也就达成了。显然这是一个典型的KVO操作。
js中实现KVO可以使用Proxy类，以类的形式实现如下：

//KVO模式 可用于进一步设计MVVM，对数据操作和UI进行解耦

class KVOController {
  
  /* KVO
  * @param obj 被监听的对象
  * @param fn 监听对象发生变更时的回调，参数为(key, oldValue, newValue)
  */
  static observe(obj:any, fn:Function):Proxy{
    return new Proxy(obj, {
      set(target, key, value, receiver) {

          const oldValue = Reflect.get(target, key);
          const success = Reflect.set(target, key, value, receiver);
          const newValue = Reflect.get(target, key);

          if (typeof fn === 'function'){
             fn(key, oldValue, newValue);
          }
          return newValue;
       }
    });
}

用法示例：

const person = KVOController.observe({
  name: '张三',
  age: 20
}, (key, oldValue, newValue)=>{
    console.log(`${key} ${oldValue} ${newValue}`);
});

person.name = '李四';//输出 "name 张三 李四"
person.name = '王五';//输出 "name 李四 王五"

总结

KVO是MVVM的关键，利用好KVO可以进一步解耦UI展示和数据操作。