MVC、MVP和MVVM模式的基礎認識

MVC、MVP和MVVM的基礎認識和差別

MVC、MVP和MVVM都是一種設計思想，其核心宗旨就是讓代碼層次更清晰、降低耦合、提高複用性，各司其職。

其中MVC思想一般運用在全棧開發上，MVVM思想則一般運用在前端開發上。

因為隻是一種思想，你想在前端使用MVC也是可以的，總之你想在哪兒用上這些思想都行。

先大體上了解一下MVC和MVVM常見的使用場景。

下面為使用node.js搭建的服務和web頁面的整體架構圖：

一、MVC 設計模式

1. 定義

MVC 即：

Model(模型)

、

View(視圖)

、

Controller(控制器)

，也叫三層架構。

• Model：模型，及資料，一般為一個存取資料的對象。
• View：視圖，及頁面展示，負責将模型中的資料進行可視化展示。
• Controller： 控制器，及事件方法，負責控制模型和視圖，它控制資料流向模型對象，并在資料變化時更新視圖。

  

2. 特點

優點

• 耦合性低，視圖模型控制器三者互相分離，這樣就允許更改視圖層代碼而不用重新編譯模型和控制器代碼。
• 重用性高，多個視圖能共享一個模型。
• 可維護性高，分離視圖層和業務邏輯層也使得WEB應用更易于維護和修改。
• 前後端可以分工作業，提升開發效率。

缺點

• 不适合小型應用程式。
• 增加系統結構和實作的複雜性。
• 控制層和表現層有時會過于緊密，導緻沒有真正分離和重用。

二、MVP 設計模式

1. 定義

MVP 即：

Model(模型)

、

View(視圖)

、

Presenter(控制中心)

，一般在.net開發以及Android和iOS的原生開發中應用，MVP簡化了MVC中資料的交叉互動。

• Model：模型，及資料，一般為一個存取資料的對象。
• View：視圖，及頁面展示，負責将模型中的資料進行可視化展示。
• Presenter： 控制中心，model和view的傳遞都通過presenter來進行。

2. 特點

Presenter需要處理業務邏輯并且處理頁面參數擷取及顯示更新，隻适合小型項目，大項目會導緻Presenter非常臃腫。

mvp更像是mvc和mvvm中間的一個過渡思想，為了處理Presenter臃腫問題，于是有了VM的資料雙向綁定，處理了擷取和更新頁面資料的問題。

三、MVVM 設計模式

1. 定義

MVVM 即：

Model(模型)

、

View(視圖)

、

ViewModel(視圖-資料)

。

• Model：模型，它是與應用程式的業務邏輯相關的資料的封裝載體。
• View：視圖，專注于界面的顯示和渲染。
• ViewModel： 視圖-資料，它是View和Model的粘合體，負責View和Model的互動和協作。

MVVM 設計模式将view層的布局控件和model層的資料通過中間橋梁viewModel實作雙向綁定，而view和model沒有直接的互動，實作了view和model的解耦。

2. 特點

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），MVVM本質上是MVC 的改進版。

優點

• 資料雙向綁：減少基礎代碼，提高開發效率（由vm層提供，vm是MVVM的核心）。
• 低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
• 可重用性：你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多view重用這段視圖邏輯。
• 獨立開發：開發人員可以專注于業務邏輯和資料的開發（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xml代碼。
• 界面測試：界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。

缺點

• 資料雙向綁定增加了大量的記憶體開銷，增加了程式的編譯時間，項目越大記憶體開銷越大。
• 資料綁定使得 Bug 很難被調試。你看到界面異常了，有可能是你 View 的代碼有 Bug，也可能是 Model 的代碼有問題。