今天研究了一下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>