一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用Proxy、Reflect实现双向绑定
advertisement

使用Proxy、Reflect实现双向绑定

今天再一个群里看到几个在校大学生在讨论标题的问题(我没有加入^_^),实在是看不下去他们的聊天,说这个地方难那个地方难,然后我就随便写了一个发群里了,发完后瞬间就安静下来了,这就有点尴尬了,下面就上代码吧!

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>使用Proxy、Reflect实现双向绑定</title>  
  5. </head>  
  6. <body>  
  7.     <input type="text" name="" id="input" /></br>  
  8.     <p id="show"></p>    
  9. </body>  
  10. <script type="text/javascript">  
  11.     // 获取dom元素  
  12. let inputObj = document.getElementById('input')  
  13. let showObj = document.getElementById('show')  
  14.   
  15. // 初始化代理对象  
  16. let obj = {}  
  17.   
  18. // 代理选项  
  19. let handler = {  
  20.     get: function(target, key) {  
  21.         return Reflect.get(target, key)  
  22.     },  
  23.   
  24.     set: function(target, key, value) {              
  25.         if(key === 'text') {  
  26.             inputObj.value = inputObj.value === value ? inputObj.value : value  
  27.             showObj.innerHTML = value  
  28.         }  
  29.         return Reflect.set(target, key, value)  
  30.     }  
  31. }  
  32.   
  33. let objProxy = new Proxy(obj, handler)  
  34.   
  35. // 给input添加事件监听  
  36. inputObj.addEventListener('keyup', function(e) {  
  37.     objProxy.text = e.target.value  
  38. })  
  39.   
  40. </script>  
  41. </html>  
效果图如下:


zhangren.online
上一篇:【JavaScript 数组】数组(Array)相关API
下一篇:vue使用rem,实现移动端适配

您可能喜欢

​javaascript修改url不刷新页面

​javaascript修改url不刷新页面

​Js中获取对象的所有key值

​Js中获取对象的所有key值

​vue使用rem,实现移动端适配

​vue使用rem,实现移动端适配

​Js获取当前日期时间及其它操作

​Js获取当前日期时间及其它操作

​火眼金睛识".eq"和":eq"

​火眼金睛识".eq"和":eq"

回到顶部