MVC V.S. MVVM 學習筆記


Posted by m6fish on 2021-02-27

Photo by Ekaterina Novitskaya on Unsplash

資源

主題

這篇文章會包含 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比較其實有點不妥&分類不同,因為要解決的問題其實不盡相同。


#pattern







Related Posts

筆記、[INT101] 求職入門

筆記、[INT101] 求職入門

Web開發學習筆記12 — 如何用JavaScript設置CSS樣式?、document.style與window.getComputedStyle()的差異

Web開發學習筆記12 — 如何用JavaScript設置CSS樣式?、document.style與window.getComputedStyle()的差異

#001_0612 始まる。

#001_0612 始まる。


Comments