MVC/MVP/MVVM 都是常見的軟體架構設計模式。說到區別,主要在於 C(Controller)、P(Presenter)、VM(View-Model)。相同點則是 MV(Model-View)。
Model
Model 層用於封裝和應用程式的業務邏輯相關的資料以及對資料的處理方法。
View
View 作為檢視層,主要負責資料的展示。
MVC
Controller
Controller 用來定義使用者介面對使用者輸入的響應方式,它連線 Model 和 View,用於控制應用程式的流程,處理使用者的行為和資料上的改變。當用戶對 View 進行操作時,在 Controller 中響應 View 的事件,並呼叫 Model 的介面對資料進行操作,一旦 Model 發生變化便通知相關檢視進行更新。
MVC 模式的業務邏輯主要集中在 Controller,而且 MVC 中 VIew 和 Controller 一般是一一對應的,捆綁起來表示一個元件。
範例: 我輸入一串文字觸發 view -> controller - > model 告知 這一串字串進行加工 ->返回 controller -> 更新 view
範例: 我輸入一串文字觸發 view -> controller - > model 告知 這一串字串進行加工 ->返回 controller -> 更新 view
MVP
MVP 是 MVC 模式的改良,Model 管理資料,View 負責檢視,Controller/Presenter 負責業務邏輯。
跟 MVC 不同,在 MVP 中嚴格禁止 View 和 Model 間的直接互動,必須通過 Presenter 來完成。
MVVM
MVVM 把 VIew 和 Model 的同步邏輯自動化了。以前 Presenter 負責的 View 和 Model 同步不在手動地進行操作,而是交給框架提供的資料繫結功能進行負責,只想要告訴它 View 顯示的資料對應的是 Model 哪一部分即可。
Vue 就是典型的 MVVM 模式框架。
Model
在 MVVM 中,我們可以把 Model 稱為資料層,因為它僅僅關注資料本身,不關心任何行為(格式化資料由 View 負責),這裡我們可以理解為一個類似 JSON 的資料物件。
View
MVVM 的 View 通過使用模板語法來宣告式的將資料渲染進 DOM,當 ViewModel 對 Model 進行更新的時候,會通過資料繫結更新到 View。
ViewModel
ViewModel 大致上就是 MVC 的 Controller 和 MVP 的 Presenter 了,也是整個模式的重點,業務邏輯也主要集中在這裡,其中的一大核心就是資料繫結。
與 MVP 不同的是,之前由 Presenter 負責的 View 和 Model 之間的資料同步交給了 ViewModel 中的資料繫結進行處理,當 Model 發生變化,ViewModel 就會自動更新;ViewModel 變化,Model 也會更新。
不同的 MVVM 框架中,實現資料繫結的技術有所不同。目前一些主流的前端框架實現資料繫結的方式大致有以下幾種:
- 資料劫持(Vue)
- 釋出—訂閱模式(Knockout、Backbone)
- 髒值檢查(Angular)
Vue 採用資料劫持 & 釋出—訂閱模式的方式,通過 ES5 提供的 Object.defineProperty() 方法來劫持(監控)各屬性的 getter、setter,並在資料發生變動時通知訂閱者,觸發相應的監聽回撥。
以vue 來講 view 和 viewmodel 資料是綁在一起的所以 動viewmodel 作一完成 view 也就完成更新了
以vue 來講 view 和 viewmodel 資料是綁在一起的所以 動viewmodel 作一完成 view 也就完成更新了
範例: 我輸入一串文字觸發 (view -> viewModel) 這時候要將 model 資料撈回來加工 -> 加工完畢 (viewModel -> view)