MVC 簡介

MVC（Model View Controller），是模型(model)－檢視(view)－控制器(controller)的縮寫，一種軟體設計典範，用一種業務邏輯、資料、介面顯示分離的方法組織程式碼，將業務邏輯聚集到一個部件裡面，在改進和個性化定製介面及使用者互動的同時，不需要重新編寫業務邏輯。主要目的提高了軟體可維護性、可複用性，也因為把 模型-視訊-控制器，進行抽象分離開發，有助於管理複雜的應用程式，因為您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注於檢視設計。同時也讓應用程式的測試更加容易。

• Model（模型）是應用程式中用於處理應用程式資料邏輯的部分。
  　　通常模型物件負責在資料庫中存取資料，前端表現為和後端之間介面呼叫。
• View（檢視）是應用程式中處理資料顯示的部分。
  　　通常檢視是依據模型資料建立的。
• Controller（控制器）是應用程式中處理使用者互動的部分。
  　　通常控制器負責從檢視讀取資料，控制使用者輸入，並向模型傳送資料。

MVC 關係圖

我們以web前端為例，來解釋一下 M-V-C 三者之間的關係，當用戶開啟一個網站後

• 載入靜態檔案 html、css、js
• View 渲染出第一次檢視，這時候是沒有資料的，View 呼叫 Model 方法
• Model 呼叫後端介面，獲取到初始化資料並快取在本地，通知 View 進行資料填充
• 使用者操作介面，發起事件 => Controller 接收到事件
  • 如果是切換頁面的，則進行檢視選擇，View 改變之後，發現需要有資料沒有，則呼叫 model 方法，進行重新獲取資料
  • 如果是資料增、刪、改，則呼叫 Model 方法進行修改，Model 通知檢視做相應調整

到這裡大家還是會感覺到比較抽象，沒有實際的感覺，下面我們用後端一個框架（php 中的 thinkPHP）前端中的 vue 來理解這三者之間的關係

MVC 從後端到前端簡單發展歷程

沒有前端工程師的年代

在很多年前，當時 js 剛起步，由於效能問題，前後端分離還沒開始等因素，但是網站開發僅僅是後端一個人的事，他們不寫介面，而是使用資料塞入html方式進行開發。

最早以 php 為例，是 php + html + css 開發模式，但是也同樣遇到 php 和 html 混編，導致程式碼可以維護性、複用性、開發的專注性、協作性，都非常低，為了改變這種現狀，出現了很多解決方案，而 thinkPHP 提供了 MVC 開發模式的解決方案，大大的改變了那種垃圾程式碼的現狀，讓開發者感受到了爽的感覺。

thinkPHP 中的 MVC

在 thinkPHP 中

• Model 就是作為，資料庫直接的增、刪、改、查，四個部分的，其它事情都不做，而且也只有 Model 可以直接和資料庫進行打交道
• Controller 比真實的控制器能力要強，它不僅僅承載使用者操作事件接受者、檢視選擇、資料庫狀態改變，它還把資料庫通知檢視渲染資料的能力交給了它
• View 根據 Controller 選擇的檢視，Controller 給與的資料進行檢視渲染，並把使用者操作的事件通知給 Controller 進行處理

thinkPHP MVC 關係圖

可以看出和 MVC 概念裡面不同的是，Model 沒有直接通知 View 改變的能力，全部需要經過 Controller 進行處理加工，然後放入到 View 進行渲染（也就是另一種開發模式 MVP）

前端工程師崛起

後來因為網際網路的發展，業務開發的業務複雜度日益增長，使用者對於也沒的體驗要求越來越高（體驗式經濟）純服務端渲染的形態體驗肯定不可能非常好，也由於 js 的快速發展（得益於 Google 的 v8 引擎）使得前端工程師崛起了。

js 的崛起使得，使用者對 web 互動操作的時候，可以立馬可以得到相應，且可以做動畫，而不是傻不拉幾的開始請求新的頁面，在哪等待瀏覽器的載入、

而後為了使得前端開發更便捷，dom操作更方便，也出現了 jq 為代表的很多框架，但是依然沒有從軟體設計模式上去解決 好維護、好協同、更專注的問題，這個階段主要是對於常用的操作進行封裝階段。

這個階段在前端抽象層來說，Model View Controller 三者相當耦合。

而後出現了 angular 改變了這種格局，angular 的 MVC 的抽象

• View 很清晰，就是 HTML + CSS
• Controller 裡面進行業務邏輯處理 & 後端資料、狀態的快取
• Model 比較不清晰，沒有明確說明，其實在 angular 中 Model 就是調介面的 ajax 但由於框架本身沒有明確的定義，所以有很多時候，開發者又耦合到 C 中

angular的出現簡直算是跨時代的產物，從此前端 jq 獨大的局面開始變化。angular 中除了使用了 MVC 開發模式外，還引入很多比較好的概念，比如：依賴注入、雙向資料繫結等，具體這邊不做說明，今天的主題不是說這個。

angular 雖然使用了 MVC ，但是對於很多東西的定義的不夠清晰，比如 Model，比如 Controller 中存在資料的快取 + 業務邏輯的處理，這時候我們中國的開發者就有重新定義了一下 MVC，也就是現在中國很流行的 vue

vue 中 的實際上有兩個 MVC，第一個 MVC，是相對於後端的，第二個MVC是前端內部的資料和檢視直接的MVC關係

首先我們來說第一個，相對於後端的MVC

• Model 是指調介面的 ajax，框架中沒有明確的定義，但是在樣例中卻表達的很清楚，Model 需要單獨建立資料夾，進行基於 promise 的 ajax 的封裝，Controller 中如果使用則進行呼叫
• Controller 負責業務邏輯，檢視選擇，資料初始化等（在這個抽象裡面 C 應該稱作 P，MVP 的 P 和 php 中的 C 很像，因為 Model 不直接和 View 進行打交道）
• View 就是 HTML + CSS 對於資料的渲染，事件鉤子呼叫 C

第二個，純前端內部的 MVC 抽象嗎，後來稱作 MVVM

• Model 就是 vue 中的 data ，data 變化 由 VM 引擎 自動同步至檢視
• Controller 就是 vue 中的 methods，負責業務邏輯處理、檢視選擇
• View 就是 HTML + CSS 對於檢視的渲染，時間鉤子呼叫 methods 函式（當然提供的其它功能這邊就不做介紹啦）

到這裡基本就把東西介紹完啦，感謝大家讀完，我沒有多寫細節上的介紹，也沒有對框架的作者背景，為啥會開發這個框架等方面進行介紹，只是簡單的發展歷程稍微介紹，更多的是讓大家理解 MVC MVP MVVM 和框架之間的關係，並且知道他們的抽象層，分別負責什麼。

需要下方評論或+V：

相關推薦