什么是双向绑定
1.当一个对象（或变量）的属性改变，那么调用这个属性地方也应该改变，模型到视图（model => view）
2.当调用属性的这个地方改变了这个属性（通常是一个表单元素），那么这个对象（或变量）的属性也随之改变，即视图到模型（view => model）
如何实现（怎么知道对象的属性变了）
Object.defineProperty 设置对象属性的描述字段里面有两个属性set(设置属性时被调用)和get（获取属性时被调用）
input检测属性值的改变，触发后对应修改对应的对象（或变量）
例：
<body>
手写一个简单双向绑定<br/>
<input type="text" id="model"><br/>
<div id="modelText"></div>
</body>
<script>
var user = {
name: '希染'
};
var defaultName = '希染'
var input = document.querySelector("#model");
var text = document.querySelector("#modelText");
input.value = user.name;
text.textContent = user.name;
// 数据到视图 model => view
Object.defineProperty(user,"name",{
get:function(){
console.log('获取user')
},
set:function(val){
console.log('修改user')
input.value = val;
text.textContent = val;
}
})
// 视图到数据 view => model
input.addEventListener('input',function(val){
user.name = input.value;
})
<script>
网友评论