圖解MVC架構

大家應該都很常碰到這樣的問題，當接手維護某個網站時，發現程式碼很雜亂，檔案內包含了html、js跟css全部混在一起，甚至是資料庫邏輯。大幅增加維護的時間成本與精力。

為了讓後續專案利於擴充與簡化維護成本，就會參考以設計模式(design pattern)來進行專案的開發。一般常聽到的就是 MVC（Model-View-Controller），還有其它如 MVP 或 MVVP 等設計模式，若您有興趣可以近一步閱讀MVP, MVC, MVVM, 傻傻分不清楚~。在此文章主要以圖來帶您快速了解什麼是MVC架構。

<br>

MVC 是什麼？

MVC分別是Model(模型)、View(介面)與Controller(控制)。從字面上來看就能知道，MVC把程式碼控制分為了三類：給使用者看的畫面 - View、使用者操作的動作與資料控制 - Controller、定義資料結構與連接資料庫 - Model。這張圖說了什麼：<br> 動態網站是透過 Controller 請求 Model 的資料並傳給 View 來顯示。當使用者點擊連結或其它與網頁互動的操作時，都是透過 Controller 來負責給予相對的對應。當使用者有搜尋需求，輸入了某個關鍵字並按下搜尋按鈕後，負責接受這個動作的 Controller 就會讓 View 顯示搜尋的頁面，並向 Model 發出請求將使用者搜尋的相關資料給 View。修改個人資訊也是相同方式。

使用者與網頁的操作互動，全是依賴 Controller 來對 View 與 Model 發送或請求資訊。所以基本上 Controller 就是 View 與 Model 之間的協調者。也就是說 MVC 三者彼此都是獨立且有各自的職責，當某個部分需要修改時，都保證其它兩個不用去做更動與調整。以生活實際的例子來解讀 MVC 會更好理解。

以生活情境來看MVC：<br> 回想一下到 ATM 提款的印象。在 ATM 上所看到的畫面就是 View ，當插入卡片、輸入密碼、選擇金額這些操作都屬於 Controller ，它會負責將獲得的資訊去比對 Model 是否有資料，並請求 Model 進行數據變更（金額變更）。最後是否要顯示剩餘金額也是由 Controller 來負責去請求 Model，再給提供給 View 來顯示。

<br>

結語

一開始對於 MVC, MVP, MVVM 等架構還沒有基礎概念，經常會混淆與困惑，不知道怎麼去理解各自的用途與意義，光是一個MVC網路上就有需多不同的解釋。因此，建議一開始針對一種架構去了解，像是此編文章是以MVC為主，相信對MVC有一定的了解後，會更利於去理解其它的架構。

網路有幾篇寫得很清楚，能夠幫助您更加理解什麼是MVC，像是MVC 淺談轉載於藍色小舖、以及谈谈MVC模式，用舉例的方式帶您了解MVC的概念。