使用Proxy、Reflect实现双向绑定
作者：listener_zhang
|
时间：2020-06-12 14:42
|
访问数：
|
今天再一个群里看到几个在校大学生在讨论标题的问题（我没有加入^_^），实在是看不下去他们的聊天，说这个地方难那个地方难，然后我就随便写了一个发群里了，发完后瞬间就安静下来了，这就有点尴尬了，下面就上代码吧！
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>使用Proxy、Reflect实现双向绑定</title>
-
</head>
-
<body>
-
<input type="text" name="" id="input" /></br>
-
<p id="show"></p>
-
</body>
-
<script type="text/javascript">
-
-
let inputObj = document.getElementById('input')
-
let showObj = document.getElementById('show')
-
-
-
let obj = {}
-
-
-
let 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
-
showObj.innerHTML = value
-
}
-
return Reflect.set(target, key, value)
-
}
-
}
-
-
let objProxy = new Proxy(obj, handler)
-
-
-
inputObj.addEventListener('keyup', function(e) {
-
objProxy.text = e.target.value
-
})
-
-
</script>
-
</html>
效果图如下：
ZHANGREN 
