MVC架構是什麼？認識Model-View-Controller 軟體設計模式

很常用的設計模式叫作MVC 設計模式，在這個架構裡，會把軟體分成Model、View、Controller 三大功能層。

每一次request/response 週期的背後， ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們💰獎學金優惠新生限定舊生限定馬上報名Web技術MVC架構是什麼？認識Model-View-Controller軟體設計模式Posted on 2020-09-02  by    byALPHACamp在應用程式開發的領域裡，相當重視「關注點分離(separationofconcerns,SOC)」的設計原則，從字面上的意思，就是把整個應用程式分拆成不同功能層(layer)或程式碼模組(module)，每個區塊有各自的關注點，彼此分工合作。

當我們把關注點分離的概念落實到軟體架構(architecturalpattern)時，最常見的分工是把「管理資料的功能」和「呈現視覺的功能」分離。

這裡會介紹一個很常用的設計模式叫作MVC設計模式，在這個模式裡，會把軟體分成Model、View、Controller三大功能層。

每一次request/response週期的背後，都由這三大功能層來合作完成。

什麼是MVC？Model、View、Controller的區分，是希望能把應用程式的內部運作歸納成不同的部門，讓每個部門各自負責不同的關注點。

具體的行為是「把不同意義的程式碼放在不同的檔案裡」。

ModelModel常譯為「模型」，負責和資料庫溝通。

這裡我們要先注意：應用程式和資料庫是兩個不同的東西，在應用程式裡想要做「新增/瀏覽/修改/刪除」的動作，就需要先有Model層幫忙去資料庫裡取出必要的資料，把資料放進應用程式裡的某個程式物件，然後才能用JavaScript去操作該物件。

這種放資料、與資料庫連動的物件，會被稱為Model物件，由Model層來統一管理。

Model管理的功能層被稱做「邏輯層」，更明確一點說，是和「商業邏輯」有關的功能，例如：電商網站：會員購物有九折、訂單超過一定的金額免運費檢查登入帳號的類型，並依此開放不同權限社交網站：判斷使用者彼此之間的友好程度To-doList：過了期但沒被執行的to-dos不能被刪除這些邏輯出自於產品本身的需求或是規則。

它們是獨立於網頁介面的商業邏輯，如果之後又另外開發了如手機App等相關應用程式，這些商業邏輯在大部分情況是通用的。

和這些邏輯相關的程式碼應該被分類到對應的Model檔案裡。

ViewView常譯為「視圖」，View所管理的功能層叫作「表現層(presentationlayer)」，顧名思義是負責管理畫面的呈現，也就是HTML樣板(template)。

在開發框架裡，因為HTMLtemplate會有需要以動態顯示資料的情況(也就是由Model取出的資料內容)，所以View會再進一步運用樣板引擎(templateengine)將資料帶入template。

我們很快就會在實作中看到相關細節。

HTML語法教學，快速攻略網頁HTML標籤的基本元素ControllerController常譯為「控制器」，它掌握使用者互動邏輯，也是應用程式收發request/response的核心。

來自路由的request會先被送到Controller，再由Controller通知Model調度資料，並且把資料傳遞給View來產生樣板(template)，並將呈現資料的HTML頁面回傳給客戶端。

你可以把Controller想做是MVC架構的中間人，它決定了應用程式的工作流程(workflow)，並且蒐集不同元件的工作結果，統一回傳給使用者。

以下常見的設計問題，會由Controller來控制：使用者是否需要先登入(認證)才可以看到網頁內容？使用者是否只能閱讀資料，但不能修改或刪除？使用者新增了資料之後，會重新導向至哪個頁面？在Controller上會設置很多不同的「動作(action)」，有點類似電視遙控器上的按鈕，只要觸發了不同的action，Controller就會啟動後續一系列的行為。

三分鐘小測驗，找到學習業界軟體開發的入口MVC模式的實作MVC是一種理念，重點是分化程式的職責，而不同的框架有不同的運用方式，運用MVC模式最著名的框架是RubyonRails，Rails框架的檔案架構規劃了非常嚴謹的models、controllers、views架構，而且環繞著MVC模式發展出一系列的命名慣例：相比之下，Express.js也運用了MVC模式的思維，只是在檔案架構上並沒有強制分成不同的資料夾，例如以下例子是一個輕量的專案，檔案架構是透過Express.js的程式碼產生器(express-generator)自動產生的。

由於程式碼不多，因此直接由routes下的程式碼來負責Controller的工作，在下圖中沒有Model，若需要連結資料庫的話，需要再自己實作Model的部分。

若專案規模變大，為了提高閱讀和維護的效率，會再把程式碼獨立出來、並歸類到資料夾裡，有可能會出現如Rails那樣的完整MVC架構：採用MVC架構三大好處重複使用已寫好的程式碼：由於MVC三塊彼此獨立、各司其職，你可以使用同一套model，針對使用場景不一樣，產出不同的view來呈現適合的資料，最大化程式碼的使用效率。

更容易維護程式碼：由於MVC三塊彼此獨立且互不干擾，可以讓你在不破壞現有架構下，進行擴充或修改，大幅提升開發效率。

方便團隊合作：同先前所說，由於MVC架構將應用程式切分為三塊，在實際工作時，也可以比照相同的方式，將工程師、設計師的負責部分切開，加快開發速度。

體驗軟體開發實務入門，申請5天免費試讀如何有效學習MVC大部分的人第一次學習MVC時，常常是搭配在「第一次使用框架」的經驗裡，因此會有點搞不懂因果關係。

在進入Express.js框架之前，AC的軟體開發實務入門課程（點此開啟試讀）就特地設計一個純JavaScript的小專案《翻牌遊戲》，在純JavaScript裡討論程式碼的分工，讓學生可以針對MVC的架構來理解程式碼分工的好處。

有了這一層的鋪墊，之後學生學到框架時，就有更多的背景知識來了解「框架裡的MVC架構」。

至於學習是否有效，我們可以看看學員的真實回饋。

學習程式碼模組化的概念，引入MVC架構來管理程式碼ALPHACampSeeAllPost開發模式Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術Mongodb介紹：從安裝到啟動基本操作教學Web技術React是什麼？給新手的React入門Web技術React教學，系統性學習React的步驟Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段Web技術什麼是Scrum？認識Scrum的做法與它的限制ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved