乐趣区

关于java:defineProperty-和Proxy双向绑定演示你还不知道么

双向绑定,也就是说 js 中的数据传到页面,页面中的内容到 js,实现同步更新,简略的演示能够间接复制下放 HTML 代码运行。

在这个例子中,咱们应用 defineProperty,Object.defineProperty() 办法会间接在一个对象上定义一个新属性,或者批改一个对象的现有属性,并返回此对象。详细信息能够自行查看 MDN 文档。

简略来说,defineProperty 就是一个监听器,监听对象中某一个属性被拜访和批改,在 Vue2.0 中就是采纳 defineProperty

注意事项

  1. 在应用 get 函数监听属性的时候,不能间接监听以后属性,否则会呈现死循环。所以在应用前我将对象进行浅拷贝的起因
  2. 每一个 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、分布式缓存、数据结构等等。

退出移动版