object.defineproperty 实现双向绑定 

<script>

    /* ***** get/set存取器描述对象属性 ******
    注意：当使用了getter或setter方法，不允许使用writable和value这两个属性
    注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined
        configurable和enumerable同上面的用法。
        在ie8下只能在DOM对象上使用，尝试在原生的对象使用 Object.defineProperty()会报错。
　　　　　configurable: false, // 不可删除
    */

    var obj = {a:1,b:2};
    var initValue = 'hello';
    Object.defineProperty(obj,"a",{
        get:function (){
            //当获取值的时候触发的函数
            var initValue = "波多野结衣";
            return initValue;    
        },
        set:function (value){
            //当设置值的时候触发的函数,设置的新值通过参数value拿到
            initValue = value;
        }
    });
    //获取值
    console.log( obj.a );  //波多野结衣

    //设置值
    obj.newKey = 'change value';

    console.log( obj.newKey ); //change value  
    
</script>

 

>>>>> 手写双向数据绑定，从视图到模型 （view => model） 与 从模型到视图，仅且都只是利用了一个set方法 来达到目的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双向绑定</title>
</head>
<body>
  <input type="text" id="model"><br/>
  <div id="modelText"></div>
</body>
<script>
  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      return defaultName;
    },
    set: function (value) {
      defaultName = value;
      model.value = value;
      console.log("-----value");
      console.log(value);
      modelText.textContent = value;
    }
  })
 
  userInfo.name = "new value";
  var isEnd = true;
 
  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //加入监听中文输入事件
  model.addEventListener("compositionstart", function () {
    console.log("开始输入中文");
    isEnd = false;
  })
  model.addEventListener("compositionupdate", function () {
    console.log("输入中文中...");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("结束输入中文");
  })
</script>
</html>

 

posted @ 2019-03-24 00:04  expworld  阅读(155)  评论(0)    收藏  举报