Object.defineProperty实现数据绑定

1、Object.defineProperty方法

   Object.defineProperty(obj, prop, descriptor); 

（1）参数：

　　  obj:目标对象

　　prop:需要定义的属性或方法的名字。

　　descriptor:目标属性所拥有的特性。

（2）可配置属性(descriptor)：

• value　　　　　　属性的值
• writable　　          是否可改写，如果为false，就为只读，不能重新赋值，和const差不多
• enumerable　　   能否枚举，如果设置为false则不能在for……in中出现　　
• configurable　　 ’配置‘，顾名思义，一旦为false，就不能再设置他的（value，writable，configurable）
• ---------在 descriptor 中不能 同时设置访问器 (get 和 set) 和 wriable 或 value，否则会错，就是说想用(get 和 set)，就不能用（wriable 或 value中的任何一个）------
• get　　读取时调用这个方法
• set　　赋值时调用这个方法

2、双向绑定的实现

data为与界面绑定的数据

var data={
    name:'张三',
    age:23,
    sex:'male'
};

.view中为绑定的html

<div class="view">
    <input type="text" bind="name">
    <p bind="name"></p>
    <p bind="age"></p>
    <p bind="sex"></p>
</div>

（1）数据 ---> 视图

遍历data，对其每个属性在set方法中添加页面元素（视图）改变的方法；

$.each(data,function(key,value){
      var val=data[key];
      var $ele=$('.view').find('*');
      Object.defineProperty(_data,key,{
          set:function(v){
              //console.log('设置值'+key+'为：'+v);
              val=v;
              $ele.each(function(index, el) {
                var _this=$(this);
                if(_this.attr('bind')===key){ //是否为绑定值
                  if(el.tagName==='INPUT'){   //是否为input标签
                      _this.val(val);
                  }else{
                      _this.html(val);
                  }
                }
              });
          },
          get:function(){
              //console.log('获取值'+key);
              return val;
          }
      })
})

（2）视图 ---> 数据

为输入框绑定input事件，视图数据发生变化时，修改data对应属性值

$('.view')find('input').on('input',function(){
    var _this=$(this);
    var key=_this.attr('bind');
    data[key]=_this.val();
})