重新認識 MVC

Posted on In

MVC 是什麼

MVC 是一種架構設計模式或是程式組織形式。我接觸 mvc 是在學 ruby on rails 的時候，這是讓我首次感受到 MVC 是什麼。

在前端某個情境：用戶點擊 submit 會觸發 controller 一個事件，然後 controller 會調用 model 的操作。最後 controller 就會通知 view

簡單來說 mvc 會分成三層

  • Model - 數據模型層和數據相關操作(crud)。數據變化是由 controller 來進行控制。
  • View - View 只負責看得見東西，單純將數據輸出在畫面和使用者交互層。 View 向 model 註冊，view 會觀察 model 是否有數據更新 (觀察者模式)
  • Controller - 把所有東西組合起來，可以簡單理解成中介人，當使用者和 view 進行交互時，會觸發事件處理 (業務邏輯層)，處理操作以及作出對 model 進行改變。

爭議性

感覺前端和後端 MVC 有所不同。
我當初接觸 MVC 是 雙向的，M 和 V 是不能通訊。
V 發出請求時，在 C 裡找到匹配條件，然後對 M 改變狀態，M 就會返回給 C。最後 C 負責渲染數據給 V。
但不知是不是有前後端差異性，但本質上是沒有太大變化。因為 MVC 分別有各自職責，只不過通訊方式或許有所不同。

前端

  • 單向 - V -> C -> M -> V

后端

  • 雙向 - V -> C -> M -> C -> V

思路 (題外)

留言思路 -> 從 MVC角度去思考。

第一步

  • 一個最簡單留言功能有包含哪些：新增，修改，刪除，獲取 (CRUD)
  • 簡單 UI 呈現會有哪些：form 表單，顯示所有留言訊息。

第二步

  • Model: 數據操作有 getAll, create, edit/update, delete
  • View: view 基本 UI 呈現
  • Controller: 控制器用來處理邏輯這一塊。下面會簡單新增留言：
    1. 用戶和 V 進行交互。
    2. C 就會監聽，V 一旦事件 (submit) 被觸發，馬上通知 C
    3. C 會進行處理，調用 M 數據操作 save/create。
    4. M 會對 server 發出 request，等待 response。
    5. M response 給 C 進行處理。
    6. 最後 C 會給 V 相關數據更新或 UI 更新。

JS 實現 MVC

最近我看了一篇關於 js mvc 實現文章，向他學習，參考來源。
可以點我

總結

MV* 概念基本上是把它們區分獨立，每個的它都有自己職責 (架構型)。我們喜歡把複雜事情，抽象化。

參考