GOTO MVC! GOTO MVC!

想像一家早餐店，烹飪鐵板就在用餐桌旁邊的那種。這種早餐店，你和老闆說下自己要什麼，老闆就會親自拿出原料下廚、並完成你要的餐點。然後你吃完餐點，走人。一個房間就能完成「烹飪→清潔店家→招呼」的所有事情。

沒有 MVC 的網頁就像早餐店這樣：你直接對網頁的程式語法下各種指令：例如連接資料庫、執行各種動作……等。這種互動模式很簡單，如果只有做很簡單很簡單的功能，這種模式就已經堪用了：就好像一家早餐店，就算「烹飪→清潔店家→招呼」都只有老闆一個人、在一個沒隔間的小房間內完成也無妨。

但是…假設餐廳的規模越來越大、客人越來越多、餐點越來越複雜……嗯，就假設是一間連鎖餐廳吧。你認為連鎖餐廳只用一個沒隔間的房間，就能完成所有事情嗎？很明顯的不行：老闆根本不能一個人完成所有事情。

但就算請幾位「工作夥伴」也好不到哪裡去：「工作夥伴」們一下子要招呼客人、一下子要做菜、還要再清理餐廳……這樣一來，混亂可能還是小事，萬一搞到餐廳發生火警就麻煩啦。

所以這老闆決定，把「工作夥伴」們分成三個部門：第一個部門就專門烹調、第二個部門就去用餐區送菜色、第三個部門就去外面招呼客人。這家餐廳終於上軌道了。

所謂的 MVC 就是 Model, View, Controller，中文翻譯為「模型、視圖、控制器」：模型和資料庫互動，並完成程式的運作方法、視圖負責呈現程式的外觀、最後控制器負責前兩者的聯繫。這和前面的餐廳有什麼關係？且聽我這比較：

• 客人來到餐廳→櫃台招呼客人點餐→櫃台去叫廚房做菜→廚房做菜→櫃台負責帶位→客人之後在用餐區用餐
• 網站收到請求→控制器要處理請求→控制器與模型互動→模型處理程式→控制器與視圖互動→視圖呈現外觀

過程就是這樣。是不是很熟悉？

原本用純 PHP 檔案的話，你想要做個會員登錄畫面：

1. 首先就要寫個 HTML 表單，把要用戶寫的地方，填東西進去
2. 然後想要好看？就在 HTML 打個 color 或是 width 之類的屬性調整顏色長度之類
3. 想要在送出以前，確認用戶有沒有填東西進去？就寫個 onsubmit 進來
4. 確認之後的登錄呢？就寫個 <?php "SELECT" .$_POST["foobar"]. "from members" ?>。
5. ......

長此以往，這個網頁最後會看起來一團亂。有一天，當你要找出為什麼大家抱怨無法登錄的時候，你痛苦得發現整個原始碼的行事邏輯混在一起，問題根本無從找起。

對了，你最後發現為什麼大家抱怨無法登錄，是因為某個傢伙下了個神秘的引號，讓你的會員資料庫啾咪了。

這整個實做過程其實包含好幾個語言：

• HTML
• CSS
• JavaScript
• PHP
• SQL

痛定思痛，你決定分成幾個部份：

1. 最基本的表單用 HTML 寫出來。
2. 然後外觀針對某些地方指定 id 後獨立成某個 CSS 檔案。
3. 驗證部份再用該 id 寫成獨立的 JavaScript 檔案。最後，你乾脆直接用聽說很強很好用的 AngularJS。
4. 用 include 載入又一個獨立的 PHP 檔案。

還不錯，好多了：把外觀、路徑處理、以及程式運作獨立起來後，就漸漸有 MVC 的雛型。不過，有沒有一個關於這些步驟的懶人包？

用到後來，你發現 AngularJS 好像是 MVC，Ruby on Rails 也是 MVC。那，這兩個是一樣的嗎？

技術上來說不是。那怎麼辦？

告訴你，AngularJS 其實不是 MVC，而是 MVW：Model-View-Whatever：我們把這一切都歸為 MVW，然後就這樣吧。