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展示和数据操作。

相关内容推荐