龙空技术网

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

八嘎语赋能 346

前言:

今天你们对“js两个括号连用”大约比较重视,看官们都需要剖析一些“js两个括号连用”的相关资讯。那么小编也在网摘上搜集了一些关于“js两个括号连用””的相关知识,希望咱们能喜欢,兄弟们一起来了解一下吧!

双向绑定,也就是说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、分布式缓存、数据结构等等。

标签: #js两个括号连用