摘要：模式的目的是實(shí)現(xiàn)一種動態(tài)的程序設(shè)計，使后續(xù)對程序的修改和擴(kuò)展簡化，并且使程序某一部分的重復(fù)利用成為可能。它處理事件并作出響應(yīng)。事件包括用戶的行為和數(shù)據(jù)上的改變。此外，提高了應(yīng)用程序的靈活性和可配置性。

我的博客地址 →  MVC | The story of Captain，轉(zhuǎn)載請注明出處。

MVC模式 （Model–View–Controller）是軟件工程中的一種軟件架構(gòu)模式，把軟件系統(tǒng)分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。

MVC模式 的目的是實(shí)現(xiàn)一種動態(tài)的程序設(shè)計，使后續(xù)對程序的修改和擴(kuò)展簡化，并且使程序某一部分的 重復(fù)利用 成為可能。除此之外，此模式通過對復(fù)雜度的簡化，使程序結(jié)構(gòu)更加直觀。軟件系統(tǒng)通過對自身基本部分分離的同時也賦予了各個基本部分應(yīng)有的功能。

模型（Model）： 用于 封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù) 以及 對數(shù)據(jù)的處理方法。Model 有對數(shù)據(jù)直接訪問的權(quán)力，Model 不依賴 View 和 Controller，也就是說， Model 不關(guān)心它會被如何顯示或是如何被操作。

視圖（View）： 負(fù)責(zé)格式化顯示數(shù)據(jù)，Controller 會有一個機(jī)制將處理的結(jié)果 (可能是 Model, 集合或是狀態(tài)等) 交給 View，然后由 View 來決定怎么顯示。

控制器（Controller）：起到不同層面間的橋梁組織作用，用于控制應(yīng)用程序的流程。它處理事件并作出響應(yīng)。事件 包括用戶的行為和數(shù)據(jù) Model 上的改變。

表現(xiàn)與數(shù)據(jù)的分離：
View 表現(xiàn)層 負(fù)責(zé)數(shù)據(jù)的展示于數(shù)據(jù)的獲取，Model 數(shù)據(jù)層負(fù)責(zé)數(shù)據(jù)的儲存與數(shù)據(jù)的運(yùn)算，Controller 控制層負(fù)責(zé)處理信息，在表現(xiàn)層與數(shù)據(jù)層之間起傳輸作用，控制流程的走向。三個模塊進(jìn)行分離，各司其職、分而治之，模塊功能責(zé)任明確，有高度解耦之效，提高開發(fā)效率。

代碼的高重復(fù)利用率：
多個 View 可以使用一個 Model，多個 View 與 Model 之間可以使用一個 Controller 進(jìn)行通信，因?yàn)楣δ苣K的分離使得代碼重復(fù)利用率大大提升。

提升項(xiàng)目的生命周期：
因?yàn)楦叨鹊娜ヱ詈希诤笃诘木S護(hù)與升級上可以做到快速高效，模塊之間互不影響，延長了項(xiàng)目的生命周期。

應(yīng)用軟件的不同功能可以不止有一個 MVC，A 功能可以有 i 個 Model、j 個 View、k 個 Controller，B 功能同樣也是。站在不同功能的角度，每個功能都拆分為 MVC，站在整個軟件架構(gòu)角度也是拆分為 MVC，因此 MVC 更容易實(shí)現(xiàn)一個項(xiàng)目的管理劃分。

以下內(nèi)容摘自維基百科：

