自己实现双向绑定机制（未完成）

为什么要双向绑定？

使用双向绑定之后，建立起了数据层和视图层之间的联系，让我们可以更专注于处理数据层的逻辑，不必在每次更新数据后手动的更新视图。

使用Object.defineProperty实现一个最基础的双向绑定demo

下面的代码使用了Obejct.defineProperty实现了一个最基础的双向绑定示例程序，在输入框中编辑内容之后，输入框下面的label中的内容也会动态更新。这只是一个双向绑定的toydemo，vue2中的双向绑定使用了观察者模式，维护起来更加方便。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>双向绑定</title>
</head>

<body>
    <input type="text" id="model"><br />
    <div id="modelText"></div>
</body>
<script>
    // view
    var model = document.querySelector("#model");
    var modelText = document.querySelector("#modelText");
    
    // data
    var defaultName = "defaultName";
    var userInfo = {}
    
    Object.defineProperty(userInfo, "name", {
        get: function () {
            return defaultName;
        },
        set: function (value) {
            // defaultName = value;
            // updateView
            model.value = value;
            modelText.textContent = value;
        }
    })

    // userInfo.name = "new value";
 
  model.addEventListener("keyup", function () {
    userInfo.name = this.value;
  }, false)
</script>

</html>

0 条评论