模型、視圖與控制器（MVC）——輸入、更新、呈現 · 心智圖
模型、視圖與控制器（MVC）——輸入、更新、呈現. 可編輯嘅心智圖，以彩色分支、子題目同曲線連結呈現概念。 曲線表示關聯；只有方向重要時先用箭嘴。
MVC 用一條規則把應用程式分成三部分：控制器處理輸入，模型擁有狀態與規則，視圖負責呈現模型——而視圖與控制器都不會直接觸碰狀態。
模型、視圖與控制器（MVC）——輸入、更新、呈現 · 心智圖
The interactive MindMap canvas for this explanation — every lane, row and arrow above is a real QueryChart diagram you can open and edit.
點樣閱讀呢張心智圖
- 由中央主題開始，沿住彩色分支探索相關概念。
- 曲線表示關聯；只有方向重要時先用箭嘴。
User input
呢個分支匯集 “User interacts with the interface”.
Controller
呢個分支匯集 “The controller is the traffic cop: it reads the user's action, decides what it means and tells the model what to change. It holds no state itself.”, “Controller updates the model”.
Model
呢個分支匯集 “The model is the single source of truth — data and the rules that govern it. Both the controller and the view read from it, which is why they never fight over state.”, “Model notifies observers of the change”.
View
呢個分支匯集 “The view is a projection of the model: it never changes data directly, it only asks the model and displays what it returns.”, “User sees the updated interface”.
跨分支關聯
控制器處理輸入；模型擁有狀態；視圖負責呈現——三項職責，三條泳道。
視圖與控制器都不會寫入資料；所有改動都流經模型。
模型是通知觀察者，而不是命令視圖，所以一個模型可以驅動許多個視圖。
這種分離令每一部分都可以單獨測試——這正是這個模式最初的回報。
MVC 是許多現代模式的祖先（MVVM、MVP、Redux 式的 store），它們全部都保留了同一種分離。
Key relationships and takeaways
- 控制器處理輸入；模型擁有狀態；視圖負責呈現——三項職責，三條泳道。
- 視圖與控制器都不會寫入資料；所有改動都流經模型。
- 模型是通知觀察者，而不是命令視圖，所以一個模型可以驅動許多個視圖。
- 這種分離令每一部分都可以單獨測試——這正是這個模式最初的回報。
- MVC 是許多現代模式的祖先（MVVM、MVP、Redux 式的 store），它們全部都保留了同一種分離。
When to use this visual
- 在開發者去讀某個框架的文件之前，先向他們介紹這個模式——那個三角形就是每一個框架都在實作的地圖。
- 解釋為甚麼一個代碼庫難以改動：在視圖裡處理狀態就是違反 MVC，而這在畫布上是看得見的。
- 把 MVC 與整潔架構那張圖解裡的分層架構作比較。
運作方式
調整中央主題
按項目或課堂修改中央主題名稱。
擴展分支
編輯概念並加入例子或註解。
連結相關概念
畫出跨分支連結；只有方向重要時先用箭嘴。
常見問題
甚麼是 MVC？
MVC——模型、視圖與控制器——是一種把應用程式分成三部分的軟件模式：控制器處理輸入，模型擁有資料與業務規則，視圖負責呈現模型。這種分離的好處，是每一部分都可以獨立開發與測試，而同一個模型可以由許多個視圖來展示。大多數網頁框架都是建基於這個模式。
模型為甚麼是 MVC 的中心？
因為模型是唯一的真實來源。如果控制器與視圖都可以寫入資料，它們就會各自漂移並爭奪狀態。把所有改動都留在模型裡，意味著資料規則只有一個落腳點，而視圖永遠是一個一致模型的投影。圖解把模型的兩個方框放在它們自己的泳道，正是因為這個原因。
如果我把邏輯放進視圖會怎樣？
你會得到一種有時被稱為「肥大視圖」的反模式：顯示用的代碼與業務規則混在一起，不呈現出來就無法測試，而且會與模型漸行漸遠。同樣的批評也適用於一個持有業務邏輯而不是把工作交出去的控制器。MVC 的紀律，就是每一條泳道都留在自己的泳道裡——圖解裡那三列分開的方框，就是把這條規則畫了出來。
MVC 與現代框架有甚麼關係？
大多數現代框架都以新的名稱保留了這個三角形：MVVM 加入了一層 view-model，MVP 為視圖配上一個 presenter，而像 Redux 這類狀態管理程式庫，本質上就是加了更嚴格通知規則的模型。畫布的核心迴路——輸入改變狀態，狀態驅動輸出——就是它們每一個都保留下來的不變量。
喺 QueryChart 編輯呢張心智圖
喺可編輯畫布開啟心智圖。移動概念、加入分支同畫連結。