【51CTO.com快譯】 MVC(模型-視圖-控制器)

MVC代表了一種軟件框架的設計模式。該框架的主要功能是：通過允許多名開發(fā)人員共同在一個項目上開展工作，以分離應用程序的功能、邏輯和接口，進而促進有組織的編程實現(xiàn)方法。下面，讓我們從Web開發(fā)人員的角度來解讀MVC的不同組件。

[[269411]]

首先，讓我們來看看有哪些使用到了MVC的流行Web框架：

• Ruby on Rails (Ruby)
• Express (JS)
• Backbone (JS)
• Angular (JS)
• Laravel (PHP)
• Zend (PHP)
• Codeigniter (PHP)
• Django (Python)
• Flask (Python)

接著，我們重點來討論Ruby on Rails和Codeigniter(PHP)。這兩個框架在它們的文件結構中有著不同的文件夾，也就是所謂的模型、視圖和控制器。雖然類似并借用了Django for Python的某些概念，但是這兩個框架實際上并沒有嚴格的文件夾結構。

此類框架的另一個特點是：同一個框架可能會將其應用程序放置在控制器中，然后將另一部分放置在模型中。因此不少Web開發(fā)人員認為MVC架構略顯混亂，甚至毫無固定章法可循。不過我個人認為：用戶能夠采用多種方式來創(chuàng)建MVC架構，正是其亮點與靈活性所在。

下面，我們正式從Web開發(fā)者的角度為大家解讀MVC的三個組件：模型、視圖和控制器。

模型

由于模型部件負責獲取和操作數(shù)據(jù)，因此它一般屬于應用程序的“大腦”。通常情況下，它與MySQL之類的關系型數(shù)據(jù)庫，以及MongoDB之類的NoSQL數(shù)據(jù)庫進行交互。不過這并不重要，在支持多種數(shù)據(jù)庫的不同框架中，模型的代碼能夠一直保持相同。

在實際應用中，我們只需要修改數(shù)據(jù)庫的驅動程序便可，而不必知曉與之協(xié)作的數(shù)據(jù)庫類型。例如：您完全可以讓自己的模型與JSON文件進行交互，并從中提取數(shù)據(jù)。而這個簡單的JSON文件甚至都不算是一個數(shù)據(jù)庫。

模型不但能夠負責諸如SELECT、INSERT、UPDATE和DELETE之類的查詢操作，還能夠與控制器進行通信。在大多數(shù)情況下，控制器可以通過模型來請求數(shù)據(jù)，并且由控制器來更新視圖。不過，通過某些框架，模型也可以直接去更新視圖。當然，這顯然增加了MVC的復雜性?？梢姡煌目蚣苡兄厝徊煌膶崿F(xiàn)方式。

視圖

就視圖而言，顧名思義它與應用程序的實際視圖有關，也就是我們常說的用戶界面。它負責面向用戶的顯示，以及讓用戶如何與應用程序進行交互。

因此，視圖通常包括：HTML、CSS、以及來自控制器的各種動態(tài)值。在應用運行時，控制器會與視圖、以及模型保持通信。同樣，根據(jù)您所選用的框架不同，具體的模板引擎也可能會有所差異。

此處的“模板引擎”是指：某個允許動態(tài)數(shù)據(jù)的工具。如果我們使用的是直接的HTML，那么就不可能有各種輸出變量，也無法選用if語句之類的邏輯。但是如果使用了模板引擎，那么我們就可以在視圖中、或者是在模板中正確地處理此類動態(tài)變量了。

因此，模板引擎的典型示例包括：Handlebars.js(https://handlebarsjs.com/)與Dust.js(https://www.dustjs.com/)。對于Ruby on Rails而言，我們可以使用嵌入式的ERB(https://ruby-doc.org/stdlib/libdoc/erb/rdoc/ERB.html)。而對于Ruby語言，我們也可以使用Haml(http://haml.info/)和針對Python的Flask(http://flask.pocoo.org/)。當然，我們還有其他的選項，比如說JavaScript。

控制器

***是控制器，它與用戶的輸入有關。例如：用戶在訪問頁面時點擊某個鏈接，觸發(fā)了一個GET請求;或者是以提交表單的形式，發(fā)送一個POST請求;當然我們也可以發(fā)出刪除、或提出更新等類型的請求。由于這些動作無法直接從瀏覽器中生成，因此您只能自行產生一個GET或POST，或者是通過內置在某個框架中的HTTP客戶端，來達到該目的。

在此，控制器充當?shù)氖悄Ｐ团c視圖之間的中間人角色?？刂破餍枰ㄟ^模型從數(shù)據(jù)庫中獲取某些數(shù)據(jù)，而控制器在獲取到相關數(shù)據(jù)之后，通過加載視圖的方式，將該數(shù)據(jù)傳遞給它。接著，模板引擎接管后續(xù)的“任務”，實現(xiàn)輸出變量之類的邏輯事務。

當然，控制器也可以在不傳遞數(shù)據(jù)的情況下加載某個視圖。而此處需要有一個帶有HTML和CSS的純Web頁面，就不是真實的模板邏輯。

下面是一個非常簡單的例子(或稱流程圖)。

如上圖所示，用戶可以通過瀏覽器看到應用程序的視圖。

首先，應用程序可以將他們的輸入作為某種請求提交給所謂的“路由器”。而且這些請求正是用戶通過點擊某個鏈接，所產生并觸發(fā)的某條路徑需求。

接著，“路由器”開始調用基于該路由的特定控制器方法。因此，如果需要使用或獲取一些數(shù)據(jù)的話，控制器需要與模型進行交互，而該模型也會與后臺的數(shù)據(jù)庫進行交互。

然后，一旦控制器獲得了返回數(shù)據(jù)，它就需要加載一個視圖。而具體的操作過程是：它將數(shù)據(jù)發(fā)送到視圖，并由模板引擎來進行處理。

***，一旦后臺操作完成，控制器將把視圖發(fā)送回瀏覽器，以供用戶查看。

結論

綜上所述，我們可以這樣來理解MVC架構：模型是某種數(shù)據(jù)結構，控制器是流量控制器的一種形式，而視圖則是用戶看到并與之交互的部分。大家各司其職，讓程序分工明確、條理清楚。

原文標題：An Introduction to MVC Architecture: A Web Developer's Point of View，作者：Dipen Patel

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】