利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

Posted zzd0916

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用ES6中的Proxy和Reflect 实现简单的双向数据绑定相关的知识，希望对你有一定的参考价值。

利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo。

好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect。

 

话不多说，直接上代码

<!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>

 

实现的效果：

技术分享图片

 

监听input 的时候修改newProxy的值，检测到newProxy 重新设置了值得时候，因为newProxy代理了obj这个对象， 所以可以调用Reflcet 反射到原obj.

所以我修改了Input 的值后，然后控制台输入obj,会打印出input的值。

 

newProxy

以上是关于利用ES6中的Proxy和Reflect 实现简单的双向数据绑定的主要内容，如果未能解决你的问题，请参考以下文章

es6——Proxy和Reflect

ES6新特性：Javascript中的Reflect对象

ES6(Proxy 和 Reflect)

ES6 Proxy和Reflect

ES6知识点：Proxy和Reflect详解

ES6知识点：Proxy和Reflect详解