MVC 簡介
MVC(Model View Controller)，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟體設計典範，用一種業務邏輯、資料、界面顯示分離的方法組織代碼，将業務邏輯聚集到一個部件裡面，在改進和個性化定制界面及使用者互動的同時，不需要重新編寫業務邏輯。主要目的提高了軟體可維護性、可複用性，也因為把 模型-視訊-控制器，進行抽象分離開發，有助于管理複雜的應用程式，因為您可以在一個時間内專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注于視圖設計。同時也讓應用程式的測試更加容易。
- Model(模型)是應用程式中用于處理應用程式資料邏輯的部分。
- 通常模型對象負責在資料庫中存取資料，前端表現為和後端之間接口調用。
- View(視圖)是應用程式中處理資料顯示的部分。
- 通常視圖是依據模型資料建立的。
- Controller(控制器)是應用程式中處理使用者互動的部分。
- 通常控制器負責從視圖讀取資料，控制使用者輸入，并向模型發送資料。
我們以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 和架構之間的關系，并且知道他們的抽象層，分别負責什麼。