原生JavaScript实现数据的双向绑定

整理自《如何用javascript实现双向数据绑定》。

为了实现这个功能我们需要用到js的一个方法Object.defineProperty

1. 属性介绍

  • 语法:Object.defineProperty(obj,prop,descriptor);

  • 描述:

    • obj:必需。目标对象
    • prop:必需。需定义或修改的属性的名字
    • descriptor:必需。目标属性所拥有的特性
  • 用法:

    var demo = {
      name: 'json'
    };
    Object.defineProperty(demo, 'name', {
      value: 'jack',
      writable: true
    })
    //更改demo的name属性值
    demo.name = 'mike';
    //查看name属性
    demo.name // 输出mike
    //小结:value: 设置属性的值
    //      writable: 值是否可以重写。 true | false
    // 如果var demo = {};  则上述方法就会为该对象添加一个name属性并给其赋值
    

2. 方法介绍(就直接上完整例子了)

<html>

<body>
  <input id="userName" style="border: 3px solid #999;" oninput="modelToView(this.value)" />
  <label id="userNameTo" style="border: 3px solid #999;"></label>
  <script type="text/javascript">
    var inputObj = document.getElementById('userName');
    var showObj = document.getElementById('userNameTo');
    var model = new Object(null);
    Object.defineProperty(model, 'user', {
      set: function (value) {
        showObj.innerHTML = value;
        user = value;
      },
      get: function () {
        return user;
      }
    })

    function modelToView() {
      model['user'] = inputObj.value
    }
  </script>
</body>

</html>

label中的内容会随着inputvalue变化而改变。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容