今天研究了一下JS的双向绑定。
发现这东西最核心的是浏览器内置的Object.defineProperty方法或者Object.defineProperties，前者只能定义对象的一个属性与相应的元素进行绑定，后者可以定义一组进行绑定。

不废话了，直接上代码：
// 代码的效果：定时修改对象中的message属性值，然后页面的H1会自动跟着变； 当然你也可以通过修改input对话框中的值的方式来进行（addEventListener中可以指定要监听的时间类型，一般用input，不过你可以改成click会有新发现哦，哈哈）

<!DOCTYPE html>
<html lang="en">

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

<body>
    <input name="message" type="text" value="aaa" />
    <h1></h1>
    <div id="msgH1" name="msgH1">msgH1</div>
    <button name="zhangsan"></button>

    <script>
        function fnMakeBindObject() {
            let obj = {}
            // let message=null
            // Object.defineProperties(obj, {
            //     message: {
            //         get: function () {
            //             return message 
            //         },
            //         set: function (newValue) {
            //             console.log("set", newValue)
            //             message = newValue
            //             window.document.querySelector("h1").innerText = newValue
            //         }
            //     }
            // });
            let inputs = document.getElementsByTagName("input")
            for (let i = 0; i < inputs.length; i++) {
                let input = inputs[i]
                let name = input.getAttribute("name")
                Object.defineProperty(obj, name, {
                    get: function () {
                        return input.value
                    },
                    set: function (newValue) {
                        console.log("set", newValue)
                        input.value = newValue
                        window.document.querySelector("h1").innerText=newValue
                    }
                })
            }
            return obj
        }
        let obj = fnMakeBindObject()
        obj.message = "bbb"
        obj.message = "ddd"
        obj.message="ccc"

        window.document.querySelector("input").addEventListener("click", function (e) {
            obj.message = e.target.value
        })

        //写一个定时器，定时将当前时间更新到obj.message上面
        setInterval(function () {
            obj.message = new Date().toLocaleTimeString()
            console.log(obj.message)
        }, 1000)
    </script>
</body>


</html>