前言
在web1.0時代，並沒有前端的概念，要寫就就後端一起寫了。前後端的代碼雜糅到一起，比如php開發前後端，隨後衍生出MVC開發模式和框架。
web1.0時代
起初的MVC
目標
數據、視圖、以及業務邏輯控制分層；這樣就可以把代碼切割成功能獨立的模塊。
優點
使用了這種分層架構，實則清晰，代碼易維護。
實現了一定程度的前後端的分離，但是還不是很清晰
起初的MVC僅限於服務端（後端），在服務器端渲染。前端只完成了後端開發中的view層（只是寫模板文件，按照模版語法去寫動態內容）；
Model層提供數據查詢。
View層通過模板引擎來進行解析。解析成真正的HTML內容，瀏覽器去渲染
缺點
- 前端頁面開發效率不高
前端之前都是以靜態頁面出現的；很少的js交互；將代碼交給後端程序員，後端在用模板語法對它進行動態化的改造，效率不高。
- 前後端指責不清晰
一般都是一個程序員，前後端一起抓，要會的也很多，前端的兼容性，後端的語法等等。
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.數據發生變化，如何知道變化，通過數據響應式的機制，用某種機制知道這個數據的變化，自動的去響應數據的變化，自動去做更新；內部知道了數據的變化，不需要用户來操作。
- 更新，以前做Dom操作，用JQ；數據變了要做Dom操作來更新（代碼多，效率不高）；所以有虛擬Dom的方式去做更新，根據精準的diff算法來做比對；達到高效的結果。
`通過響應式和虛擬Dom來做到數據驅動。
如果數據變，直接視圖更新；開發人員只需要修改數據，不用操作Dom；不需要操心其他事情。`
視圖層如何改變數據層？
和之前一樣，還是做數據監聽，模版引擎會有事件處理的語法，通過這些語法，輕易的寫出這些事件監聽的方式
優點
ViewModel 通過實現一套數據響應式機制自動響應Model中數據變化
ViewModel 也有一套更新策略自動將數據轉化為視圖更新
通過事件監聽響應View中用户交互修改Model中數據
從而使開發者專注於業務邏輯，兼顧開發效率和可維護性
總結
三個框架，反映了web前端發展的進程，職責都是：
- 代碼分層
- 職責（前後端）劃分
- 解決維護性問題
- 解決 Model和View的耦合問題
MVC 早起專注應用在後端；前端早起的應用BackBone.js.
優點：分層清晰（剛開始，算是比之前清晰了）
缺點： 數據流混亂，靈活性帶來的維護性問題
MVP模式是由MVC的進化形式，Persenter作為中間層負責MV通信，解決了兩者耦合關係，但是中間層過於臃腫會導致維護問題
MVVM模式在前端領域目前更廣泛。不僅解決了MV的耦合問題，解決了維護兩者映射關係的大量繁雜代碼和Dom操作代碼；提高了開發效率。
