javascript原生实现双向数据绑定

jiezi

6 年前

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>
<body>

<h1 id="h1">

</h1>
<input type="text" id="input">
<button id="button">change</button>
<script>
    var data = {msg : "我是一个数据"}

    // 页面上的初始化

    h1.innerText = data.msg
    input.value = data.msg
    // 数据劫持，这个 api 可以对一个对象的属性进行精确的控制
    // 控制这个属性能够被赋值 能够被重写 能否被获取
    // 控制这个属性的读取 或者 写入 
    // get/set 
    // get 获取值  或者叫 读取
    // set 设置值  或者叫 赋值
    Object.defineProperty(data,"msg",{get(){
            // 当我获取 msg 的值的时候 我希望获取到的是什么结果呢？return input.value
        },
        set(newValue){
            // 当我给 msg 属性赋值的时候 我希望做一些事情
            // data.msg ="咳咳"
            // 因为要模拟双向数据绑定 那么得到的新的值 input 与 h1 中的内容也要跟新的值一致
            // 实际上在 vue 的底层这一步是通过观察者 / 订阅者模式实现
            h1.innerText = newValue;
            input.value = newValue
        }
    })

    button.onclick = function(){data.msg += 1}

    input.onkeyup = function(){
        // 当键盘抬起的时候 我们让 data.msg 获取新的值 也就是对 data.msg 重新赋值
        data.msg = input.value
        console.log(data.msg)
    }

</script>

</body>
</html>