- MVVM
在说MVVM之前我们首先使用一下Object.defineProperty()方法。
let frank = {
_data: {
name: 'frank',
age: 18
}
}
Object.defineProperty(frank,'age',{
get: function(){
console.log('frank.age被读取了')
return frank._data.age
//读age的时候，返回上面那个，为什么我们会多添加一个_data，然后返回的也是frank._data.age，而不是frank.age，可以修改尝试一下，无限循环。
},
set: function(xxx){
console.log('frank.age被设置了')
frank._data.age = xxx
console.log(frank)
}
})
当我们写下这段代码时，frank会添加一个新的属性age，然后当我们读取或改变这个属性的时候，都会有相应的通知。
frank.age //'frank.age被读取了'
frank.age = 20 //'frank.age被设置了'
接下来，我们在html中添加一个form表单，其中含有一些input元素。
<form >
<p>姓名<input type="text" name="name"></p>
<p>年龄<input type="number" name="age"></p>
<input type="submit" value="提交">
</form>
将JavaScript中的代码改成：
let frank = {
_data: {
name: 'frank',
age: 18
}
}
for(let key in frank._data){
Object.defineProperty(frank,key,{
get: function(){
console.log('frank.'+key+'被读取了')
return frank._data[key]
},
set: function(xxx){
console.log('frank.'+key+'被设置了')
//当我修改frank的属性时，input中的值会立即改变
$('input[name='+key+']').val(xxx)
frank._data[key] = xxx
console.log(frank)
}
})
}
$('form').on('input','input[name]',function(e){
let $input = $(e.target)
let name = $input.attr('name')
let val = $input.val()
//当我修改视图中的值时，frank中的值会立即改变
frank[name] = val
})
$('input[name="name"]').val(frank.name)
$('input[name="age"]').val(frank.age)
上面的代码基本实现了数据层M和视图层V的相互交互，两头相互监听，一旦一方改变，另一方就会有变化。上面的defineProperty和我们DOM事件都是同步的。
缺点：
- MVVM里一个缺点就是V和M是同步的，当我们有一点改变时，另一方都会立马改变，这样会非常占用cpu。如果用户频繁的改动就会造成卡顿。
- 另一个缺点就是，如果我们的html里有
<p>爱好<input type="text" name="hobby"></p>
而_data里面没有相应的属性值，我们就不能设置其与数据的同步，这时候，我们需要一个API，将hobby设置到_data和frank中
createGetAndSet('hobby',0)
