当前位置: 首页 > 后端技术 > Node.js

ChetuCub的自我修养-[MVVM]如何监听数据变化

时间:2023-04-03 16:54:33 Node.js

数据监控vm模式的核心是数据变化驱动视图更新。关键是,我们怎么知道数据发生了变化呢?发布-订阅模型通过事件发布/监控的方式实现数据监控。即数据发生变化后,发布者会触发自定义事件如valueChage,订阅者捕获到该事件后,会进行后续处理(值判断/视图更新/其他自定义逻辑)。这其实是最简单的要加的事件处理机制还有一个简单完美的GET/SET监听数据变化的实现,目前非常流行的Vm框架Vue也应用了这种方式。这就是Es5中对象的新扩展方法Object.defineProperty()。它带来了无数的可能性。通过设置和改变对象的属性,我们也可以很方便的实现数据变化后的逻辑处理。下面简单看一下Object.defineProperty()的简单使用Object.defineProperty(obj,prop,descriptor)varobj={};Object.defineProperty(obj,"name",{enumerable:true,configurable:true,get:function(){console.log('get#');returnname;},set:function(newValue){console.log('set#');name=newValue+"~~~";}});obj.name='Xie'//set#console.log(obj.name);//get#谢~~~obj.name='Min'//set#console.log(obj.name);//get#min~~~参数介绍:value:属性的值writable:如果为false,属性的值不能被覆盖get:一旦访问到目标属性,就会回调该方法,进行操作此方法的结果将返回给用户设置:一旦目标属性被赋值,此方法将被调用configurable:如果为false,则任何尝试删除目标属性或修改该属性的以下属性(writable,configurable,enumerable)行为会被invalidateenumerable:是否可以在for...in循环中遍历或者在Object.keys中列出P.swriteble/value不能与get/set共存,因为object不允许有两种访问机制的类型。正是由于get/set的特性,才实现了数据驱动。我们可以通过设置set方法

varobj={};来完成数据变化->视图更新逻辑$('#input').on('input',function(){obj.data=$(this).val();});Object.defineProperty(obj,"data",{enumerable:true,configurable:true,get:function(){returndata;},set:function(newData){data=newData;$('#output').text(数据);}});数据变化驱动视图更新是MVVM模式下VM的核心逻辑。在这种模式下的任何时候,我们都不应该直接通过操作DOM节点来改变视图,而必须改变数据状态,通过驱动数据状态的改变来改变视图(具体方法上面已经说了,捕获valueChange事件/SET等)Angular/Vue/Avalone/等MVVM框架。封装优化这一步。