手写ES6模拟双向绑定,上代码
{
// 获取dom节点
const inputObj = document.getElementById("input");
const txtObj = document.getElementById("txt");
// 初始化代理对象
const obj = {};
// 代理选项
const handler = {
get: function (target, key) {
return Reflect.get(target, key)
},
set: function (target, key, value) {
if (key === "text") {
inputObj.value = inputObj.value === value ? inputObj.value : value
txtObj.innerHTML = value
}
return Reflect.set(target, key, value)
}
}
let objProxy = new Proxy(obj, handler);
//给输入框添加键盘输入事件
inputObj.addEventListener("keyup", function (e) {
objProxy.text = e.target.value;
console.log(objProxy);
})
objProxy.text = "1234"
}
<!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>
<h1>Say What:<span id="txt"></span></h1>
<input type="text" id="input">
<script src="./dist/v-bind.js"></script>
</body>
</html>