MVC是一種設(shè)計(jì)模式，它將應(yīng)用劃分為3個(gè)部分：數(shù)據(jù)（模型）、展現(xiàn)層（視圖）和用戶交互（控制器）。其中：

M - MODEL（模型）

V - VIEW（視圖）

C - CONTROLLER（控制器）

一個(gè)事件的發(fā)生是這樣的過程：
　　1. 用戶和應(yīng)用產(chǎn)生交互。
　　2. 控制器的事件處理器被觸發(fā)。
　　3. 控制器從模型中請(qǐng)求數(shù)據(jù)，并將其交給視圖。
　　4. 視圖將數(shù)據(jù)呈現(xiàn)給用戶。
不用類庫或框架就可以實(shí)現(xiàn)這種MVC架構(gòu)模式。關(guān)鍵是要將MVC的每部分按照職責(zé)進(jìn)行劃分，將代碼清晰地分割為若干部分，并保持良好的解耦。這樣可以對(duì)每個(gè)部分進(jìn)行獨(dú)立開發(fā)、測試和維護(hù)。

M-模型

? 模型用來存放應(yīng)用的所有數(shù)據(jù)對(duì)象。比如，可能有一個(gè)User模型，用以存放用戶列表、他們的屬性及所有與模型有關(guān)的邏輯。模型不必知道視圖和控制器的邏輯。任何事件處理代碼、視圖模板，以及那些和模型無關(guān)的邏輯都應(yīng)當(dāng)隔離在模型之外。將模型的代碼和視圖的代碼混在一起，是違反MVC架構(gòu)原則的。模型是最應(yīng)該從應(yīng)用中解耦出來的部分。
當(dāng)控制器從服務(wù)器抓取數(shù)據(jù)或創(chuàng)建新的記錄時(shí)，它就將數(shù)據(jù)包裝成模型實(shí)例。也就是說，我們的數(shù)據(jù)是面向?qū)ο蟮?#xff0c;任何定義在這個(gè)數(shù)據(jù)模型上的函數(shù)或邏輯都可以直接被調(diào)用。

V-視圖

? 視圖層是呈現(xiàn)給用戶的，用戶與之產(chǎn)生交互。在JavaScript應(yīng)用中，視圖大都是由HTML、CSS、JavaScript模板組成的。除了模板中簡單的條件語句之外，視圖不應(yīng)當(dāng)包含任何其他邏輯。將邏輯混入視圖之中是編程的大忌，這并不是說MVC不允許包含視覺呈現(xiàn)相關(guān)的邏輯，只要這部分邏輯沒有定義在視圖之內(nèi)即可。我們將視覺呈現(xiàn)邏輯歸類為“視圖助手”（helper）：和視圖相關(guān)的獨(dú)立的小工具函數(shù)。

C-控制器

? 控制器是模型和視圖之間的紐帶。控制器從視圖獲取事件和輸入，對(duì)它們（很可能包含模型）進(jìn)行處理，并相應(yīng)地更新視圖。當(dāng)頁面加載時(shí)，控制器會(huì)給視圖添加事件監(jiān)聽，比如監(jiān)聽表單提交或按鈕點(diǎn)擊。然后，當(dāng)用戶和你的應(yīng)用產(chǎn)生交互時(shí)，控制器中的事件觸發(fā)器就開始工作了。

? 在網(wǎng)頁交互中，可以這樣理解：

1.用戶點(diǎn)擊了表格中的數(shù)據(jù)

2.觸發(fā)了點(diǎn)擊事件，數(shù)據(jù)變成可編輯的狀態(tài)（這個(gè)時(shí)候會(huì)出現(xiàn)一個(gè)文本框，但是里面還沒有數(shù)據(jù)）

3.第2步的點(diǎn)擊事件從存放數(shù)據(jù)的模型中把數(shù)據(jù)放到文本框中，形成一種數(shù)據(jù)由不可編輯到可編輯的一種效果

舉個(gè)例子：

<select id="drinkSelect"><option value="coffee">coffee</option><option value="milk">milk</option><option value="juice">juice</option> </select> <p id="theColorOfDrink"></p><script type="text/javascript"> document.getElementById("drinkSelect").onchange = function() {var color;var colorOfDrink = {"coffee":"brown","milk":"white","juice":"orange"};color = colorOfDrink[this.value];document.getElementById("theColorOfDrink").innerHTML = color; } </script>

上面程序會(huì)把選中的飲料的顏色顯示出來，如果用MVC，就是這個(gè)樣子：

<select id="drinkSelect"><option value="coffee">coffee</option><option value="milk">milk</option><option value="juice">juice</option> </select> <p id="theColorOfDrink"></p><script type="text/javascript"> //showDrinkColor is Controller var showDrinkColor = {start:function(){this.view.start();},set:function(drinkName){this.model.setDrink(drinkName);} }; //Model showDrinkColor.model = {colorOfDrink:{"coffee":"brown","milk":"white","juice":"orange"},selectedDrink:null,setDrink:function(drinkName){this.selectedDrink = this.colorOfDrink[this.selectedDrink]?drinkName:null;this.onchange();},onchange:function(){showDrinkColor.view.update();},getDrinkColor:function(){return this.selectedDrink?this.colorOfDrink[this.selectedDrink]:"white";} }; //View showDrinkColor.view = {start:function(){document.getElementById("drinkSelect").onchange = this.onchange;},onchange:function(){showDrinkColor.set(document.getElementById("drinkSelect").value);},update:function(){document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();} }; showDrinkColor.start(); </script>

進(jìn)行分層之后，各個(gè)層次的功能清晰：V層控制界面顯示，將界面與數(shù)據(jù)連接；M層存放數(shù)據(jù)，處理邏輯，C層用于連接M和V，但是，代碼變復(fù)雜了。的確，層次越多，需要做的工作也越多，這里需要處理各層的通信。所以，具體怎么設(shè)計(jì)，還是要分析場景，因地制宜。

轉(zhuǎn)載于:https://www.cnblogs.com/chris-oil/p/6146596.html

總結(jié)

以上是生活随笔為你收集整理的[转] 前端中的MVC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。