原生JS实现双向数据绑定

最新推荐文章于 2022-07-18 16:33:20 发布

自知与之明

最新推荐文章于 2022-07-18 16:33:20 发布

阅读量524

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52373329/article/details/117305759

版权

原生JS实现双向绑定，
个人理解：通过Object.defineProperty（），在原生JS里可以实现双向数据绑定，
代码段：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TS原生实现双向数据绑定</title>
</head>
<body>
    <input type="text" name="" id="myId">

    <p id="msg"></p>
</body>
<script>
    let myId = document.getElementById("myId")
    let msg = document.getElementById("msg")

    let data = {
        mesasge:''//这个变量要与输入框和P标签进行双向数据绑定
    }
    //目标：输入框得值改变，同步到mesage
    //message值改变，同步到页面
    let $data = {
        _mesasge:''
    }
    Object.defineProperty(data,'message',{
        set(val){
            $data._message = val
            myId.value = val
            msg.innerText = val
        },
        get(){
            return $data._message
        }
    })
    data.message = "a"
    console.log(data.message);

    // 监听V层改变
myId.oninput = function(e) {
    data.message = e.target.value
}

// 在JS原生里怎么让数据层改变视图层，使用Object.defineProperty监听数据的改变，在set里影响视图
//视图层改变如何影响数据层，视图层绑定事件，把值赋给变量

    // let obj = {
    //     a:1
    // }
    // //ES5有个方法:Object.defineProperty
    // Object.defineProperty(obj,'a',{//第一个参数是要监听的对象，第二个参数是监听得属性,第三个{}参数是配置项
    //     set(val){//这个函数会在给obj.a = 赋值的时候触发
    //         console.log('set执行了');//打印看一眼
    //     },
    //     get(){//obj.a提取值时触发
    //         console.log('get执行了');
    //     }
    // })
    // obj.a = 100//给obj对象的a属性赋值
</script>
</html>