由一個小小的 web control ,談談 MVC

先說今天的情境。我今天試著去做一份軟體開發的零工,所用的是 JavaScript 以及傳統的 ASP 。任務需要做出一個台灣的地址選單,裡頭包含有一對階層式的「市–區」選項。而我,過去一年之內並沒有做網頁設計,甚至過去幾年之內,也沒有用「記事本」撰寫 HTML 和 JavaScript 。對於地址選單,只記得很基本的原則,以及使用零碎的狀態去處理那些破碎的「市–區–郵遞區號–小號」的欄位。

最近讀到一些早期的 MVC 文章,有 Trygve M. H. Reenskaug 之流所撰寫的 MVC 文章,相當值得一讀。

然而,在近期的網路上一些網友的討論中,似乎總是認為所謂 MVC 是他們在 Struts 架構中所見到的幾個檔案分類與檔案互動格式,或者是其他 Web MVC 特定的模型,才足以讓他們接受。

本人認為, MVC 是普遍的軟體模型,並不只限制使用在 Web 中,而恰好我在打零工的時候,遇到台灣地址選單的需求。因此,業餘時多花了許多時間,將「台灣地址選單」定義為一種 Web Control ,而且適用於 MVC 格式。以下是我的 Web MVC 專案網址:

https://github.com/YauHsien/webmvc

MVC 比較適當的定義是:

  • Model :模式是一切事物不管哲學或形式的基礎,而對軟體來說,模式包括了核心資料,以及相關的介面。模式的責任,除了提供基礎之外,還有責任將內部的變化通知 View ,使 View 可以更新。
  • View :畫面做為外觀,責任除了需要如實呈現之外,還需要提供可以操作 Model 的操作能力。
  • Controller :控制,是做為人與 View 之間的介面,賦與人們手腳,可以透過 View 和 Controller ,對系統做出影響與改變。

下圖摘自 http://image.slidesharecdn.com/springmvc-thebasics-140403083848-phpapp02/95/spring-mvc-the-basics-5-638.jpg?cb=1396534574
提出相當合理、模組化的觀點。

圖說: Model-View-Controller 三角關係。

在我的 MVC Web Control 實作 ( https://github.com/YauHsien/webmvc ) 中,我設想所謂地址選單,包含有二個階層式的下拉選單、三個文字方塊,但是,這五個物件是同一件東西。寫在 HTML 以及隔壁的 <script> 中的程式碼應該要很簡單,亦即只要讓系統知道這裡有二個下拉選單,系統自己就知道該怎麼處理二個下拉選單的依賴關係與互動方式。下拉選單是 View ,也是 Controller。二個下拉選單,隱含為一對數字,分別為在二個選單裡頭選中的數字,這一對數字是 Model ,當 Model 改變的時候,必須讓 View 跟著改變跟著改變。在第一個選單裡挑選,會改變 Model ,而在第二個選單裡挑選,會用微妙的另一種方式改變 Model 。當 Model 確實有改變的時候,要通知改變選單的內容,以反映出 Model 。

台灣地址選單是一個完整的 MVC 主題,而它的環境是在瀏覽器的 JavaScript 執行環境與 HTML 繪圖環境。我的程式碼包含了 Model 、 View 、 Controller 、 Notification 等等,按照個別的特性而寫出的程式。 (https://github.com/YauHsien/webmvc/blob/master/include/address.js) 但是你不會看到這些程式被假裝當作三個單獨的模組,刻意劃分為三個檔案。

廣告

About 黃耀賢 (Yau-Hsien Huang)

熱愛 Erlang ,並且有相關工作經驗。喜歡程式語言。喜歡邏輯。目前用 Python 工作。
本篇發表於 Web Programming 並標籤為 。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s