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" οnclick="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" οnclick="tipInfo(this);"/>
<SCRIPT LANGUAGE="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模塊。
一些隨想，望大家提建議！