標籤：
MVC概論起初來之案頭應用開發。其實java的structs架構最能體現MVC架構：model模型是理解成伺服器端的模組程式；view為發送給客服端的內容；control為servlet程式控制跳轉和工作流程。
隨著前端Ajax興起、前端開發工作進一步劃分：js程式員和ue頁面製作、另外從整個前端項目的清晰明朗可以擴充性角度來看，MVC的應用也越來越必要，特別是對大的項目？
例如 需要給一個頁面上的button註冊一個onclick事件。
1、我們可以有如下最簡潔的寫法：（view和model control完全混合）
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" onclick="alert(this.value);"/>
</body>
</html>
說明：如上寫法的好處：簡單、直接；
嚴重的弊端：如果都是這樣寫法，頁面代碼很大的時候，修改js代碼還需要尋找整個頁面，導致整個頁面非常混亂。
批註：類似與 jsp中直接嵌入java片段語句。
2、將html和js代碼進行適當分離：（view和model control在同一頁面適當分離）
修改以上的寫法：
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" onclick="tipInfo(this);"/>
<script type="text/javascript">
function tipInfo(o){
alert(o.value);
}
</script>
</body>
</html>
這是將頁面上所有的js代碼操作放到<script></script>標籤中進行。使得js邏輯代碼相對集中，易於後期修改。
但是我們還是需要在html標籤中寫tipInfo(this)的js調用代碼。即html和js仍然有混合。
3、將html和js代碼徹底分離：（view和model control完全分離）
修改寫法：
視圖view的html代碼：
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" id="baidu"/>
</body>
<script src="example.js"></script>
</html>
分離出來的模型model和控制control的綜合example.js代碼：
var o = document.getElementById("baidu");
o.onclick = function(){
alert(this.value);
}
說明：button節點的操作和事件註冊等工作完全與html頁面分離。但是仔細想想，這還不是一個基於MVC的模式，control和model完全混合在一起。
批註：與jsp中的javabean實作類別似。
4、符合MVC架構的實現：（view、mode和control完全分離）
view視圖的view.html代碼：
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" id="baidu"/>
</body>
<script src="model.js"></script>
<script src="control.js"></script>
</html>
實現control控制功能的control.js代碼：
function G(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(G(id))
G(id)["on"+even] = function(){
fun(arr);
};
}
UI.register("baidu","click",tipInfo,[1,2]);
第一參數：為button節點id
第二參數：為需要註冊的觸發事件
第三參數：事件觸發函數
第四參數：需要傳遞的參數。
說明：control.js的代碼就是實現html頁面節時間點事件的註冊。使得節點的各種事件知道會觸發什麼函數去執行。
具體的函數操作，可以放到model模組中執行，在model中，才是真正處理邏輯操作。看model.js代碼：
function tipInfo(arr){
alert(arr[1]);
//實現其他組件功能，例如popup、form等。都屬於model模型
}
批註：類似jsp中的struts架構、struts標籤實現方式。
總結：
View：只管頁面的顯示和樣式展示
Control：進行頁面節時間點事件的註冊和控制，以及頁面載入效能的實現（例如方榮的硬碟緩衝）。
Model：真正的邏輯處理，例如jslib庫中的form、popup、drag等功能組件都屬於model模組。
前端Web開發MVC模式-入門樣本
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
