隨着前端Ajax興起、前端開發工做進一步劃分：js開發和ui頁面製做、另外從整個前端項目的清晰明朗以可擴展性角度來看，MVC的應用也愈來愈必要，特別是對大的項目。html
例如 須要給一個頁面上的button註冊一個onclick事件。前端
一、咱們能夠有以下最簡潔的寫法：（view和model control徹底混合）框架
<HTML>函數
<HEAD>性能
<TITLE> example </TITLE>ui
</HEAD>this
<BODY>spa
<input type="button" value="baidu" onclick="alert(this.value);"/>orm
</BODY>htm
</HTML>
說明：如上寫法的好處：簡單、直接；嚴重的弊端：若是都是這樣寫法，頁面代碼很大的時候，修改js代碼還須要查找整個頁面，致使整個頁面很是混亂。
二、將html和js代碼進行適當分離：（view和model control在同一頁面適當分離）
修改以上的寫法：
<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
<input type="button" value="baidu" onclick="tipInfo(this);"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function tipInfo(obj){
alert(obj.value);
}
//-->
</SCRIPT>
</BODY>
</HTML>
這是將頁面上全部的js代碼操做放到<script></script>標籤中進行。使得js邏輯代碼相對集中，易於後期修改。
可是咱們仍是須要在html標籤中寫tipInfo(this)的js調用代碼。即html和js仍然有混合。
三、將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 obj = document.getElementById("baidu");
obj.onclick = function(){
alert(this.value);
}
說明：button節點的操做和事件註冊等工做徹底與html頁面分離。可是仔細想一想，這還不是一個基於MVC的模式，control和model徹底混合在一塊兒。
四、符合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 Get(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(Get(id)){
Get(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模型
}
總結：
View：只管頁面的顯示和樣式展現
Control：進行頁面節點事件的註冊和控制，以及頁面加載性能的實現。
Model：真正的邏輯處理，