美文网首页
ife 2017 -vue部分 任务一 数据绑定

ife 2017 -vue部分 任务一 数据绑定

作者: 龍太 | 来源:发表于2017-03-06 11:51 被阅读0次

任务详情:

实现这样的一个 Observer,要求如下:

传入参数只考虑对象,不考虑数组。
new Observer返回一个对象,其 data 属性要能够访问到传递进去的对象。
通过 data 访问属性和设置属性的时候,均能打印出右侧对应的信息。

参考资料:https://github.com/youngwind/blog/issues/84,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

代码如下:

var Observer = function(dataObj) {
    this.data = dataObj;
    this.walk(dataObj);
};

//遍历要观察的对象属性

 Observer.prototype.walk = function (object) {

var value;

for (var key in object) {
    if (object.hasOwnProperty(key)) {
        value = object[key];
        //判断属性的value类型,如果仍然是object,就调用递归算法
        if (typeof value ==="object") {
            new Observer(value);
        };

        //将值传给convert函数
        this.convert(key,value);
    }
  }
}

Observer.prototype.convert = function (key,value) {
  Object.defineProperty(this.data,key,{
      enumerable: true,
      configurable: true,
      get:function() {
          console.log('正在访问'+key+'属性');
          return value;
      },
      set:function(newValue){
          console.log('正在设置'+key+'属性');
          console.log('属性值为'+ newValue);
          if(newValue === value){
              return;
          }
        value = newValue
      }
  });
}

相关文章

  • ife 2017 -vue部分 任务一 数据绑定

    任务详情: 实现这样的一个 Observer,要求如下: 传入参数只考虑对象,不考虑数组。new Observer...

  • 二.Vue.js起步练习

    1 数据绑定 1.1数据的双向绑定 红色部分都可以更改,使绿色部分改变Vue起步.png 2 条件循环 条件渲染指...

  • Vue入门(二)——数据绑定

    一、什么是双向数据绑定 双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指:HTML标签上的数据绑定到Vue...

  • vue实例和数据绑定

    vue实例和数据绑定 vue实例和数据绑定 通过script便签引入vue 通过vue构造函数来创建一个vue实例...

  • IFE2017,动态数据绑定(一)学习笔记

    getter和setter的三种设置方式 1.在对象定义中设置 2.利用Object.defineProperty...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • vue 双向数据绑定

    Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据...

  • vue

    数据绑定离不开data里面的数据。也是Vue的核心属性。 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框...

  • vue的数据绑定原理

    前言 每次谈到vue的双向数据绑定原理,大部分人都会说:Vue是通过Object.defineProperty方法...

  • Vue框架基础

    原生js与Vue框架的区别 用原生实现双向数据绑定 用Vue实现双向数据绑定 Vue是一个javaScript框架...

网友评论

      本文标题:ife 2017 -vue部分 任务一 数据绑定

      本文链接:https://www.haomeiwen.com/subject/tknygttx.html