MVC、MVP 和 MVVM 對比筆記

MVC、MVP 和 MVVM

三個很是重要的架構模式

• MVC (Model(模型)-View(視圖)-Controller(控制器))
• MVP (Model(模型)-View(視圖)-Presenter(中介者))
• MVVM (Model(模型)-View(視圖)-ViewModel(視圖模型))

MVC 模式

MVC 是一個架構設計模式，它經過分離關注點的方式來支持改進應用組織方式。它促成了業務數據(Models)從用戶界面(Views)中分離出來，還有第三個組成部分(Controllers)負責管理傳統意義上的業務邏輯和用戶輸入。

Models

Models 管理一個業務應的數據。它們既與用戶界面無關也與表現層無關，相反的它們表明了一個業務應用所須要的形式惟一的數據。當一個 model 改變時(好比當它被更新時)，它一般會通知它的觀察者(好比咱們很快會介紹的 views)一個改變已經發生了，以便觀察者採起相應的反應。

Views

視圖是模型的可視化表示，提供了一個當前狀態的通過過濾的視圖。JavaScript 的視圖是關於構建和操做 DOM 元素的。

一個視圖一般是模型的觀察者，當模型改變的時候，視圖獲得通知，所以使得視圖能夠更新自身。

Controller

控制器是模型和視圖之間的中介，典型的職責是當用戶操做視圖的時候同步更新模型。

MVC 模式的優點

• 有利於對應用程序中功能進行更加簡單的模塊化。
• 總體的維護更加便利，控制器修改數據，數據驅動視圖。
• 模型與視圖解耦，編寫單元測試更方便。
• 底層模型和控制器的代碼解耦，可複用。
• 分離應用程序的體積和角色，容許負責核心邏輯的開發者和工做於用戶界面的開發者同時進行工做。

MVP 模式

模型-視圖-展現器(MVP)是 MVC 設計模式的一個衍生模式，它專一於提高展示邏輯。

Presenter

MVP 中的 P 表明展現器。它是一個包含視圖的用戶界面邏輯的組件。不像 MVC，來自視圖的調用被委派給了控制器，它是從視圖中解耦出來的，而且轉而經過一個接口來同它進行對話。

在 MVP 中，P 觀察着模型而且當模型發生改變的時候對視圖進行更新（被動視圖）。P 切實的將模型綁定到了視圖，這一責任在 MVC 中被控制器提早持有了。

MVC 模式的優劣

相較於 MVC 模式，MVP 的好處在於：

• 加強應用的可測試性
• 更加乾淨的隔離視圖和模型

劣勢在於：

• 缺少數據綁定支持

MVVM 模式

MVVM(Model View ViewModel)是一種基於 MVC 和 MVP 的架構模式，它試圖將用戶界面（UI）從業務邏輯和行爲中更加清晰地分離出來。爲了這個目的，不少例子使用聲明變量綁定來把 View 層的工做從其餘層分離出來。

][3]

ViewModel

視圖模型被認爲是一個專門進行數據轉換的控制器。它能夠把對象信息轉換到視圖信息，將命令從視圖攜帶到對象。

視圖模型位於咱們 UI 層後面層。它經過視圖發佈對象的公共數據，同時它做爲視圖源提供數據和方法。

視圖和視圖模型使用數據綁定和事件進行通訊。視圖模型不只僅發佈對象屬性，它還提供其餘的方法和特性，諸如驗證。

咱們的視圖處理本身的用戶接口事件，並會把相關事件映射到視圖模型。對象和它屬性與視圖模型是同步的，且經過雙向數據綁定進行更新。

觸發器（數據觸發器）容許咱們進一步在視圖狀態變化後改變咱們的對象屬性。

MVVM 模式優劣

優勢：

• MVVM 更加便於 UI 和驅動 UI 的構造塊,這兩部分的並行開發
• 抽象視圖使得背後所須要的業務邏輯(或者粘合劑)的代碼數量得以減小
• 視圖模型比事件驅動代碼更加容易進行單元測試
• 視圖模型(比視圖更加像是模型)可以在不用擔憂 UI 自動化和交互的前提下被測試

缺點：

• 對於更簡單的 UI 而言,MVVM 可能矯枉過正了
• 雖然數據綁定能夠是聲明性質的而且工做得很好，但在咱們簡單設置斷點的地方，它們比當務之急的代碼更加難於調試
• 在大型的應用程序中，將視圖模型的設計提高到獲取足夠所需數量的泛化，會變得更加的困難