5.可以说出两种实现双向绑定的方案、可以手动实现

可以说出两种实现双向绑定的方案、可以手动实现

1.手动绑定

Object.defineProperty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bidreactional binding</title>
</head>
<style>
    div {
        width: 40%;
        float: left;
        border: 1px dashed;
        padding: 20px;
        height: 100vh;
    }
</style>
<body>
    <div>
        <p>View:</p>
        <input id="view" />
    </div>
    <div>
        <p>Model:</p>
        <span id="model"></span>
    </div>
    <script src="./index.js"></script>
</body>
</html>
// 获取DOM节点
var view = document.getElementById('view');
var model = document.getElementById('model');
// 设置model对象
var data = {};
// 设置get函数的中转站，封装后可以去掉
let temp = 0;
//在data对象中定义number属性，并给他赋值两个访问器属性，来代理或者说劫持number的值的获取与设置
Object.defineProperty(data, "number", {
    //可枚举，这个主要是用来将Model显示在前端的，可以省去
    enumerable:true,
    // 获取值时的处理方法 就相当于代理执行获取值的操作，返回什么都又他决定，这里不能return data.number会造成无限循环的
    get: function () {
        return temp;
    },
    // data的number值发生变化时调用
    set: function (value) {
        // 改变View节点的值
        view.value = value;
        // 将值存在temp中，在get时要用到
        temp = value;
        // 这个主要是用来将Model显示在前端的，可以省去
        model.innerHTML = `"data":${JSON.stringify(data)}`;
    },
})
// 绑定事件，当view改变时将改变的值赋值给data对象中的number属性
view.addEventListener("keyup", function (event) {
    data.number = event.target.value;
})

2.Proxy双向绑定

// 这里只是为了前端展示model 可以省去
var model = document.getElementById('model');
// 所有dom的id
const domKeys =["username","password","sex"];
// 枚举信息 根据 {domkey:dom}
const domEnum = {};
// model
var data = {};
// proxy 代理整个data 
const proxy = new Proxy(data, {
    // taget 即为代理的对象 prop为属性值
    get: function (target, prop) {
        return target[prop];
    },
    // value为新值
    set: function (target, prop, value) {
        target[prop] = value;        
        domEnum[prop+'Dom'].value = target[prop];
        // 这里只是为了前端展示model 可以省去
        model.innerHTML = JSON.stringify(data);
    }
})
// 加上key事件
domKeys.forEach(item=>{
    const dom = document.getElementById(item);
    domEnum[item+'Dom'] = dom;
    dom.addEventListener("keyup", function (event) {
        proxy[item] = event.target.value;
    })
})

 

posted @ 2023-03-05 10:18  不想做混子的奋斗远  阅读(50)  评论(0)    收藏  举报