# 初探MVC 架構

大家好，
此文章是為了對MVC架構有明確的瞭解而決定撰寫整理的，
在這裡面也會參考些別人的文章來做解釋。
#### This Post Edit By ：[Mujing Tsai](https://www.facebook.com/mujing)

## 首先，什麼是MVC 架構?

MVC架構，白話一點就很像一間公司要分成各個部門，
部門之間，按照流程跟職責自己做自己的事情，以此形成一個系統。
跟傳統義大利麵龍捲風式的前端後端大雜燴比起來，

MVC有一個很大的優點就是「關注點分離」(Better separation of concerns)，
讓後端開發者可以專注於資料邏輯(Model)，
前端開發者可以專心前端設計(View)，
最後還有一個把兩邊串起來的的整合者（Controller)可以各司其職。

MVC架構指的架設網站會用到的三件事情：
1. **Model(資料模型)**:負責與資料庫溝通，紀錄資料以及資料存取方式、如何處理(商業邏輯)，初學者容易把Model當成只是存放資料結構的倉庫，事實上，Model是整個網站運作邏輯的核心所在。詳見： [框架不該有Model資料夾](http://blog.turn.tw/?p=1541)

2. **View (畫面表現):** 就是負責所有使用者會看到的部分，包含資料如何表現在頁面上。

3. **Controller(流程控制Routing)：** Controller主要處理http的請求，以及協調Ｍodel跟View之間傳遞資料的流程，比如說使用者在頁面上填寫了一個表格，發出請求給伺服器，這時候Controller就要負責決定這些資料何去何從（給哪個程式）處理或運算這筆資料，也就是Routing。

## 實際操作可能會像這樣

1. User 想要看今天的頭條，他在頁面上點了查詢，以URL(網址)形式發出了請求，這個請求就會傳給負責處理URL的Controller。
2. Controller解析這個URL決定要給哪一個函式處理，這個函式裡面就會包含跟資料庫調用資料的程式碼，也就是會調用Model定義好的類別。
3. Model負責與資料庫溝通，調回資料後再傳給Controller，然後再以相同方式反過來餵給前端View。
4. 某些需要持續動態更新的資料可透過前端非同步技術直接跟後端Model發出請求來取得（*可以透過Ajax，關於前端資料動態更新的作法，其實有很多種，只是這部分本人還沒有實際的操作經驗，所以無法詳細說明，有待日後更新)*

## MVC還是Model2？

現在許多框架都主打著MVC的招牌，但也有人主張某些看起來很像MVC的架構其實並不是MVC，而是創造java的公司昇揚（Sun）提出來，與MVC只有一毫之差的的架構『Model2』。

正統MVC架構（非Web的桌面程式使用的）裡的View與Model
有一層很重要的關係，那就是

---

『想要進行即時動態更新的View，必須要跟Model註冊（有點像是訂閱雜誌），之後Model有資料變動，就會自動通知View進行更新。而這就是所謂的觀察者模式（Observer pattern）』

---

不過因為http協定的關係，當某一端要訪問另一端資料時，必須要發出請求(request)，才會有回應(response) ，所以當MVC架構搬到網路上的時候，無法實現『讓Model主動將變更回應給View』的這個觀察者模式，當View的資料要更新的時候，都必須透過Controller來進行，**而這個無法實現觀察者模式又與MVC極相像的就是所謂的Model2架構。**

Model2 的View無法直接對伺服器後端直接發送請求，
為了解決這個問題，現在前端已經有越來越多的新技術產生，
例如AJAX這個技術，透過前端非同步處理技術，可以在不會影響到整體系統進行的情況下，對後端伺服器調用資料，達成類似傳統MVC架構的效果。

#### **做個結論：Model2與MVC的界線在前端技術發達的時代已經越來越模糊，導致很多人分不太清楚，不過其實也沒有必要探討的這麼深入，對我來說只要把Model/View/Controller三個部分拆分出來，其他都只是用法上的變化而已。**
詳見：[MVC與Model 2的變異與結合](http://www.ithome.com.tw/node/77330)

### 同場加映(有關MVC的正名爭執)：
[Model 1 / Model 2 架構](https://www.javatpoint.com/model-1-and-model-2-mvc-architecture#m2)
[MV-Whatever大家族](http://www.ithome.com.tw/voice/97137)
[技術名詞紛爭多](http://www.ithome.com.tw/voice/94877)
### 想要了解MVC的演化跟他的變種，請看這裡（文超級長）
[淺談MVC架構](http://www.cocoachina.com/cms/wap.php?action=article&id=19884)