深刻理解 MVC 在實際開發中和thinkPhp、angular、vue框架關係，理解什麼是 MVP MVVM

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：