MVC架構是什麼?認識Model-View-Controller三層式設計原理與實際應用

Published on: | Last updated:

MVC... 最近又有人在問這個了

嗯... MVC,Model-View-Controller。說真的,每次要跟新手解釋這個,都有點傷腦筋。它不是一個很具體的「技術」,比較像是一種... 嗯,一種整理程式碼的「想法」或「原則」。 你可以把它想成是軟體開發中的一種設計模式。

我剛開始寫程式的時候,也沒有什麼架構概念。所有的東西,資料庫連線、網頁畫面、按鈕的反應... 全部都寫在同一個檔案裡。那時候覺得,會動就好,對吧?但專案一變大,那個檔案就變成一團災難,改一個小地方,另一邊就壞掉。真的很像一盤煮爛的義大利麵,全部的麵條都纏在一起,分都分不開。我們通常叫它「義大利麵式程式碼」(Spaghetti Code)。

義大利麵式程式碼的混亂感
義大利麵式程式碼的混亂感

一句話結論

所以,MVC到底是什麼?簡單講就是:**把一坨亂七八糟的程式碼,切成三份,分別是 Model、View 和 Controller,讓它們各管各的,這樣大家才好做事。**

那... M、V、C 到底怎麼分工?

這個嘛,我們就一個一個來看。把它想成一個團隊,每個人有自己的工作。

MVC 三層架構的基礎互動流程
MVC 三層架構的基礎互動流程

Model (模型):專心管家裡事的資料專家

Model,嗯... 你可以把它想成是只專注在「資料」和「商業邏輯」的專家。 它負責跟資料庫溝通,像是讀取、寫入、更新資料。 還有,所有跟這些資料相關的規定,比如「使用者密碼長度必須超過8碼」、「訂單金額不能是負數」之類的規則,也都是它在管。

重點是,Model 非常單純,它根本不知道最後這些資料會長什麼樣子,也不知道使用者按了哪個按鈕。它只聽 Controller 的指令,然後把資料準備好,或是把新的資料存起來。就這樣,很純粹。

View (視圖):只管門面好看的設計師

View 就是使用者看到的那個畫面。 網頁、App 的介面...都是 View。它就是個外貌協會,只在乎「怎麼呈現資料」。 它會從 Controller 那邊拿到資料,然後把它們排得漂漂亮亮的給使用者看。

View 本身也很笨,它不做任何決定。它只是個樣板,拿到什麼資料就顯示什麼。使用者在畫面上點了什麼、輸入了什麼,它也不會自己處理,而是馬上通報給 Controller。

Controller (控制器):運籌帷幄的總管

Controller 就像是個總管或中介者。 它是 Model 和 View 之間的橋樑。 當使用者在 View 上做了一個動作(比如點擊「購買」按鈕),這個請求會先送到 Controller。

Controller 收到請求後,會去判斷現在該做什麼。 可能是叫 Model 去資料庫拿商品資料,也可能是叫 Model 更新庫存數量。等 Model 把事情做完,Controller 再告訴 View:「嘿,資料來了,你可以更新畫面了」。

一個比較好懂的比喻:餐廳的運作

如果還是覺得很抽象,那用餐廳來比喻可能就清楚多了。我自己是覺得這個比喻最貼切。

  • 你 (使用者):走進餐廳,想吃飯。
  • 菜單/餐桌 (View):你看到的菜單、桌椅、餐具,這些都是 View。它呈現了你能點什麼,但它本身不能幫你做菜。
  • 服務生 (Controller):你跟服務生點餐,他負責把你的需求(請求)記下來,然後跑去跟廚房溝通。他就是 Controller,負責傳遞指令。
  • 廚房/廚師 (Model):廚房和裡面的廚師就是 Model。他們專心處理食材(資料)、依照食譜(商業邏輯)做菜。廚師並不用直接面對客人,他只聽服務生的。

