# MVC (Model,View,Controller)

MVC 是一種==軟體架構模式==，把系統分為 Model, View, Controller。它的設計概念是以關注點分離（seperation of concerns, SOC)為基礎，將應用程式拆解成不同的功能面向，各自處理負責事項；強調團隊分工的概念。

這三個套用在 Web 分別為前端 HTML+CSS (View)，後端 API 資料庫(Model)，控制後端資料庫的接口 JavaScript (Controller)。

> 網站的開發過程中，如果沒有設立架構，需求要什麼就寫什麼，到最後，會留下一堆所謂的技術債，讓之後每次的更動，都得花較久的時間統整，或是有很多隱藏的Bug。

+ View：前端畫面與邏輯顯示
+ Controller：處理控制流程和回應
+ Model：後端資料庫進行運作

</br>

## 流程

當 Controller 收到請求後，Controller 會通知 Model 調度資料，接著再把資料傳遞給 View 來產生樣板，在回傳給Controller進行回復，最終將呈現資料的 HTML 頁面回傳到客戶端的瀏覽器。
</br>


## View
+ View 常譯為「視圖」，View 所管理的功能層叫作「表現層 (presentation layer)」，顧名思義是負責管理畫面的呈現，也就是 HTML 樣板 (template)，但實際回復使用者的還是得透過Controller。

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

> notifications是一個陣列。陣列內裝有所有的 notification 資料，這是以迴圈的方式一筆一筆撈出 notifications 裡面所有的資料。
文法像是 {% 、{{ 則會根據不同語言的 HTML 產生引擎會有所不同。

## Controller
+ Controller，是整個運作過程中的核心，負責收發 Request 與 Response ； 在Controller 會設置不同的事件(ation)，觸發了不同的 action，Controller 就會啟動後續一系列的行為。

+ Controller決定了應用程式的工作流程 (workflow)，並且蒐集不同元件的工作結果，統一回傳給使用者。

### 常見事件(ation)設計問題:
+ 使用者是否需要先登入 (認證) 才可以看到網頁內容？
+ 使用者是否只能閱讀資料，但不能修改或刪除？
+ 使用者新增了資料之後，會重新導向至哪個頁面？

## Model
+ Model，代表資料模型，主要負責==資料的操作與邏輯==，若使用者想要對資料進行「新增、修改、刪除、瀏覽」的動作，Model會跟軟體的資料庫進行溝通(例如:到資料庫提取該使用者的資料)。

+ Model 幫忙去資料庫裡取出必要的資料，把資料放進應用程式裡的某個程式物件，然後才能用 JavaScript 去操作該物件。
> 不一定都使用JS，有些開發者會使用Java、Python、Ruby 或 .NET 等，處理商業邏輯和數據存取，以提供更為豐富和互動的用戶界面。

> 如今JS的發展日新月異，也能做到上述語言的擁有的邏輯操作，所以能考慮統合一種語言，來提升開發效率及便利性。

### 範例
電商網站：

+ 會員購物有九折、訂單超過一定的金額免運費
+ 檢查登入帳號的類型，並依此開放不同權限

社交網站：
+ 判斷使用者彼此之間的友好程度

To-do List：
+ 過了期但沒被執行的 to-dos 不能被刪除

這些邏輯出自於產品本身的需求或是規則。它們是==獨立於網頁介面的商業邏輯==，因此之後改變載體，如手機 App 等相關應用程式，這些商業邏輯在大部分情況是通用的。這些邏輯相關的程式碼應該被分類到對應的 Model 檔案裡。

## MVC 架構的優劣
### 優點:
+ 重複使用：由於 MVC 三塊獨立，同一套 Model，針對使用場景不一樣，透過不同的 View 來呈現，能最大化程式碼的使用效率。

+ 容易維護：三塊獨立，可以讓你在不破壞現有架構下，進行擴充或修改，大幅提升開發效率。

+ 明確分工：在實際工作時，能大致分兩塊 功能設計 與 網頁設計，以加快開發速度。

### 缺點:
+ 不適合小型項目：對於小型或非常簡單的項目，MVC架構可能會引入不必要的複雜性和開發成本。

+ 性能問題：在某些情況下，MVC架構可能會導致性能問題，例如，過多的數據綁定和模型更新可能影響用戶界面的響應速度。

## 參考資料
[MVC架構是什麼？認識 Model-View-Controller 軟體設計模式][1]

[「筆記」- 何謂 MVC 軟體設計模式][2]

[1]: https://tw.alphacamp.co/blog/mvc-model-view-controller

[2]: https://medium.com/pierceshih/%E7%AD%86%E8%A8%98-%E4%BD%95%E8%AC%82-mvc-%E8%BB%9F%E9%AB%94%E8%A8%AD%E8%A8%88%E6%A8%A1%E5%BC%8F-af1ff10901e6