网站首页 > 技术文章正文

DefineProperty 和Proxy双向绑定演示，你还不知道么?

hmc789 2024-11-17 11:14:51 技术文章 2 ℃

双向绑定，也就是说js中的数据传到页面，页面中的内容到js，实现同步更新，简单的演示可以直接复制下放HTML代码运行。

在这个例子中，我们使用defineProperty ，Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。详细信息可以自行查看MDN文档。

简单来说，defineProperty 就是一个监听器，监听对象中某一个属性被访问和修改，在Vue2.0中就是采用defineProperty

注意事项

在使用get函数监听属性的时候，不能直接监听当前属性，否则会出现死循环。所以在使用前我将对象进行浅拷贝的原因
每一个defineProperty只能对一个对象属性进行监听，所以你必须在使用之前就得知道属性的名字，但是很多时候属性是动态生成的，，所以就很麻烦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1 id="hname"></h1>
    <input type="text" id="inputname">
</body>

<script>
    let stu = {
        name: ""
    }
    let newstu = { ...stu };//浅拷贝
    //监听器
    Object.defineProperty(stu, "name", {
        get() {
            return newstu.name;
        },
        set(val) {
            if (val === newstu.name) return;
            newstu.name = val;
            doubleBind();
        }
    })
    //将数据传到页面中
    function doubleBind() {
        document.querySelector("#hname").innerHTML = stu.name;
        inputname.value = stu.name;//id可以直接使用
    }
    //输入框事件，将页面中数据返回
    inputname.oninput = function () {
        stu.name = inputname.value;
    }
    doubleBind()
    setTimeout(() => {
        stu.name = "Mary";
    }, 1000)
</script>

</html>

defineProperty的弊端很明显，在ES6中提出了Proxy，在Vue3.0中也将使用Proxy代替defineProperty，在Proxy中，我们可以在监听整一个对象属性的变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1 id="hname"></h1>
    <input type="text" id="inputname">
</body>

<script>
    let stu = {
        name: "12354"
    }
    
    //监听器处理函数
   
    //监听器
    stu = new Proxy(stu, {
        get(target, prop) {
          
            return target[prop];
        },
        set(target, prop,val){
            if (val === target.prop) return;
            target[prop] = val;
            doubleBind();
        }
    });
    //将数据传到页面中
    function doubleBind() {       
        document.querySelector("#hname").innerHTML = stu['name'];
        inputname.value = stu['name'];//id可以直接使用
    }
    //输入框事件，将页面中数据返回
    inputname.oninput = function () {
        stu['name'] = inputname.value;
    }
    doubleBind()
    setTimeout(() => {
        stu['name'] = "Mary";
        console.log(stu);
    }, 1000)
</script>

</html>

对比两个例子，眼尖的friend会发现，第一个例子中我访问对象属性使用的是stu.name,而在第二个例子中使用的是stu[‘name’]的方式。在《javascript高级程序设计》

引用类型的那一章提到：一般来说，访问对象属性时使用的都是点表示法，这也是很多面向对象语言中通用的语法。不过，

在 JavaScript 也可以使用方括号表示法来访问对象的属性。除非必须使用变量来访问属性，否则我们建议使用点表示法。在我们第二个例子Proxy中，prop是一个变量，所以我们使用方括号。特别要注意，stu.name和stu[name]是不一样的，当然如果有外部变量name=“name“，就一样了

最后

想要学习java基础或者进阶java 的同学私信回复资料领取一线大厂Java面试题总结+阿里巴巴泰山手册+各知识点学习思维导+一份300页pdf文档的Java核心知识点总结！

这些资料的内容都是面试时面试官必问的知识点，篇章包括了很多知识点，其中包括了有基础知识、Java集合、JVM、多线程并发、spring原理、微服务、Netty 与RPC 、Kafka、日记、设计模式、Java算法、数据库、Zookeeper、分布式缓存、数据结构等等。

上一篇：必考知识点-JavaScript类型转换(讲原理)
下一篇： http连接泄露，httpClient到底要关闭哪些资源

网站首页 > 技术文章 正文

DefineProperty 和Proxy双向绑定演示，你还不知道么?

最后

猜你喜欢

网站首页 > 技术文章正文