八月 10, 2018 | 前端與Vue

圖解MVC架構

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

大家應該都很常碰到這樣的問題,當接手維護某個網站時,發現程式碼很雜亂,檔案內包含了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的概念。

hashtags: