亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前端web開(kāi)發(fā)的MVC模式 - 從一個(gè)簡(jiǎn)單實(shí)例講起

來(lái)源： 冬日的蝸牛 發(fā)布時(shí)間：2018-11-22 14:44:48 閱讀量：1206

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

M - MODEL（模型）

V - VIEW（視圖）

C - CONTROLLER（控制器）

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

M-模型

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

V-視圖

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

C-控制器

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


例如 需要給一個(gè)頁(yè)面上的button注冊(cè)一個(gè)onclick事件。


         1、我們可以有如下最簡(jiǎn)潔的寫法：（view和model control完全混合）

  1. <HTML>  

  2.   

  3. <HEAD>  

  4.   

  5. <TITLE> example </TITLE>  

  6.   

  7. </HEAD>  

  8.   

  9. <BODY>  

  10.   

  11. <input type="button" value="baidu" onclick="alert(this.value);"/>  

  12.   

  13. </BODY>  

  14.   

  15. </HTML>  


         說(shuō)明：如上寫法的好處：簡(jiǎn)單、直接；嚴(yán)重的弊端：如果都是這樣寫法，頁(yè)面代碼很大的時(shí)候，修改js代碼還需要查找整個(gè)頁(yè)面，導(dǎo)致整個(gè)頁(yè)面非?；靵y。批注：類似與 jsp中直接嵌入java片段語(yǔ)句。


         2、將html和js代碼進(jìn)行適當(dāng)分離：（view和model control在同一頁(yè)面適當(dāng)分離）

         修改以上的寫法：

  1. <HTML>  

  2.   

  3. <HEAD>  

  4.   

  5. <TITLE> example </TITLE>  

  6.   

  7. </HEAD>  

  8.   

  9. <BODY>  

  10.   

  11. <input type="button" value="baidu" onclick="tipInfo(this);"/>  

  12.   

  13. <SCRIPT LANGUAGE="JavaScript">  

  14.   

  15. <!--  

  16.   

  17.     function tipInfo(o){  

  18.   

  19.            alert(o.value);  

  20.   

  21.     }  

  22.   

  23. //-->  

  24.   

  25. </SCRIPT>  

  26.   

  27. </BODY>  

  28.   

  29. </HTML>  

         這是將頁(yè)面上所有的js代碼操作放到<script></script>標(biāo)簽中進(jìn)行。使得js邏輯代碼相對(duì)集中，易于后期修改。

         但是我們還是需要在html標(biāo)簽中寫tipInfo(this)的js調(diào)用代碼。即html和js仍然有混合。


         3、將html和js代碼徹底分離：（view和model control完全分離）

         修改寫法：

         視圖view的html代碼：

  1. <HTML>  

  2.   

  3. <HEAD>  

  4.   

  5. <TITLE> example </TITLE>  

  6.   

  7. </HEAD>  

  8.   

  9. <BODY>  

  10.   

  11. <input type="button" value="baidu" id="baidu"/>  

  12.   

  13. </BODY>  

  14.   

  15. <script src="example.js"></script>  

  16.   

  17. </HTML>  

         分離出來(lái)的模型model和控制control的綜合example.js代碼：

   

[javascript] view plaincopy

  1. var o = document.getElementById("baidu");  

  2.   

  3.     o.onclick = function(){  

  4.   

  5.            alert(this.value);  

  6.   

  7.     }  

         說(shuō)明：button節(jié)點(diǎn)的操作和事件注冊(cè)等工作完全與html頁(yè)面分離。但是仔細(xì)想想，這還不是一個(gè)基于MVC的模式，control和model完全混合在一起。

         批注：與jsp中的javabean實(shí)現(xiàn)類似。


         4、符合MVC框架的實(shí)現(xiàn)：（view、mode和control完全分離）

         View視圖的view.html代碼：

[javascript] view plaincopy

  1. <HTML>  

  2.   

  3. <HEAD>  

  4.   

  5. <TITLE> example </TITLE>  

  6.   

  7. </HEAD>  

  8.   

  9. <BODY>  

  10.   

  11. <input type="button" value="baidu" id="baidu"/>  

  12.   

  13. </BODY>  

  14.   

  15.     <script src="model.js"></script>  

  16.   

  17. <script src="control.js"></script>  

  18.   

  19. </HTML>  


         實(shí)現(xiàn)control控制功能的control.js代碼：

  

[javascript] view plaincopy

  1. function G(id){  

  2.   

  3.           return document.getElementById(id);  

  4.   

  5.    }  

  6.   

  7.    var UI = new Object();  

  8.   

  9.    UI.register = function(id,even,fun,arr){  

  10.   

  11.           if(G(id)) G(id)["on"+even] = function(){ fun(arr);};  

  12.   

  13.    }  

  14.   

  15.    UI.register("baidu","click",tipInfo,[1,2]);  

    /*

           第一參數(shù)：為button節(jié)點(diǎn)id

           第二參數(shù)：為需要注冊(cè)的觸發(fā)事件

           第三參數(shù)：事件觸發(fā)函數(shù)

           第四參數(shù)：需要傳遞的參數(shù)。

*/

         說(shuō)明：control.js的代碼就是實(shí)現(xiàn)html頁(yè)面節(jié)點(diǎn)事件的注冊(cè)。使得節(jié)點(diǎn)的各種事件知道會(huì)觸發(fā)什么函數(shù)去執(zhí)行。

         具體的函數(shù)操作，可以放到model模塊中執(zhí)行，在model中，才是真正處理邏輯操作。看model.js代碼：

   

[javascript] view plaincopy

  1. function tipInfo(arr){  

  2.   

  3.            alert(arr[1]);  

  4.   

  5.            //實(shí)現(xiàn)其他組件功能，例如popup、form等。都屬于model模型  

  6.   

  7.     }  

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


總結(jié)：

         View：只管頁(yè)面的顯示和樣式展示

         Control：進(jìn)行頁(yè)面節(jié)點(diǎn)事件的注冊(cè)和控制，以及頁(yè)面加載性能的實(shí)現(xiàn)（例如方榮的硬盤緩存）。

         Model：真正的邏輯處理，例如jslib庫(kù)中的form、popup、drag等功能組件都屬于model模塊。


標(biāo)簽： PHP
分享：
評(píng)論：
你還沒(méi)有登錄，請(qǐng)先

熱門文章

    推薦文章