本篇是《前端架構師之吾見》的第三篇。前兩篇主要從軟技能、設計原則等宏觀層面進行前端架構講解，自本篇開始，将開啟“幹貨”模式。MVC 及其演化模式提供了一種建構使用者界面（User Interface）的結構，并涉及對不同職責的分離，在 Web 程式中得到了廣泛應用。前端主流的 Reactjs、Vuejs 等架構庫中也有 MVC 模式應用的身影。可以毫不誇張地說，前端工程師的日常工作亦潛移默化地同其打交道。掌握 MVC 及其演化模式，有助于深入了解 Web 應用程式内在互動過程，進而提升 Web 應用程式的互動體驗。下面将着重介紹 MVC、MVP 及 MVVM。
MVC 模式
MVC 模式
| Model（模型層） | 管理應用程式資料和狀态，從 Controller 端接收指令來檢索和更新資料，同時能夠更新應用程式的狀态。 |
| View（表現層） | 負責應用程式的展現，是應用程式中對使用者可見的部分，根據從 Controller 接收到的資訊在界面中展示資料。同時，View 也可根據 Model 提供的狀态更新通知，自行更新。View 會将使用者操作資訊發送給 Controller。 |
| Controller（控制層） | 是 Model 和 View 之間的中介，Controller 執行程式的邏輯來選擇合适的 View，并向 View 發送它用來呈現使用者界面所需的資訊。同時，Controller 能夠響應 View 發送過來的使用者動作，還會根據使用者動作去更新 Model。 |
MVP 模式
MVP 模式
| Model（模型層） | 代表業務模型和資料，與資料庫直接互動以檢索和更新資料。Model 接收來自 Presenter 的更新消息，并将狀态更改上報回 Presenter。Model 隻與 Presenter 進行互動。 |
| View（表現層） | 負責顯示使用者界面和資料。每個 View 都實作了 View interface 接口。當使用者與 View 互動時， View 會發送消息給 Presenter 讓其響應事件和資料。Presenter 通過 View interface 與 View 松耦合。 |
| Presenter（表示層） | Model 和 View 之間的中介。Presenter 會和它倆發生互動。每個 Presenter 通常隻處理一個 View。每個 View 都有一個 Presenter 并會把使用者行為通知給自身的 Presenter。Presenter 負責更新 Model 并從 Model 中接收狀态變更。Presenter 封裝了展現邏輯，将從 Model 中接收到的資料格式化以供 View 進行顯示。 |
MVVM 模式
MVVM 模式
| Model（模型層） | 代表了業務領域的對象和資料。Model 使用資料庫來檢索和更新資料。在 MVVM 程式中，可直接對 Model 的屬性進行綁定。Model 通常會發出屬性變更的通知。 |
| View（表現層） | 負責使用者界面，是主動的，是知曉 Model 和 ViewModel 的。View 通過資料綁定或指令等機制将使用者動作傳遞給 ViewModel。 |
| ViewModel（視圖模型層） | 是 Model 和 View 之間的中介，為 View 提供顯示和操控所用到的資料，還負責與 View 和 Model 通信的互動邏輯。ViewModel 必須具備處理使用者操作和處理 View 發送的資料輸入的能力。同時，ViewModel 還包含了在不同 View 之間跳轉的導航邏輯。 |