利用ES6中的Proxy (代理) 和 Reflect 實現一個簡單的雙向數據綁定demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>proxy</title>
</head>
<body>
<h1>使用Proxy 和 Reflect 實現雙向數據綁定</h1>
<input type="text" id="input">
<h2>您輸入的內容是： <i id="txt"></i></h2>
<script>
//獲取dom元素
let oInput = document.getElementById("input");
let oTxt = document.getElementById("txt");
//初始化代理對象
let obj = {};
//給obj增加代理對象
let newProxy = new Proxy(obj,{
get: (target,key,recevier)=>{
//console.log("get:"+ key)
return Reflect.get(target,key,recevier);
},
set: (target,key,value,recevier)=>{
//監聽newProxy是否有新的變化
if(key == "text"){
oTxt.innerHTML = value;
}
//將變化反射回原有對象
return Reflect.set(target,key,value,recevier);
}
})
//監聽input輸入事件
oInput.addEventListener("keyup",(e)=>{
//修改代理對象的值
newProxy.text = e.target.value;
})
</script>
</body>
</html>