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

作者: 环零弦 | 来源:发表于2017-12-27 16:00 被阅读0次

Vue框架基础
【转】JavaScript的观察者模式（Vue双向绑定原理）
数据绑定
原生JavaScript实现数据的双向绑定
vue 双向数据绑定
JavaScript 实现双向数据绑定
Vue实现数据双向绑定的原理
vue表单
深入Vue响应式原理
美团面试总结

整理自《如何用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中的内容会随着input的value变化而改变。