使用Object.defineProperty手写一个简单的双向绑定

什么是双向绑定？
1.当一个对象（变量）的属性改变，那么调用这个属性的地方显示也发生变化，模型到视图（model=>view）
2.当调用属性的这个地方改变了这个属性（通常是一个表单元素）,那么这个对象（或变量）的属性也会改变为最新的值，即视图到模型（view=>model）

   <div>
     <input type="text" id="model" /><br/>
     <div id="modelText"></div>
   </div>

我们怎么知道对象的属性变了？
使用Object.defineProperty设置对象的描述字段里面有两个属性set（设置属性时被调用）和get(获取属性时被调用)

      let user = {}
      let defalutName = '会飞的鱼'
      let model = document.querySelector("#model")
      let modelText = document.querySelector("#modelText")
      model.value = defalutName
      modelText.textContent = defalutName
      // 定义属性 监听变化
      Object.defineProperty(user, 'name', {
        get: function() {
          console.log(`get name`);
          return defalutName
        },
        set: function(newval) {
          console.log(`set name`);
          defalutName = newval
          model.value = newval
          modelText.textContent = newval
        }
      })
      model.addEventListener('keyup', function () {
        user.name = this.value
        console.log('实现 视图=>模型');
      })

原文地址：http://www.cnblogs.com/mdtayz/p/16793064.html