VC 簡介

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

• Model（模型）是應用程序中用于處理應用程序數據邏輯的部分。
• 通常模型對象負責在數據庫中存取數據，前端表現為和后端之間接口調用。
• View（視圖）是應用程序中處理數據顯示的部分。
• 通常視圖是依據模型數據創建的。
• Controller（控制器）是應用程序中處理用戶交互的部分。
• 通?？刂破髫撠煆囊晥D讀取數據，控制用戶輸入，并向模型發送數據。

我們以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 進行處理

可以看出和 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 和框架之間的關系，并且知道他們的抽象層，分別負責什么。