MVC、MVP和MVVM

前言

在web1.0時代，並無前端的概念，要寫就就後端一塊兒寫了。先後端的代碼雜糅到一塊兒，好比php開發先後端，隨後衍生出MVC開發模式和框架。

web1.0時代

起初的MVC

目標

數據、視圖、以及業務邏輯控制分層；這樣就能夠把代碼切割成功能獨立的模塊。

優勢

使用了這種分層架構，實則清晰，代碼易維護。

實現了必定程度的先後端的分離，可是還不是很清晰

起初的MVC僅限於服務端（後端），在服務器端渲染。前端只完成了後端開發中的view層（只是寫模板文件，按照模版語法去寫動態內容）；
Model層提供數據查詢。
View層經過模板引擎來進行解析。解析成真正的HTML內容，瀏覽器去渲染

缺點

1. 前端頁面開發效率不高

前端以前都是以靜態頁面出現的；不多的js交互；將代碼交給後端程序員，後端在用模板語法對它進行動態化的改造，效率不高。

1. 先後端指責不清晰

通常都是一個程序員，先後端一塊兒抓，要會的也不少，前端的兼容性，後端的語法等等。

web2.0時代

谷歌的Gmai的出現，ajax技術開始風靡全球，從而先後端的職責更加清晰了。前端能夠經過Ajax與後端進行數據交互。

前端： 使用HTML、CSS、 Javascript（在Js中來撰寫Ajax的請求），前端經過Ajax請求來獲取數據，前端在進行交互和渲染。

後端：只須要把數據的基本結構返回給前端。

經過Ajax與後端服務器進行數據交互；前端只須要開發頁面內容，數據由後端提供；ajax可使頁面實現部分刷新，減小服務端負載和流量消耗。這是纔有了專職的前端來法工程師，同時前端的各類類庫就慢慢發展起來，好比早前的JQuery

優勢

流量消耗變小了，局部刷新；用戶體驗提高

缺點

開發模式承載了更復雜的業務需求，一旦應用規模增大，仍是會致使難以維護，由於Html、Css、 JS仍是雜糅在一塊兒。從而咱們須要設計模式和框架。
前端的MVC纔會隨之而來

MVC

MVC框架分爲，前端MVC和後端MVC；
前端的MVC與後端的類似，模擬這後端的架構；都具備View、Controller和Model
Model： 模型負責保存應用數據，與後臺數據進行同步
Controller：控制器負責業務邏輯，根據用戶行爲對Model數據進行修改
View： 負責視圖的展現，將model中的數據可視化出來

來個模型瞅瞅～～
真夠難畫的，一圖弄了10分鐘。也沒有多好看，應該是我不太用這個軟件的問題，若是有錯，那必定是個人錯。哈哈哈哈哈

視圖會經過事件去通知控制器，控制器去改模型，模型在嘗試用某種辦法通知視圖去更新。
理論上可行，可是每每在實際開發中，並不會這樣操做。由於開發過程並不靈活。好比： 一個小的事件操做，都必須通過這樣的一個流程，那麼開發就不便捷。

在實際中場景中，多是另外一種模式，這樣的：
來～～～畫圖，算了用網上找的把。

這個模式看上去是方便一些，backbone.js框架就是這種模式；
View能夠操做Model，Model改變也能夠View；從而控制器層就顯得很單薄，無關緊要；（控制器裏面就變成了簡單的數據堅監聽和調用）
缺點： 錯誤很難定位，數據混亂

`由於MVC框架出現的缺陷，從而有了MVVM框架。最先是AngularJS 用的MVVM框架模式。
MVP模式前端開發並不常見，可是在安卓原生開發中，開發者仍是會考慮到它。`

MVP

MVP和MVC很接近，剛纔看到了，可能會出現混亂的狀況，MVP就 作了一箇中間人，Presenter： 負責View和Model之間的數據流動，若是數據和視圖非要交互就必需要經過中間人。

Presenter負責和Model進行雙向交互，還有和View進行雙向交互。
若是業務複雜一點，Presenter的體積增大、臃腫，就很難維護；

MVVM

MVVM能夠分解成（Model-View-ViewModel）；ViewModel能夠理解爲在Presenter基礎上的進階。

ViewModel，主要是膠水層，核心思想是簡化
1.數據發生變化，如何知道變化，經過數據響應式的機制，用某種機制知道這個數據的變化，自動的去響應數據的變化，自動去作更新；內部知道了數據的變化，不須要用戶來操做。

1. 更新，之前作Dom操做，用JQ；數據變了要作Dom操做來更新（代碼多，效率不高）；因此有虛擬Dom的方式去作更新，根據精準的diff算法來作比對；達到高效的結果。

`經過響應式和虛擬Dom來作到數據驅動。
若是數據變，直接視圖更新；開發人員只須要修改數據，不用操做Dom；不須要操心其餘事情。`

視圖層如何改變數據層？
和以前同樣，仍是作數據監聽，模版引擎會有事件處理的語法，經過這些語法，輕易的寫出這些事件監聽的方式

優勢

ViewModel 經過實現一套數據響應式機制自動響應Model中數據變化
ViewModel 也有一套更新策略自動將數據轉化爲視圖更新
經過事件監聽響應View中用戶交互修改Model中數據
從而使開發者專一於業務邏輯，兼顧開發效率和可維護性

總結

三個框架，反映了web前端發展的進程，職責都是：

1. 代碼分層
2. 職責（先後端）劃分
3. 解決維護性問題
4. 解決 Model和View的耦合問題

MVC 早起專一應用在後端；前端早起的應用BackBone.js.

優勢：分層清晰（剛開始，算是比以前清晰了）
缺點： 數據流混亂，靈活性帶來的維護性問題

MVP 模式是由MVC的進化形式，Persenter做爲中間層負責MV通訊，解決了二者耦合關係，可是中間層過於臃腫會致使維護問題

MVVM模式在前端領域目前更普遍。不只解決了MV的耦合問題，解決了維護二者映射關係的大量繁雜代碼和Dom操做代碼；提升了開發效率。