使用Object.defineProperty方法，然后通過(guò)get和set方法設(shè)置對(duì)象屬性赢乓，可以讓我們知道對(duì)象什么時(shí)候被更改了，也就是說(shuō)石窑，別人對(duì)對(duì)象的操作牌芋，我們都可以知道，記住這句話
image.png
MVVM
M：指Model
V：值View
實(shí)現(xiàn)過(guò)程：當(dāng)M變化時(shí)通知V松逊，V變化時(shí)通知M躺屁；
一個(gè)簡(jiǎn)單的代碼實(shí)現(xiàn)
<!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 被設(shè)置了')
$('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 被設(shè)置了')
$('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的缺點(diǎn)
- 因?yàn)镸和V會(huì)相互影響，只要其中一方更改经宏，必定對(duì)另一方有影響犀暑，他們是同步的
- DOM操作內(nèi)存是很快的驯击，而內(nèi)存操作DOM，相對(duì)而言是比較慢的
- 我們做一個(gè)MVVM框架時(shí)要解決兩個(gè)問(wèn)題：
- 第一個(gè)：如果用戶頻繁改動(dòng)耐亏，能不能做到CPU消耗很谢捕肌；
- 第二個(gè)：如果用戶頻繁的進(jìn)行多次改動(dòng)广辰，那么我們能不能將多次更改合并為一個(gè)碟贾。
image.png
Vue Tip
image.png
知識(shí)點(diǎn)
- input事件：當(dāng)用戶輸入時(shí)就會(huì)觸發(fā)，而chang事件轨域，只有鼠標(biāo)拿開(kāi)才可以觸發(fā)
- dom event是同步的過(guò)程袱耽，它是立即馬上執(zhí)行的
經(jīng)驗(yàn)
- 學(xué)習(xí)框架，千萬(wàn)不要一開(kāi)始就去研究它的具體實(shí)現(xiàn)干发，最開(kāi)始只要會(huì)用就行朱巨，等熟練使用了它的所有特性之后，就可以考慮去研究它的源代碼實(shí)現(xiàn)了枉长；如果一開(kāi)始就研究它的源代碼冀续，那就真的是從開(kāi)始到放棄了
