全国咨询热线:18720358503

小程序的优势和功能_Vue数据驱动模仿完成2

类别:媒体报道 发布时间:2021-01-12 浏览人次:

Vue数据驱动模拟实现2       这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,实现Observer构造函数,监听已有数据data中的所有属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在随笔“”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗?

如下:

 

倘若user中的name、age属性变化,如何知道它们变化了呢?

今儿,就来解决这一问题。

通过走读Vue源码,发现他是利用Observer构造函数为每个对象创建一个Observer对象,来监听数据的,如果数据中的属性又是一个对象,那么就又通过Observer来监听嘛。

其实,核心思想就是树的先序遍历(关于树,可参考here)。如我们将上述Demo中的data数据,图形化一下,就更加明白了,如下:

 

好了,理清了大体思路,下面我们就一起来创建一个Observer吧。

二、Observer构造

Observer整体结构如下:

function Observer(data){
 //如若this不是Observer对象,即创建一个
 if(!(this instanceof Observer)){
 return new Observer(data);
 this.data = data;
 this.walk(data); 
let p = Observer.prototype = Object.create(null);
p.walk = function(data){
 TODO:监听data数据中的所有属性,
 并查看data中属性值是否为对象,
 若为对象,就创建一个Observer实例
p.convert = function(key, val){
 //TODO:通过Object.defineProperty监听数据 

好了,下面,我们一起来完成walk以及convert方法吧。

-walk-

首先,我们在walk方法中实现对data对象中的所有属性监听,如下:

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key = {
 let val = data[key];
 this.convert(key, val);

且,由于属性中可能又会是一个对象,那么,我们就有必要监听它们。

怎么办呢?

如果是个对象,再次利用Observer构造函数,处理它不就完了么。

如下:

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key = {
 let val = data[key];
 //如果val为对象,则交给Observer处理
 if(typeof val === 'object'){
 Observer(val);
 this.convert(key, val);

你可能会有这样的疑问,如果直接利用Observer处理对象,那么不就与父对象失去关联了么?

然而并没有,因为JavaScript对于对象是指向地址关系,所以怎么会失去关联呢。

-convert-

对于convert方法,就比较简单了,一如既往就是利用Object.defineProperty监听数据,如下:

p.convert = function(key, val){
 Object.defineProperty(this.data, key, {
 get: ()= {
 console.log('访问了'+key+' 值为'+val);
 return val;
 set: (newVal)= {
 console.log('设置了'+key+' 值为'+newVal);
 if(newVal !== val){
 val = newVal;

好了,到此,一个简单的Observer就构造完成,下面我们就来测试下,是否成功监听了每个属性。

 script src="./observer.js" /script 
 script 
 let data = {
 user: {
 name: 'Monkey',
 age: 24
 lover: {
 name: 'Dorie',
 age: 23
 Observer(data);
 /script 

效果如下:

Perfect,完整代码见。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

小程序的优势和功能_Vue数据驱动模仿完成2

Vue数据信息驱动器仿真模拟完成2 本文关键详细介绍了Vue数据信息驱动器仿真模拟完成的有关材料,完成Observer结构涵数,监视现有数据信息data中的全部特性,具备一定的参照使用...

2021-01-12
小程序开发公司_浅谈javascript的闭包

探讨javascript的闭包 文中详细介绍了javascript闭包的有关专业知识。具备非常好的参照使用价值,下边跟随网编一起來看看吧有关闭包的表述大家将功效域链叙述为一个目标目录,并...

2021-01-12
免费小程序生成_jQuery Pagination分页插件使用方法

jQuery Pagination分页查询软件应用方式详细说明 本文关键为大伙儿详尽详细介绍了jQuery Pagination分页查询软件的应用方式,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照...

2021-01-12
一键生成小程序_微信小程序 动态绑定数据及动态

手机微信微信小程序 动态性关联数据信息及动态性恶性事件解决 文章投稿:lqh 本文关键详细介绍了手机微信微信小程序 动态性关联数据信息及动态性恶性事件解决的有关材料,必...

2021-01-12
手机网站建设

互联网的多元化化是依据高新科技的发展趋势而发展趋势的,互连网也从PC端发展趋势到更便捷迅速捷,那麼手机上企业网站建设就相当关键了。那麼怎样作出更强的手机上企业网站建...

2021-01-12
微信小程序怎么做_JS中showModalDialog关闭子窗口改

JS中showModalDialog关掉子对话框更新主对话框使用方法详细说明 本文关键详细介绍了JS中showModalDialog关掉子对话框更新主对话框使用方法,融合实际案例方式比较详尽的剖析了showModa...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信