mvc指的是model，view，controller 三部分，view為視圖層，負責顯示內(nèi)容；model為模塊層，負責業(yè)務(wù)邏輯和數(shù)據(jù)存儲；controller為控制層,負責將它們聯(lián)系起來。這樣就做到了表現(xiàn)與數(shù)據(jù)分離。看接下來的兩段代碼：
沒有使用mvc
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVC</title>
<script type="text/javascript" src="../jquery/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var end = $('#end');
$('#pili').change(function () {
var name = '';
var p = $(this).val();
if(p == '葉小釵'){
name = '葉小釵';
}
if(p == '葉中釵'){
name = '葉中釵';
}
if(p == '葉大釵'){
name = '葉大釵';
}
end.html(name+p)
});
});
</script>
</head>
<body>
<select id="pili">
<option value="葉小釵">葉小釵</option>
<option value="葉中釵">葉中釵</option>
<option value="葉大釵">葉大釵</option>
</select>
<div id="end"></div>
</body>
</html> -->
使用mvc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVC</title>
<script type="text/javascript" src="../jquery/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//定義一個controller
var piliController = {
//選擇視圖
start:function () {
this.view.start();
},
//將用戶操作映射到模型上
set:function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
piliKV:{
'葉小釵':'葉小釵',
'葉中釵':'葉中釵',
'葉大釵':'葉大釵',
},
curPerson:null,
//數(shù)據(jù)模型負責業(yè)務(wù)邏輯和數(shù)據(jù)存儲
setPerson:function (name ) {
this.curPerson = this.piliKV[name]?name:null;
this.onchange();
},
//通知數(shù)據(jù)同步更新
onchange:function () {
piliController.view.update();
},
//相應(yīng)視圖對當前狀態(tài)的查詢
getPiliAction:function () {
return this.curPerson?this.piliKV[this.curPerson]+this.curPerson:'???';
}
};
piliController.view = {
//用戶觸發(fā)change事件
start:function () {
$('#pili').change(this.onchange);
},
onchange:function () {
piliController.set($('#pili').val());
},
update:function () {
$('#end').html(piliController.model.getPiliAction());
}
};
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="葉小釵">葉小釵</option>
<option value="葉中釵">葉中釵</option>
<option value="葉大釵">葉大釵</option>
</select>
<div id="end"></div>
</body>
</html>
前一個和后一個代碼實現(xiàn)一樣的功能，好吧，后一個看起來略微的有點復雜。為什么要使用這種模式呢？因為一個界面的更改相對于他要實現(xiàn)的功能和存放的數(shù)據(jù)的更改相對更頻繁一些，我們不能每次界面更改就全盤把代碼重新碼一遍，那樣的話大概會累死，而且這樣做也會使代碼更加易讀。
