深入理解MVC在實際開發(fā)中和thinkPhp、angular、vue框架關系

深入理解MVC在實際開發(fā)中和thinkPhp、angular、vue框架關系

MVC簡介

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

Model〔模型〕是應用程序中用于處理應用程序數(shù)據(jù)邏輯的局部。

通常模型對象負責在數(shù)據(jù)庫中存取數(shù)據(jù)，前端表現(xiàn)為和后端之間接口調(diào)用。

View〔視圖〕是應用程序中處理數(shù)據(jù)顯示的局部。

通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)立的。

Controller〔控制器〕是應用程序中處理用戶交互的局部。

通常控制器負責從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。

我們以web前端為例，來解釋一下M-V-C三者之間的關系，當用戶翻開一個網(wǎng)站后

加載靜態(tài)文件html、css、js

View渲染出第一次視圖，這時候是沒有數(shù)據(jù)的，View調(diào)用Model辦法

Model調(diào)用后端接口，獲取到初始化數(shù)據(jù)并緩存在本地，通知View進行數(shù)據(jù)填充

用戶操作界面，發(fā)起事件=>Controller接收到事件

如果是切換頁面的，那么進行視圖選擇，View改變之后，發(fā)現(xiàn)需要有數(shù)據(jù)沒有，那么調(diào)用model辦法，進行重新獲取數(shù)據(jù)

如果是數(shù)據(jù)增、刪、改，那么調(diào)用Model辦法進行修改，Model通知視圖做相應調(diào)整

到這里大家還是會感覺到比擬抽象，沒有實際的感覺，下面我們用后端一個框架〔php中的thinkPHP〕前端中的vue來理解這三者之間的關系

MVC從后端到前端簡單開展歷程

沒有前端項目師的年代

在很多年前，當時js剛起步，由于性能問題，前后端別離還沒開始等因素，但是網(wǎng)站開發(fā)僅僅是后端一個人的事，他們不寫接口，而是使用數(shù)據(jù)塞入html方式進行開發(fā)。

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

thinkPHP中的MVC

在thinkPHP中

Model就是作為，數(shù)據(jù)庫直接的增、刪、改、查，四個局部的，其它事情都不做，而且也只有Model可以直接和數(shù)據(jù)庫進行打交道

Controller比真實的控制器能力要強，它不僅僅承載用戶操作事件接受者、視圖選擇、數(shù)據(jù)庫狀態(tài)改變，它還把數(shù)據(jù)庫通知視圖渲染數(shù)據(jù)的能力交給了它

View根據(jù)Controller選擇的視圖，Controller給與的數(shù)據(jù)進行視圖渲染，并把用戶操作的事件通知給Controller進行處理

可以看出和MVC概念里面不同的是，Model沒有直接通知View改變的能力，全部需要經(jīng)過Controller進行處理加工，然后放入到View進行渲染〔也就是另一種開發(fā)模式MVP〕

前端項目師崛起

后來因為互聯(lián)網(wǎng)的開展，業(yè)務開發(fā)的業(yè)務復雜度日益增長，用戶對于也沒的體驗要求越來越高〔體驗式經(jīng)濟〕純效勞端渲染的形態(tài)體驗肯定不可能非常好，也由于js的快速開展〔得益于Google的v8引擎〕使得前端項目師崛起了。

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

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

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

而后出現(xiàn)了angular改變了這種格局，angular的MVC的抽象

View很清晰，就是HTML+CSS

Controller里面進行業(yè)務邏輯處理&后端數(shù)據(jù)、狀態(tài)的緩存

Model比擬不清晰，沒有明確表明，其實在angular中Model就是調(diào)接口的ajax但由于框架本身沒有明確的定義，所以有很多時候，開發(fā)者又耦合到C中

angular的出現(xiàn)簡直算是跨時代的產(chǎn)物，從此前端jq獨大的局面開始變化。angular中除了使用了MVC開發(fā)模式外，還引入很多比擬好的概念，比方：依賴注入、雙向數(shù)據(jù)綁定等，具體這邊不做表明，今天的主題不是說這個。

angular雖然使用了MVC，但是對于很多東西的定義的不夠清晰，比方Model，比方Controller中存在數(shù)據(jù)的緩存+業(yè)務邏輯的處理，這時候我們中國的開發(fā)者就有重新定義了一下MVC，也就是現(xiàn)在中國很流行的vue

vue中的實際上有兩個MVC，第一個MVC，是相對于后端的，第二個MVC是前端內(nèi)部的數(shù)據(jù)和視圖直接的MVC關系

首先我們來說第一個，相對于后端的MVC

Model是指調(diào)接口的ajax，框架中沒有明確的定義，但是在樣例中卻敘述的很分明，Model需要獨自建立文件夾，進行基于promise的ajax的封裝，Controller中如果使用那么進行調(diào)用

Controller負責業(yè)務邏輯，視圖選擇，數(shù)據(jù)初始化等〔在這個抽象里面C應該稱作P，MVP的P和php中的C很像，因為Model不直接和View進行打交道〕

View就是HTML+CSS對于數(shù)據(jù)的渲染，事件鉤子調(diào)用C

第二個，純前端內(nèi)部的MVC抽象嗎，后來稱作MVVM

Model就是vue中的data，data變化由VM引擎自動同步至視圖

Controller就是vue中的methods，負責業(yè)務邏輯處理、視圖選擇

View就是HTML+CSS對于視圖的渲染，時間鉤子調(diào)用methods函數(shù)〔當然提供的其它功能