理解javascript中的MVC
MVC模式是軟件工程中一種軟件架構模式，一般把軟件模式分為三部分，模型(Model)+視圖(View)+控制器(Controller);
模型：模型用于封裝與應用程序的業務邏輯相關的數據以及對數據處理的方法。模型有對數據直接訪問的權利。模型不依賴 "視圖" 和 "控制器", 也就是說 模型它不關心頁面如何顯示及如何被操作.
視圖：視圖層最主要的是監聽模型層上的數據改變，并且實時的更新html頁面。當然也包括一些事件的注冊或者ajax請求操作(發布事件),都是放在視圖層來完成。
控制器：控制器接收用戶的操作，最主要是訂閱視圖層的事件，然后調用模型或視圖去完成用戶的操作;比如：當頁面上觸發一個事件，控制器不輸出任何東西及對頁面做任何處理; 它只是接收請求并決定調用模型中的那個方法去處理請求, 然后再確定調用那個視圖中的方法來顯示返回的數據。
沒有使用mvc模式的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript demo no mvc</title>
</head>
<body>
<h3>JavaScript no MVC</h3>
<div>
<select name="" id="setAnimal">
<option value="cat">cat</option>
<option value="fish">fish</option>
<option value="bird">bird</option>
</select>
<p id="whatDoesThisAnimalDo"></p>
</div>
<script type="text/javascript">
document.getElementById('setAnimal').onchange = function(){
var thisAnimalDoes;
switch(this.value){
case 'cat':
thisAnimalDoes = 'cat meows';
break;
case 'fish':
thisAnimalDoes = 'fish swims';
break;
case 'bird':
thisAnimalDoes = 'bird fies';
break;
default:
thisAnimalDoes = 'wuff?';
}
document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
};
</script>
</body>
</html>
采用mvc模式例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript demo mvc</title>
</head>
<body>
<h3>JavaScript simple MVC</h3>
<div>
<select name="" id="setAnimal">
<option value="cat">cat</option>
<option value="fish">fish</option>
<option value="bird">bird</option>
</select>
<p id="whatDoesThisAnimalDo"></p>
</div>
<script type="text/javascript">
// controller
Animal = {
start: function() {
this.view.start();
},
set: function(animalName) {
this.model.setAnimal(animalName);
}
};
// model
Animal.model = {
animalDictionary: {
cat: 'meows',
fish: 'swims',
bird: 'flies'
},
currentAnimal: null,
setAnimal: function(animalName) {
this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
this.onchange();
},
onchange: function() {
Animal.view.update();
},
getAnimalAction: function() {
return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : 'wuff?';
}
};
// view
Animal.view = {
start: function() {
document.getElementById('setAnimal').onchange = this.onchange;
},
onchange: function() {
Animal.set(document.getElementById('setAnimal').value);
},
update: function() {
document.getElementById('whatDoesThisAnimalDo').innerHTML = Animal.model.getAnimalAction();
}
};
Animal.start();
</script>
</body>
</html>
效果
image.png
第二個例子中，進行了簡單的mvc分層，看似代碼量比第一種多了許多，但是對于后期模塊的維護還是有很大的好處
