Photo by Ekaterina Novitskaya on Unsplash

資源

• wikipedia-MVC
• wikipedia-MVVM
• MVVM — 架構篇：書讀得多，人自然就好看起來
• 【H5】浅谈MVVM优缺点
• MVC vs MVVM: Key Differences with Examples

主題

這篇文章會包含 MVC/MVVM的構成、原理、以及相關討論。

MVC

組成

M = Module : 資料(存取DB)

V = View : 頁面顯示

C = Controller : 操作邏輯

原理

最早在1978年提出的一種架構心法，希望解決大雜燴義大利麵程式撰寫方式，把程式拆分成介面、資料與邏輯三層。

運作方式是View(透過model)呈現資料給與user，user 透過controller觸發事件，Model接收事件調整DB，調整完畢後再通知(e.g. 觀察者模式)View更新頁面呈現。

/** wikipedia 上面的範例*/

/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model 负责存放资料 */
M.data = "hello world";

/** View 负责将资料输出给用户 */
V.render = (M) => { alert(M.data); }

/** Controller 作为连接 M 和 V 的桥梁 */
C.handleOnload = () => { V.render(M); }

/** 在网页读取的时候呼叫 Controller */
window.onload = C.handleOnload;

討論

• PROs

  • 幾乎是最知名的架構模式，應用在非常多的軟體開發上
  • 模組間可以拆開、替換(e.g. Model更換DB)而不影響程式整體
  • 易於換皮，快速套版予新客戶

• CONs

  • 原理複雜，開發前期需要花一些時間規劃
  • 模組間沒有定義明確，又要使人依據抽象觀念去建立明確的模組，對於初學者有一定學習門檻(或者容易誤用)
  • 商業邏輯可能會跟UI混雜

注: 因為處理最多業務，Controller 容易變得很肥

MVVM

組成

M = Module : 資料

VM = ViewModule : 中間層，轉換原始資料成顯示用資料

V = View : 頁面顯示

原理

在MVC後才推出的架構心法，在web前端很受歡迎，比起MVC更注重於使用者端的介面，把程式拆成三層:介面、資料、與轉換資料層。

運作方式是：

• view透過viewModel的資料渲染頁面
• 當user操作頁面時，view層接收事件給viewModel處理，viewModel呼叫model處理資料
• model處理完畢後，呼叫viewModel更新資料
• viewModel資料變動，觸發view更新畫面

最主要差異為用資料驅動view的更新，當資料異動時，去更新view

通常多用於與UI較相關的'前端'部分

討論

• PROs

  • 降低學習門檻，更好理解
  • 用binding方式連結view，使viewModel可以不用知道是哪個view，而view自行去更新
  • 商業邏輯不用相依於UI
  • 相對易於unit test, 重用component

• CONs

  • 大型的應用程式中，dataBinding會導致相當大的記憶體消耗
  • 無法簡單暴力的重用view，因為綁定viewModel緣故
  • 並無強硬規定 view 跟 viewModel的關係(ex: 單向影響or 雙向綁定)

結論

MVC發展較早，當時候view的部分還相對今天簡單，所以著墨的比較少，多注重在於"全端"商業邏輯與資料庫的分離上。而View發展越來複雜之後，為了更方便的管理"前端資料"與UI互動，以及複用component，才出現MVVM。

筆者覺得，拿這兩個pattern比較其實有點不妥&分類不同，因為要解決的問題其實不盡相同。