淺談MVC框架中View層的優雅設計及例項

easyjf發表於2006-04-06
MVC框架View
　　　　　作者：EasyJF開源團隊， 大峽

　　在基於B/S的應用程式開發中，從基本的技術分工上來說就是兩大塊，一是軟體顯示介面，另一個是程式邏輯。在N年前的指令碼語言時代，無論是asp、php還是jsp，我們基本是都是把這兩者柔和在一起的。儘管我們想方設法做好很多函式或者包含檔案來努力達到軟體的複用，但仍然無法滿足多變的使用者需求,這主要是因為以前的純指令碼編碼方式無法很好支援及應用物件導向(OO)領域中的強大功能。

　　在常見的B/S軟體專案中，介面的設計包括html介面、Wap介面及其它由文字字元協議為基本表示的介面等。以我們接觸最多的html頁面為例子，在做這些介面的時候往往需要美工先使用photoshop或fireworks等圖形介面設計工具進行全域性設計，然後再使用進行Dreamweaver等html頁面製作工具進行加工製作。而強大的程式邏輯及後臺處理都是由伺服器端程式完成，這些程式具有較高的穩定性，其開發工具如JBuilder、Eclipse等對View層的介面無法很好的支援(當然那些用記事本寫介面的應用除外)，這就使得很多MVC框架的設計都無法兩全齊美。

　　作位一個比較友好的MVC的框架，在簡化伺服器應用開發的同時，還需要在View這一層設計上不要過多的影響到介面人員的工作，最基本的要求就是不要過多的加入一些設計軟體不支援的標籤等元素(如Struts的很多標籤在Dreamweaver中都不支援)。這裡我們以EasyJWeb為例，探討在View層如何實現比較合理的設計。

　　EasyJWeb作為一個快速Java Web MVC框架，其設計目標不盡是要簡化軟體開發人員的程式碼書寫工作，更是要能方便介面設計人員的工作。

　　當然，要使介面能跟後臺程式邏輯能融合，顯示介面及程式邏輯之間需要一定的對話協議在所難免。EasyJWeb作為一個MVC框架，同樣也存在著這樣的對話協議，這就是EasyJWeb中的介面模板標識語言。

　　在當前釋出的版本中，EasyJWeb介面模板標識語言使用的是Apache開源的Velocity模板引擎(template engine)，當然以後會根據際需要加入更多的模板引擎以供框架應用者選擇。

　　Velocity是一個基於java的模板引擎（template engine），它允許任何人僅僅簡單的使用模板語言（template language）來引用由java程式碼定義的物件。作為一個比較完善的模板引擎，Velocity的功能是比較強大的，但強大的同時也增加了應用複雜性。

　　理論上你可以在EasyjWeb模板使用所有Velocity的指令碼及功能，但我們不推薦你在介面模板中使用過多過複雜的指令碼表達方式，在萬不得已的情況下，不要在介面模板中加入任何複雜的邏輯，更不要在介面模板中加入變數宣告、邏輯運算子等等。

　　在EasyJWeb中，我們提供了四條基本的模板指令碼語句，基本上就能滿足所有應用模板的要求。這四條模板語句很簡單，可以直接由介面設計人員來新增。在當前很多EasyJWeb的應用實踐中，我們看到，所有介面模板中歸納起來只有下面四種簡單模板指令碼語句即可實現：

　　1、$!obj 　直接返回物件結果。
　　
　　如：在html標籤中顯示java物件msg的值。<p>$!msg</p>
　　　　在html標籤中顯示經過HtmlUtil物件處理過後的msg物件的值.<p>$!HtmlUtil.doSomething($!msg)</p>

　　2、if($!obj) else end 判斷語句

　　如：在EasyJWeb各種開源應用中，我們經常看到的用於彈出提示資訊msg的例子。

 
　　if($msg) 
　　<script> 
　　alert('$!msg'); 
　　</script> 
　　end 
<p class="indent">

上面的指令碼表示當物件msg物件存在時，輸出
<script>
等後面的內容。

　　3、foreach( $info in $list) $info.something end　　迴圈讀取集合list中的物件，並作相應的處理。
　　
　　如：EasyJF開源論壇系統中論壇首頁顯示熱門主題的html介面模板指令碼 

　　foreach( $info in $hotList1) 
<a href="/bbsdoc.ejf?easyJWebCommand=show&&cid=$!info.cid" target="_blank">$!info.title</a><br> 
　　　end 
<p class="indent">

　　上面的指令碼表示迴圈遍歷hotList1集合中的物件，並輸出物件的相關內容。
　　
　　4、macro(macroName)end 指令碼函式(宏)呼叫，不推薦在介面模板中大量使用。

　　如：在EasyJF簡易訂銷管等系統中經常看到的一個排序狀態顯示的模板內容。
　　函式(宏)定義，一般放在最前面 

　　macro(orderPic $type) 
　　if ($orderField.equals($type)) 
　　<img src="/images/ico/${orderType}.gif"> 
　　end 
　　end 
<p class="indent">

具體的呼叫如：

<font color="FFFFFF">頭銜orderPic("title")</font> 
<p class="indent">
　　
　　　　
　　總結：　
　　當然，在實際應用專案中，為了實現介面的更加友好、人性化，會出現很多復、易變的需求。如根據物件的不同狀態，顯示不同的提示顏色、提示語音等功能。在這種時候，仍然要慎用太多的模板指令碼功能，大多數需求都可以透過變通的方式解決，有些資訊可以直接在物件中增加邏輯轉化資訊，有些介面要求可以透過在介面中使用與特定介面有關的表達方式來實現，如html頁面中使用javascript、css，Wap頁面中使用WMLScript等等。只有，這樣才能確保證你的系統核心不受介面的的影響及控制，才能更好的擴充套件及維護。

　　我們希望你能成為真正的程式高手，而不只是精通某個處於表層的指令碼語言，因此也不希望廣大Java開發人員在View層消耗太多的時間。

　　由於水平有限，本文所談的內容有N多不合理或者需要改進的地方，懇請大家指正！


EasyJF官網:www.easyjf.com，各位朋友有空請來坐坐。

相關文章