天天看點

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM

MVC(Model-View-Controller)是最常見的軟體架構之一,業界有着廣泛應用。它本身很容易了解,但是要講清楚,它與衍生的 MVP 和 MVVM 架構的差別就不容易了。

一、MVC

MVC模式的意思是,軟體可以分成三個部分。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM
  • 視圖(View):使用者界面。
  • 控制器(Controller):業務邏輯
  • 模型(Model):資料儲存

各部分之間的通信方式如下。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM
  • View 傳送指令到 Controller
  • Controller 完成業務邏輯後,要求 Model 改變狀态
  • Model 将新的資料發送到 View,使用者得到回報

所有通信都是單向的。

二、互動模式

接受使用者指令時,MVC 可以分成兩種方式。一種是通過 View 接受指令,傳遞給 Controller。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM

另一種是直接通過controller接受指令。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM

三、執行個體:Backbone

實際項目往往采用更靈活的方式,以 Backbone.js 為例。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM
  1. 使用者可以向 View 發送指令(DOM 事件),再由 View 直接要求 Model 改變狀态。
  2. 使用者也可以直接向 Controller 發送指令(改變 URL 觸發 hashChange 事件),再由 Controller 發送給 View。
  3. Controller 非常薄,隻起到路由的作用,而 View 非常厚,業務邏輯都部署在 View。是以,Backbone 索性取消了 Controller,隻保留一個 Router(路由器) 。

四、MVP

MVP 模式将 Controller 改名為 Presenter,同時改變了通信方向。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM
  1. 各部分之間的通信,都是雙向的。
  2. View 與 Model 不發生聯系,都通過 Presenter 傳遞。
  3. View 非常薄,不部署任何業務邏輯,稱為”被動視圖”(Passive View),即沒有任何主動性,而 Presenter非常厚,所有邏輯都部署在那裡。

五、MVVM

MVVM 模式将 Presenter 改名為 ViewModel,基本上與 MVP 模式完全一緻。

MVC,MVP 和 MVVM 的圖示一、MVC二、互動模式三、執行個體:Backbone四、MVP五、MVVM

唯一的差別是,它采用雙向綁定(data-binding):View的變動,自動反映在 ViewModel,反之亦然。Angular 和 Ember 都采用這種模式。