mvc
Model-View-Controller（模型-視圖-控制器）:用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時，不需要重新編寫業務邏輯.它強制性的使應用程序的輸入、處理和輸出分開。最典型的MVC就是JSP +servlet+javabean的模式。
MVP
Model-View-Presenter:是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數據，View負 責顯示。作為一種新的模式，MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通信是通過Presenter (MVC中的Controller)來進行的，所有的交互都發生在Presenter內部，而在MVC中View會從直接Model中讀取數據而不是通過 Controller。
MVVM
Model-View-ViewModel:和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）；在概念上是真正將頁面與數據邏輯分離的模式，在開發方式上，它是真正將前台代碼開發者（JS+HTML）與后台代碼開發者分離的模式（asp,asp.net,php,jsp）。
1. 低耦合。視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
2. 可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
3. 獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計，使用Expression Blend可以很容易設計界面並生成xaml代碼。
4. 可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
更多關於架構介紹：http://www.cnblogs.com/lori/p/3552571.html
下面從一個簡單的頁面實例講講mvc模式的使用：
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、將js代碼與html代碼適當的分離：（view和model，control在同一頁面適當分離）
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" onclick="tipInfo(this);"/>
<script language="JavaScript">
function tipInfo(o){
alert(o.value);
}
</script>
</body>
</html>
這是將js中的操作放到script腳本標簽中，使得js邏輯代碼相對集中，易於后期修改。但是我們還是會在html頁面混着有對js函數的調用，依舊沒有分離；
3.講html和js徹底分離（view 和 model control完全分離）：
<html> <head> <title> example </title> </head> <body> <input type="button" value="baidu"/> <script src="example.js"></script> </body> </html>
//分離出來的模型model和控制control的綜合example.js代碼：
var o = document.getElementById("baidu");
o.onclick = function(){ alert(this.value); }
此時button節點的操作和時間注冊等工作已經完全與html頁面分離，但是control和model還混合在一起，所以還不是一個基於mvc的模式；類似於jsp中的javabean實現類似；
4.符合mvc的框架：（model，view，control完全分離）
<html> <head> <title> example </title> </head> <body> <input type="button" value="baidu"/> <script src="model.js"></script> <script src="control.js"></script> </body> </html> //control.js function getObj(id){ return document.getElementById(id); } var ui=new Object(); ui.register=funtion(id,even,fun,arr){ if(getObj(id)){ getObj(id)["on"+even]=funtcion(){ 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模塊。