Vue数据驱动模拟实现3


Posted in Javascript onJanuary 11, 2017

一、前言

在"模拟Vue之数据驱动2"中,我们实现了个Observer构造函数,通过它可以达到监听已有数据data中的所有属性。

但,倘若我们想在某个对象中,新增某个属性呢?

如下:

Vue数据驱动模拟实现3

那么岂不是,新增的infor属性,以及它的对象属性,没有得到监听。

此时,应该怎么处理呢?

通过走读Vue源码,发现他是采用另增属性方法$set实现的。

就是说,如果我们采用常规方法为对象增加属性(如上),我们没法得知并监控它,所以,我们为每个对象扩展一个$set方法,用于另增属性使用,即可,如下:

data.user.$set('infor', {msg: 'happy'});

好了,下面,我们就一同实现这个$set方法吧。

二、$set方法实现

首先,我们得创建一个恒定extendObj对象,用于将$set方法绑定在其中。

你可能会想,为什么我们需要一个extendObj对象呢?直接将$set函数赋值给每个需要监听的对象不就完了么?

是的,这样也可以,但是随着需求增长,倘若我们又想为每个监听对象扩展其他方法呢?难道又要去Observer里面为对象,一一赋值?

so,创建恒定extendObj对象,如下:

const extendObj = {};

因为,我们将$set绑定到extendObj中,且让$set为不可枚举型,所以会用到Object.defineProperty,固将其提取出来,作为一个方法如下:

function proxyObject(obj, key, val, enume){
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enume,
    writable: true,
    configurable: true
  });  
};

接下来,就是实现$set方法了,整体结构如下:

proxyObject(extendObj, '$set', function(key, val){
  //this指向extendObj
  if(this.hasOwnProperty(key)){
    return;
  }else{
    /*
     TODO:在extendObj中监听key属性,
     且,若key属性值为对象,再次监听key属性值
    */     
  }  
});

看到上面的TODO注释,是否似曾相识,不就是是在“模拟Vue之数据驱动2”遇见过的嘛,通过Observer.prototype.convert监听key属性,通过new Observer再次监听key属性值不就完啦。

的确,但是一旦这样做了,不就和上面我们提到的“直接将$set赋予监听对象”问题一样嘛,耦合性太大,且随着需求上涨,不易维护。

固而,在此需要一点小技巧:在observer模块中为每个监听对象赋予一个$Observer属性,其值指向Observer自身实例,如下:

//observer.js
p.walk = function(data){
  let keys = Object.keys(data);
  keys.forEach( key => {
    let val = data[key];
    if(typeof val === 'object'){
      new Observer(val);
    }
    this.convert(key, val);
  });
  //$Observer属性指向Observer自身实例
  data.$Observer = this;
}
//新增一个observe方法
p.observe = function(data){
  if(typeof data === 'object'){
    new Observer(data);  
  }  
}

好了,这样之后,得$set整体实现如下:

proxyObject(extendObj, '$set', function(key, val){
  if(this.hasOwnProperty(key)){
    return;
  }else{
    proxyObject(this, key, val, true);
    let ob = this.$Observer;
    ob.observe(val);
    ob.convert(key, val);  
  }  
});

到此,一个简单的$set方法构建完毕。

在上面我们提到,之所以需要一个恒定extendObj对象,是为了更好的代码管理。且,到目前为止,需要监听的对象上并没有扩展$set方法呢,所以,下面的事情就是为了达到以上效果,如下:

//observer.js
function Observer(data){
  if(!(this instanceof Observer)){
    return new Observer(data);
  }
  //将监听对象的隐指针指向我们的extendObj对象
  data.__proto__ = extendObj;
  this.data = data;
  this.walk(data);  
}

好了,一切完毕,接下来就测试下吧:

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

效果如下:

Vue数据驱动模拟实现3

Perfect,完整代码见github。

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

Javascript 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 #Javascript
jQuery Form表单取值的方法
Jan 11 #Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 #Javascript
浅谈JavaScript中promise的使用
Jan 11 #Javascript
JS多文件上传的实例代码
Jan 11 #Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 #Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
js DOM模型操作
2009/12/28 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python3.4爬虫demo
2019/01/22 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
讲座主持词
2014/03/20 职场文书
工程索赔意向书
2014/08/30 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2014年班级工作总结
2014/11/14 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
新手初学Java网络编程
2021/07/07 Java/Android
在 Python 中利用 Pool 进行多线程
2022/04/24 Python