前端架構：MVC以及MVVM MVP介紹

時間 2019-11-09

原文原文鏈接

mvcphp

Model-View-Controller（模型-視圖-控制器）:用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯彙集到一個部件裏面，在改進和個性化定製界面及用戶交互的同時，不須要從新編寫業務邏輯.它強制性的使應用程序的輸入、處理和輸出分開。最典型的MVC就是JSP +servlet+javabean的模式。html

MVP java

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）。mvc

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.htmlasp.net

下面從一個簡單的頁面實例講講mvc模式的使用：jsp

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語句；

二、將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模型
}