MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫(xiě)，一種軟件設(shè)計(jì)典范肛跌，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面 顯示分離的方法組織代碼衍慎，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面转唉，在改進(jìn)和個(gè)性化定制界面及用戶(hù)交互的同時(shí)，不需要重新編寫(xiě)業(yè)務(wù)邏輯稳捆。
如何設(shè)計(jì)一個(gè)程序的結(jié)構(gòu)赠法，這是一門(mén)專(zhuān)門(mén)的學(xué)問(wèn)，叫做"架構(gòu)模式（architectural pattern）乔夯，屬于編程的方法論砖织。MVC模式就是架構(gòu)模式的一種。
問(wèn)題：假如你的項(xiàng)目需要保存用戶(hù)的數(shù)據(jù)到后臺(tái)服務(wù)器末荐。
（1）你數(shù)據(jù)來(lái)源從數(shù)據(jù)庫(kù)中來(lái)侧纯。也就是說(shuō)，你需要根據(jù)具體的數(shù)據(jù)來(lái)生成一個(gè)顯示數(shù)據(jù)的頁(yè)面甲脏。
（2）在用戶(hù)添加一個(gè)特辦事項(xiàng)后眶熬，你需要把數(shù)據(jù)存入數(shù)據(jù)庫(kù)中。然后块请，從數(shù)據(jù)庫(kù)中取出當(dāng)前最新的數(shù)據(jù)娜氏，顯示給用戶(hù)。
使用mvc框架實(shí)現(xiàn)-分析
Model:提供數(shù)據(jù)及操作數(shù)據(jù)的各類(lèi)方法墩新。
View:提供視圖贸弥。
Controller:接收用戶(hù)的動(dòng)作，修改數(shù)據(jù)海渊，更新視圖茂腥。
數(shù)據(jù)保存在json中
"data":[{
"id":1,
"todo":"學(xué)習(xí)js",
"time":"2016-08-01"
},
{
"id":2,
"todo":"吃飯"
},
{
"id":31,
"todo":"散步",
"time":"2016-08-01"
},
{
"id":4,
"todo":"休息"
}]
添加數(shù)據(jù)
第一步：獲取用戶(hù)的數(shù)據(jù)。
第二步：controller.addData(something).先關(guān)鍵字過(guò)濾切省，完成后，再調(diào)用Model.addData();
第三步：controller.showData()
從Model中獲取數(shù)據(jù)帕胆。
從模板(view視圖)中獲取結(jié)構(gòu)信息朝捆。
把結(jié)構(gòu)信息中占位符(如$todo$)換成數(shù)據(jù)。
顯示數(shù)據(jù)（container.innerHTML）
理解mvc的運(yùn)轉(zhuǎn)
添加數(shù)據(jù)：從controller -----> model
獲取數(shù)據(jù)：model --->controller
顯示數(shù)據(jù)：controller( model + view) --- > 數(shù)據(jù)顯示頁(yè)面懒豹。
var model = {
"data":[{
"id":1,
"todo":"學(xué)習(xí)js",
"time":"2016-08-01"
},
{
"id":2,
"todo":"吃飯"
},
{
"id":31,
"todo":"散步",
"time":"2016-08-01"
},
{
"id":4,
"todo":"休息"
}]
,
"getMaxId":function(){
var maxId = this.data[0].id;
for(var i = 0; i<this.data.length;i++){
if(this.data[i].id > maxId)
maxId = this.data[i].id;
}
return maxId;
},
"addData":function(todo){
var id = this.getMaxId() + 1;
var o = {"id":id,"todo":todo};
this.data.push(o);
console.info(this.data);
},
"getTotalNum":function(){ //當(dāng)前的數(shù)據(jù)的條數(shù)
return this.data.length;
}
}
//控制器
var controller = {
showData:function(){
//第一步：取出模板的內(nèi)容
var string = document.getElementById("template").innerHTML;
//第二步：通過(guò)正則來(lái)進(jìn)行數(shù)據(jù)的替換
var str = "";
var p1 = /\$\w+\$/g;
for(var i = 0; i<model.data.length;i++){
var _str = string.replace(p1,function(m){
var t = m.replace(/\$/g,"");//去掉m前后$芙盘，相當(dāng)于把$id$ -- >id
return model.data[i][t];
});
str +=_str; //把每次替換的結(jié)果都保存下來(lái)。
}
//第三步：顯示最終的頁(yè)面
document.getElementById("container").innerHTML = str;
//第四步：更新總數(shù)據(jù)的條數(shù)
this.updateTotalNumber();
},
addData:function(something){
//檢測(cè)合法性脸秽，有效性....
// 檢測(cè)通過(guò)儒老，則調(diào)用model的相關(guān)方法去實(shí)現(xiàn)具體的工作
if(something == "戰(zhàn)爭(zhēng)"){
return false;
}
else{
model.addData(something);
}
},
updateTotalNumber:function(){
document.getElementById("totalNumber").innerHTML = model.getTotalNum() +"條";
}
}
//點(diǎn)擊按鈕后
document.getElementById("btn").onclick =function(){
var something = document.getElementById("todo").value;
// var newToDo = {"id":100,"todo":something};
// model.addData(something);
controller.addData(something);
//數(shù)據(jù)添加完成
controller.showData();
console.info(model.data);
}
controller.showData();
為什么要使用mvc
1.有利于分工
例如專(zhuān)人負(fù)責(zé)model
2.有利于細(xì)化問(wèn)題，分步解決
例如：你希望多加一些關(guān)鍵字的處理记餐，則可以在controller去更新驮樊，而不會(huì)影響其它的開(kāi)發(fā)
