美文网首页
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部分 任务一 数据绑定

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