JavaScript中双向数据绑定详解

双向数据绑定是指数据模型（Model）与视图（View）双方的数据自动进行同步，一方数据的改变会自动反映到另一方。在JavaScript中实现双向数据绑定可以减少代码量及提高开发效率。

实现方式

方式一：脏值检查

脏值检查指的是使用定时器或者计数器，定期去检查数据模型与视图是否同步，若不同步则进行更新。

此方式的实现较为复杂，而且需要经常检查，对于大数据量实时数据的应用，性能较低，因此不太适合大型应用的双向数据绑定。

方式二：数据劫持

数据劫持是指使用Object.defineProperty()方法来劫持/监听数据模型的改变，并自动触发视图的更新。具体实现如下：

var data = { msg: "Hello World" }
Object.defineProperty(data, 'msg', {
    get() {
        console.log("获取值")
        return value
    },
    set(newValue) {
        console.log("值被修改")
        value = newValue
    }
})

实例说明

示例一

<body>
  <label for="msg">Message：</label>
  <input id="msg" type="text">

  <p id="output"></p>
  <script>
    var inputEle = document.getElementById("msg")
    var outputEle = document.getElementById("output")

    // 绑定数据，使数据与视图同步
    inputEle.addEventListener("keyup", function () {
      outputEle.innerText = inputEle.value
    })
  </script>
</body>

此示例中，使用了事件监听方式实现双向数据绑定。当input的输入内容发生改变时，触发keyup事件并将input的值传给p标签，从而使数据与试图同步更新。

示例二

<body>
  <div>
    <p>name: </p>
    <p id="name"></p>
  </div>

  <div>
    <p>age: </p>
    <p id="age"></p>
  </div>

  <script>
    var data = { name: "Jackie", age: "23" }

    // 数据劫持，使数据与视图同步
    Object.defineProperty(data, 'name', {
      get() {
        return this.name
      },
      set(newValue) {
        document.getElementById('name').innerHTML = newValue
        this.name = newValue
      }
    })
    Object.defineProperty(data, 'age', {
      get() {
        return this.age
      },
      set(newValue) {
        document.getElementById('age').innerHTML = newValue
        this.age = newValue
      }
    })

    // 同时更新数据与视图
    document.getElementById('name').innerHTML = data.name
    document.getElementById('age').innerHTML = data.age
  </script>

</body>

此示例中，使用数据劫持方式实现双向数据绑定。当数据模型中的name或age属性发生改变时，触发set方法，从而自动更新视图。同时在页面上直接展示数据，达到数据与视图同步的效果。