MVC 模式在概念上強(qiáng)調(diào) Model、View、Controller 的分離，各個模塊也遵循著由 Controller 負(fù)責(zé)處理消息、Model 負(fù)責(zé)處理數(shù)據(jù)、View 負(fù)責(zé)數(shù)據(jù)展示 的職責(zé)分離原則負(fù)責(zé)各自的功能。MVC 可以從根本上強(qiáng)制性地將數(shù)據(jù)層和表現(xiàn)層分開，盡管構(gòu)造 MVC 模式需要一些額外的工作，但是它帶給我們的好處是毋庸置疑的。
首先，多個 View 能共享一個 Model 。如今，同一個Web應(yīng)用程序會提供多種用戶界面，例如用戶希望既能夠通過瀏覽器來收發(fā)電子郵件，還希望通過手機(jī)來訪問電子郵箱，這就要求Web網(wǎng)站同時能提供Internet界面和WAP界面。在MVC設(shè)計模式中， Model 響應(yīng)用戶請求并返回響應(yīng)數(shù)據(jù)，View 負(fù)責(zé)格式化數(shù)據(jù)并把它們呈現(xiàn)給用戶，業(yè)務(wù)邏輯和表示層分離，同一個 Model 可以被不同的 View 重用，所以大大提高了代碼的可重用性。
其次，Controller 是自包含（self-contained）指高獨(dú)立內(nèi)聚的對象，與 Model 和 View 保持相對獨(dú)立，所以可以方便的改變應(yīng)用程序的數(shù)據(jù)層和業(yè)務(wù)規(guī)則。例如，把數(shù)據(jù)庫從MySQL移植到Oracle，或者把RDBMS數(shù)據(jù)源改變成LDAP數(shù)據(jù)源，只需改變 Model 即可。一旦正確地實(shí)現(xiàn)了控制器，不管數(shù)據(jù)來自數(shù)據(jù)庫還是LDAP服務(wù)器，View 都會正確地顯示它們。由于MVC模式的三個模塊相互獨(dú)立，改變其中一個不會影響其他兩個，所以依據(jù)這種設(shè)計思想能構(gòu)造良好的少互擾性的構(gòu)件。
此外，Controller 提高了應(yīng)用程序的靈活性和可配置性。Controller 可以用來連接不同的 Model 和 View 去完成用戶的需求，也可以構(gòu)造應(yīng)用程序提供強(qiáng)有力的手段。給定一些可重用的 Model 、 View 和Controller 可以根據(jù)用戶的需求選擇適當(dāng)?shù)?Model 進(jìn)行處理，然后選擇適當(dāng)?shù)牡?View 將處理結(jié)果顯示給用戶。
因?yàn)?MVC 模式強(qiáng)調(diào)職責(zé)分離，所以在發(fā)展 MVC 應(yīng)用時會產(chǎn)生很多文件，MVC 模式要求開發(fā)者以更高的構(gòu)架（Application Architecture）導(dǎo)向思維來進(jìn)一步思考應(yīng)用程序的設(shè)計，而非用大雜燴的方式開發(fā)撰寫應(yīng)用程序，對于應(yīng)用程序的生命周期以及后續(xù)的可擴(kuò)充與可維護(hù)性而言有相當(dāng)正面的幫助。另外，MVC 職責(zé)分離也帶來了一個現(xiàn)代軟件工程要求的重要特性：可測試性 (Testability)，MVC-based 的應(yīng)用程序在良好的職責(zé)分離的設(shè)計下，各個部分可進(jìn)行獨(dú)立的單元測試，有利于與企業(yè)內(nèi)的自動化測試、持續(xù)集成 (Continuous Integration) 與持續(xù)發(fā)行 (Continuous Delivery) 的流程集成，減少應(yīng)用程序改版部署所需的時間。
對于一個剛?cè)腴T的初學(xué)者來說，架構(gòu)導(dǎo)向的思考會有一定的門檻，需要較多的實(shí)現(xiàn)與練習(xí)才能具備相應(yīng)的能力，大多數(shù)的初學(xué)者還是較習(xí)慣于大雜燴式的程序撰寫，所以可能會對 MVC 模式抱持著排斥或厭惡的心態(tài)，然而 MVC (或是其他的Design Patterns) 都是有助于應(yīng)用程序長遠(yuǎn)的發(fā)展，雖然大雜燴式的程序也可以用來發(fā)展長生命周期的應(yīng)用程序，但是相較于 MVC，大雜燴式的程序在可擴(kuò)充性和可維護(hù)性 (尤其是可測試性) 上會遠(yuǎn)比 MVC 復(fù)雜很多，相反的，MVC 模式的應(yīng)用程序是在初始開發(fā)時期必須先思考并使用軟件架構(gòu)，使得開發(fā)時期會需要花較多心力，但是一旦應(yīng)用程序完成后，可擴(kuò)充性、可維護(hù)性和可測試性反而會因?yàn)?MVC 的特性而變得容易。
MVC 模式在已有眾多優(yōu)秀 Framework 的現(xiàn)代，早就已經(jīng)沒有不適合小型應(yīng)用的問題，小型的應(yīng)用還是可以由 MVC Framework 的應(yīng)用來獲取 MVC 的優(yōu)點(diǎn)，同時它也能作為未來小型應(yīng)用擴(kuò)充到大型應(yīng)用時的基礎(chǔ)。若一開始就想要做大型應(yīng)用，那么 MVC 模式的職責(zé)分離以及要求開發(fā)的架構(gòu)思考會更適合大型應(yīng)用的開發(fā)。

以下以 JavaScript 為例，演示 MVC 模型：

// View 負(fù)責(zé)展示數(shù)據(jù)
let View = {
    init: function () { 
        this.renderData = (msg) => alert(msg); 
    }
};
// Model 負(fù)責(zé)存儲數(shù)據(jù)
let Model = {
    init: funciton () {
        this.data = "Hello world!";
    }
};
// Controller 負(fù)責(zé) Model 和 View 之間的通信
let Controller = {
    init: function () {
        Model.init();
        View.init();
        this.handleMessage();
    },
    handleMessage: () => View.renderData(Model.data);
};
// 利用 Controller.init() 進(jìn)行整個功能的初始化，啟動整個功能
Controller.init();

在日常生活中也有很多能夠映射出 MVC 的例子，例如我們常用的電腦就可以拆分為 MVC：

Model：電腦的硬盤、CPU、顯卡、各個單片機(jī)等，負(fù)責(zé)數(shù)據(jù)的存儲與運(yùn)算。

View：顯示器，負(fù)責(zé)與用戶交互，展示數(shù)據(jù)信息。

Controller：鼠標(biāo)與鍵盤，負(fù)責(zé)傳達(dá)事件，用戶使用鍵盤輸入字符，使用鼠標(biāo)點(diǎn)擊屏幕，捕獲到該事件后，Model（處理器） 將 View（屏幕） 的數(shù)據(jù)進(jìn)行存儲并進(jìn)行運(yùn)算，最終結(jié)果又會展示到 View（屏幕）上。

每個模塊之間互不影響，鍵盤壞了可以換鍵盤（Controller），鼠標(biāo)壞了換鼠標(biāo)（Controller），顯示器壞了換顯示器（View），內(nèi)存不夠用了再加內(nèi)存條（Model）等等，充分體現(xiàn)了 MVC 的模塊化分離思想。

更多精彩內(nèi)容，請點(diǎn)擊 → The story of Captain