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. ......

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

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

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

痛定思痛,你決定分成幾個部份:

  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,然後就這樣吧。