早期
特點
頁面由 JSP、PHP 等工程師在服務端生成
JSP 里揉雜大量業務代碼
瀏覽器負責展現，服務端給什么就展現什么，展現的控制在 Web Server 層
優點
簡單明快，本地起一個 Tomcat 或 Apache 就能開發，調試什么的都還好，只要業務不太復雜。
缺點
前端難以搭建本地環境
代碼重用性，擴展性，維護性很低
后端 MVC 開發
特點
- View：進行數據顯示。
- Model：用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。
- Controller：處理用戶交互，負責轉發請求，並對請求進行處理（向模型請求數據或發送數據）
服務器端的MVC流程：
客戶端發送請求 -> 服務器觸發Controller -> 服務器進行Model各種操作 -> 服務器根據Model數據渲染View -> 服務器回復請求，包含了整個View的html -> 客戶端重新渲染整個頁面，所有的css都又計算了一遍，所有的js都重新執行了一遍，所有的資源都重新請求了一遍（雖然可能已經cache了）
優點
代碼可維護性得到明顯好轉
線上模板的渲染還是由java來做的，形成的是帶有動態數據的html，比較有利於SEO
缺點
隨着不同終端的出現，前端的工作量變大。但是前端依然依賴着后端（都在一個項目中進行開發）
前后端職責依舊糾纏不清
前后端分離
特點
ajax帶來了Web開發革命性的變化。前端和應用服務器分離，前端和后端通過Ajax來通信。
前后端分工，前端使用ajax與后端數據交互，操作視圖，甚至控制部分路由，后端提供服務與數據。
優點
前后端的分工非常清晰
缺點
前端邏輯越來越重，越來越復雜，路由不好掌控。過分使用ajax不利於SEO。前端不坑重負
這與 JSP 時代區別不大。復雜度從服務端的 JSP 里移到了瀏覽器的 JavaScript，瀏覽器端變得很復雜
前端分層
特點
后端思想在前端進行應用
前端代碼變得也需要保存數據、處理數據、生成視圖（SPA），這導致了前端 MVC 框架的誕生
前端的MVC只是后端MVC中的View里面再去分出來的MVC。前端的MVC是為了解決復雜前端情況下模塊化 JS的問題。
一個事件的發生是這樣的過程：
1. 用戶和應用產生交互。
2. 控制器的事件處理器被觸發。
3. 控制器從模型中請求數據，並將其交給視圖。
4. 視圖將數據呈現給用戶。
模型
用來存放應用的所有數據對象。比如，可能有一個User模型，用以存放用戶列表、他們的屬性及所有與模型有關的邏輯；當控制器從服務器抓取數據或創建新的記錄時，它就將數據包裝成模型實例。也就是說，我們的數據是面向對象的，任何定義在這個數據模型上的函數或邏輯都可以直接被調用。
視圖
呈現給用戶的，用戶與之產生交互。在JavaScript應用中，視圖大都是由HTML、CSS、JavaScript模板組成的。除了模板中簡單的條件語句之外，視圖不應當包含任何其他邏輯。
將邏輯混入視圖之中是編程的大忌，這並不是說MVC不允許包含視覺呈現相關的邏輯，只要這部分邏輯沒有定義在視圖之內即可。我們將視覺呈現邏輯歸類為“視圖助手”（helper）：和視圖相關的獨立的小工具函數。
控制器
模型和視圖之間的紐帶。控制器從視圖獲取事件和輸入，對它們（很可能包含模型）進行處理，並相應地更新視圖。當頁面加載時，控制器會給視圖添加事件監聽，比如監聽表單提交或按鈕點擊。然后，當用戶和你的應用產生交互時，控制器中的事件觸發器就開始工作了。
后端MVC中的view是前端MCV的全部
前端MVC流程（前端其實大部分是MV+X，不一定有Controller):
客戶端根據用戶的行為修改客戶端Model -> 客戶端更新和該Model相關的View -> 客戶端Model發送sync請求到服務器，只包含改變了哪些數據 -> 服務器審核數據改動是否合法，只需回復是否修改成功 -> 客戶端收到成功，什么都不用做；不成功，則把剛才改的View改回來，然后通知用戶。（當然，也可以在客戶端的Model里面也加入審核機制，這樣對不合法數據的反應更快，但還是得保留服務器端的審核）
比較一下可以看到，前端MVC需要向服務器端傳遞和接收的數據量都少很多，而前端要做的等待和渲染工作也少了很多。換言之，會提供更快的交互反饋，也意味着更好的用戶體驗。同時，服務器端的負載也略有降低，因為基本上只需要在數據庫上提供一個RESTful API即可。優點
清晰的分工，可以讓開發並行
部署相對獨立，產品體驗可以快速改進。
缺點
開發者在代碼中大量調用相同的DOM API, 處理繁瑣，操作冗余，使得代碼難以維護。
MVVM 模式
特點
另一些框架提出 MVVM 模式，用 View Model 代替 Controller。
- Model
- View
- View-Model：簡化的 Controller，為 View 提供處理好的數據，不含其他邏輯。
本質：view 綁定 view-model，視圖與數據模型強耦合。數據的變化實時反映在 view 上，不需要手動處理。
優點
缺點
代碼不能復用。比如后端依舊需要對數據做各種校驗，校驗邏輯無法復用瀏覽器端的代碼。如果可以復用，那么后端的數據校驗可以相對簡單化。
全異步，對 SEO 不利。往往還需要服務端做同步渲染的降級方案。
性能並非最佳，特別是移動互聯網環境下。
參考：https://blog.csdn.net/u010924834/article/details/51025127
https://github.com/lifesinger/blog/issues/184