整個流程就是:你看了菜單(View),告訴服務生(Controller)你要一份牛排。服務生跑去跟廚房(Model)說。廚房把牛排做好後,交給服務生(Controller),服務生再把牛排送到你的餐桌(View)上。你看,各司其職,一切都很有條理。

以餐廳運作來比喻 MVC 的分工合作
以餐廳運作來比喻 MVC 的分工合作

為什麼要這麼麻煩?直接寫不行嗎?

當然可以。但就像我一開始說的,當專案變大,你會很痛苦。拆分成 MVC 的好處,老實說,在小專案裡感覺不太出來。 甚至會覺得有點多此一舉。 但對於中大型專案,或是需要團隊合作的場合,優點就很明顯了。

評估項目 MVC 架構 義大利麵式寫法 (無架構)
關注點分離 做得很好,M、V、C 各自獨立,職責很清楚。 完全沒有... 所有東西都混在一起,像一鍋粥。
開發效率 (初期) 慢。你需要先規劃好檔案放哪、類別怎麼切。前期建置成本高。 快。反正就一個檔案,打開就寫,馬上能看到結果。
開發效率 (長期/團隊) 快很多。大家可以分工,前端弄 View,後端弄 Model 和 Controller,不容易互相影響。 災難。兩個人可能同時在改同一個檔案,很容易就衝突了。
維護與除錯 相對容易。畫面問題就找 View,資料錯了就找 Model,流程怪怪的就看 Controller。 非常痛苦。一個 bug 可能要從頭到尾追半天,不知道問題在哪個環節。
程式碼重用 高。同一個 Model 可以給不同 View 用,例如網頁版和 App 版共用一套資料邏輯。 很低。幾乎所有東西都綁死在一起,很難抽出來給別的地方用。

MVC 是唯一的答案嗎?

不是。MVC 算是一個很經典、影響深遠的模式,很多框架像 Ruby on RailsASP.NET MVC 都是基於這個理念。 國外很多開發者,像是 Martin Fowler,都對這類設計模式有很多討論,但我覺得有時候看台灣 iT 邦幫忙上面一些鐵人賽的文章,用實際專案來講解,反而更好懂。

不過呢,隨著前端技術越來越複雜,也出現了一些 MVC 的變形或替代方案,像是 MVP (Model-View-Presenter) 或 MVVM (Model-View-ViewModel)。 特別是 MVVM,在現在很多前端框架(像 Vue 或 React)中,它的影子更重。MVVM 透過更強的「資料綁定」,讓 View 和 ViewModel 的同步可以更自動化。 但這又是另一個故事了,今天先不深入。

說到底,不管用哪個架構,核心思想都是「關注點分離」(Separation of Concerns)。 目的是讓程式碼好管理、好維護,這才是最重要的。


聊了這麼多,你覺得哪種比喻更能幫助你理解 MVC?是「餐廳」,還是你有聽過其他更有趣的比喻?在下面留言分享看看吧!

Related to this topic:

Comments

  1. profile
    Guest 2025-05-04 Reply
    我覺得MVC架構雖然有它的優勢,但實際上並不適合每個專案。我在一次專案中就是因為堅持使用MVC,結果導致了很多不必要的複雜性。其實有時候簡單點反而更有效!
  2. profile
    Guest 2025-04-10 Reply
    嘿,這篇關於MVC架構的內容很全面耶!不過想請教一下,你們在實務上遇到過MVC架構最頭痛的問題是什麼啊?像我們團隊最近在處理複雜業務邏輯時,就常覺得Controller變得超肥...有沒有什麼實用的瘦身技巧可以分享?
  3. profile
    Guest 2025-04-01 Reply
    作為一個在海外開發團隊工作的工程師,我們公司三年前導入MVC時也踩過不少雷啊!特別認同「從新手到專家」那篇提到的痛點,當時光是Controller邏輯爆炸就搞到團隊快崩潰😂 現在回頭看,MVC的清晰分層確實讓跨時區協作順暢超多~