可以说出两种实现双向绑定的方案、可以手动实现
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;
})
})
标签：target,实现,绑定,number,value,prop,双向,model,data From： https://www.cnblogs.com/alwaysrun/p/17179949.html