MVVM学习记录
2017-08-16 本文已影响9人
放风筝的小小马
使用Object.defineProperty方法，然后通过get和set方法设置对象属性，可以让我们知道对象什么时候被更改了，也就是说，别人对对象的操作，我们都可以知道，记住这句话
image.png
MVVM
M：指Model
V：值View
实现过程：当M变化时通知V，V变化时通知M；
一个简单的代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<form>
<p>姓名<input type="text" name="name">
<p>年龄<input type="number" name="age">
<p><input type="submit" value="提交">
</form>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
var frank = {
_data: {
age: 18,
name: 'frank'
}
}
Object.defineProperty(frank, 'age', {
get: function(){
console.log('frank.age 被读取了')
return frank._data.age
},
set: function(xxx){
console.log('frank.age 被设置了')
$('input[name="age"]').val(xxx)
frank._data.age = xxx
if(xxx>20){
$('form').addClass('red')
}
}
})
Object.defineProperty(frank, 'name', {
get: function(){
console.log('frank.name 被读取了')
return frank._data.name
},
set: function(xxx){
console.log('frank.name 被设置了')
$('input[name="name"]').val(xxx)
frank._data.name = xxx
}
})
$('form').on('input', 'input[name]', function(e){
let $input = $(e.currentTarget)
let name = $input.attr('name')
let value = $input.val()
frank[name] = value
})
$('input[name="name"]').val(frank.name)
$('input[name="age"]').val(frank.age)
$('form').on('submit', function(e){
e.preventDefault()
console.log(frank)
})
setInterval(function(){
frank.age ++
},1000)
MVVM的缺点
- 因为M和V会相互影响，只要其中一方更改，必定对另一方有影响，他们是同步的
- DOM操作内存是很快的，而内存操作DOM，相对而言是比较慢的
- 我们做一个MVVM框架时要解决两个问题：
- 第一个：如果用户频繁改动，能不能做到CPU消耗很小；
- 第二个：如果用户频繁的进行多次改动，那么我们能不能将多次更改合并为一个。
image.png
Vue Tip
image.png
知识点
- input事件：当用户输入时就会触发，而chang事件，只有鼠标拿开才可以触发
- dom event是同步的过程，它是立即马上执行的
经验
- 学习框架，千万不要一开始就去研究它的具体实现，最开始只要会用就行，等熟练使用了它的所有特性之后，就可以考虑去研究它的源代码实现了；如果一开始就研究它的源代码，那就真的是从开始到放弃了
