Volecity模板引擎學習筆記

轉自：https://blog.csdn.net/reggergdsg/article/details/50937433

最近項目中用到了volecity模板，這裏作一下筆記，學習中...相比較 FreeMarker 而言，Velocity 更加簡單、輕量級，但它的功能卻沒有 FreeMarker強大。

 

1，首先結合開發中遇到的一個問題：關於.vm文件引用外部JS的問題。vm文件引用外部js無效的問題。要搞清楚這個問題，咱們須要先搞清楚到底什麼是volecity模板？volecity模板是如何工做的？

volecity與jstl同樣，都是一種標籤技術。Velocity 解決了如何在 Servlet 和網頁之間傳遞數據的問題，固然這種傳輸數據的機制是在 MVC 模式上進行的，也就是View 和 Modle , Controller 之間相互獨立工做，一方的修改不影響其餘方變更，他們之間是經過環境變量（Context）來實現的，固然雙方網頁製做一方和後臺程序一方要相互約定好對 所傳遞變量的命名約定，好比上個程序例子中的 site, name 變量，它們在網頁上就是 $name ,$site 。這樣只要雙方約定好了變量名字，那麼雙方就能夠獨立工做了。不管頁面如何變化，只要變量名不變，那麼後臺程序就無需改動，前臺網頁也能夠任意由網頁製做 人員修改。這就是 Velocity 的工做原理。

　　你會發現簡單變量名一般沒法知足網頁製做顯示數據的須要，好比咱們常常會循環顯示一些數據集，或者是根據一些數據的值來決定如何顯示下一步的數據， Velocity 一樣提供了循環，判斷的簡單語法以知足網頁製做的須要。Velocity 提供了一個簡單的模板語言以供前端網頁製做人員使用，這個模板語言足夠簡單（大部分懂得 javascript 的人就能夠很快掌握，其實它比 javascript 要簡單的多），固然這種簡單是刻意的，由於它不須要它什麼都能作， View 層其實不該該包含更多的邏輯，Velocity 的簡單模板語法能夠知足你全部對頁面顯示邏輯的須要，這一般已經足夠了，這裏不會發生象 jsp 那樣由於一個無限循環語句而毀掉系統的狀況，jsp 能作不少事情，Sun 在制定 Jsp 1.0 標準的時候，沒有及時的限定程序員在 jsp 插入代碼邏輯，使得早期的jsp 代碼更象是 php 代碼，它雖然強大，可是對顯示層邏輯來講，並沒必要要，並且會使 MVC 三層的邏輯結構發生混淆。

 

1.  
   Volecity中引用外部文件的問題：
2.  
    
3.  
   #set($ctx="/baseUrl")
4.  
    
5.  
   <script type="text/javascript" src="${ctx}/scripts/charge/test.js"></script>
6.  
    
7.  
   #foreach($list in ${result.plist})
8.  
   <div class="line-info">
9.  
   #if(${list.type} == "3")
10.  
    <img src="${ctx}/images/water-icon.png" class="line-icon">
11.  
    #end
12.  
    #if(${list.type} == "4")
13.  
    <img src="${ctx}/images/power-icon.png" class="line-icon">
14.  
    #end
15.  
    #if(${list.type} == "5")
16.  
    <img src="${ctx}/images/gas-icon.png" class="line-icon">
17.  
    #end
18.  
    #if(${list.type} == "6")
19.  
    <img src="${ctx}/images/TV-icon.png" class="line-icon">
20.  
    #end
21.  
    #if(${list.type} == "7")
22.  
    <img src="${ctx}/images/phone-icon.png" class="line-icon">
23.  
    #end
24.  
    <div class="account-info-area">
25.  
    <div class="account-title">
26.  
    #if(${list.type} == "3")水費#end
27.  
    #if(${list.type} == "4")電費#end
28.  
    #if(${list.type} == "5")燃氣費#end
29.  
    #if(${list.type} == "6")手機充值費#end
30.  
    #if(${list.type} == "7")固話寬帶費#end
31.  
    </div>
32.  
    <div class="account-number">
33.  
    ${list.bill}
34.  
    </div>
35.  
    </div>
36.  
    <i class="account-menu"></i>
37.  
    </div>
38.  
    #end

 

 

2，關於SpringMVC返回vm模板的問題：

1.  
   $.ajax({
2.  
   type:'POST',
3.  
   url:ajaxUrl,
4.  
   data:ajaxData,
5.  
   error:function(){
6.  
   alert('ajax請求出現錯誤...');
7.  
   },
8.  
   success:function(data){
9.  
   $('#div_output_id').html(data + '');
10.  
    }
11.  
    });

 

Volecity模板教程

一，基本語法

1，#
"#"用來標識Velocity的腳本語句，包括#set、#if 、#else、#end、#foreach、#end、#iinclude、#parse、#macro等；
如:
#if($info.imgs)
<img src="$info.imgs" border=0>
#else
<img src="noPhoto.jpg">
#end

二、"$"用來標識一個對象(或理解爲變量)；如
如：$i、$msg、$TagUtil.options(...)等。

三、"{}"用來明確標識Velocity變量；
好比在頁面中，頁面中有一個$someonename，此時，Velocity將把someonename做爲變量名，若咱們程序是想在someone這個變量的後面緊接着顯示name字符，則上面的標籤應該改爲${someone}name。


四、"!"用來強制把不存在的變量顯示爲空白。
如當頁面中包含$msg，若是msg對象有值，將顯示msg的值，若是不存在msg對象同，則在頁面中將顯示$msg字符。這是咱們不但願的，爲了把不存在的變量或變量值爲null的對象顯示爲空白，則只須要在變量名前加一個「!」號便可。
如：$!msg

2、在EasyJWeb中的最佳實踐

  　理論上你能夠在EasyjWeb模板使用全部Velocity的腳本及功能，但咱們不推薦你在界面模板中使用過多過複雜的腳本表達方式，在萬不得已的狀況下，不要在界面模板中加入任何複雜的邏輯，更不要在界面模板中加入變量聲明、邏輯運算符等等。
　　在EasyJWeb中，咱們提供了五條基本的模板腳本語句，基本上就能知足全部應用模板的要求。這四條模板語句很簡單，能夠直接由界面設計人員來添加。在當前不少EasyJWeb的應用實踐中，咱們看到，全部界面模板中概括起來只有下面四種簡單模板腳本語句便可實現：
一、$!obj 　直接返回對象結果。
如：在html標籤中顯示java對象msg的值。<p>$!msg</p>
在html標籤中顯示通過HtmlUtil對象處理事後的msg對象的值　　<p>$!HtmlUtil.doSomething($!msg)</p>

二、#if($!obj) #else #end 判斷語句
如：在EasyJWeb各類開源應用中，咱們常常看到的用於彈出提示信息msg的例子。
#if($msg)
<script>
alert('$!msg');
</script>
#end
上面的腳本表示當對象msg對象存在時，輸出<script>等後面的內容。

三、#foreach( $info in $list) $info.someList #end　　循環讀取集合list中的對象，並做相應的處理。
如：
#foreach( $info in $hotList1) 
<a href="/bbsdoc.ejf?easyJWebCommand=show&&cid=$!info.cid" target="_blank">$!info.title</a><br>
#end 
上面的腳本表示循環遍歷hotList1集合中的對象，並輸出對象的相關內容。注意，這裏使用別名info + 字段名，中間不用加對象名，假如咱們想遍歷一個實體類，直接$info.businessId就能夠了，而不用這樣 寫$info.businessCharge.businessId

四、#macro(macroName)#end 腳本函數(宏)調用，不推薦在界面模板中大量使用。
如：在使用EasyJWeb Tools快速生成的添刪改查示例中，能夠點擊列表的標題欄進行升降排序顯示，這是咱們在EasyJWeb應用中常常看到的一個排序狀態顯示的模板內容。
函數(宏)定義，通常放在最前面
#macro(orderPic $type)
#if ($orderField.equals($type)) 
<img src="http://images.cnblogs.com/ico/${orderType}.gif"> 
#end
#end
具體的調用如：<font color="#FFFFFF">頭銜#orderPic("title")</font>
通過測試，宏不支持方法重載

五、包含文件#inclue("模板文件名")或#parse("模板文件名")
主要用於處理具備相同內容的頁面，好比每一個網站的頂部或尾部內容。
使用方法，能夠參考EasyJF開源Blog及EasyJF開源論壇中的應用！
如：#parse("/blog/top.html")或#include("/blog/top.html")
parse與include的區別在於，若包含的文件中有Velocity腳本標籤，將會進一步解析，而include將原樣顯示。

3、關於#set的使用

不到萬不得已的時候，不要在頁面視圖本身聲明Velocity腳本變量，也就是儘可能少使用#set。有時候咱們須要在頁面中顯示序號，而程序對象中

又沒有包含這個序號屬性時，能夠本身定義。如在一個循環體系中，以下所示：
#set ($i=0)
#foreach($info in $list)
序號:$i
#set($i=$i+1)
#end

4、Velocity腳本語法摘要

一、聲明:#set ($var=XXX)
左邊能夠是如下的內容
Variable reference 
String literal 
Property reference 
Method reference 
Number literal #set ($i=1) 
ArrayList #set ($arr=["yt1","t2"])
算術運算符

二、註釋:
單行## XXX
多行#* xxx
xxxx
xxxxxxxxxxxx*#

References 引用的類型

三、變量 Variables 
以 "$" 開頭，第一個字符必須爲字母。character followed by a VTL Identifier. (a .. z or A .. Z).
變量能夠包含的字符有如下內容：
alphabetic (a .. z, A .. Z) 
numeric (0 .. 9) 
hyphen ("-") 
underscore ("_") 

四、Properties 
$Identifier.Identifier
$user.name
hashtable user中的的name值.相似：user.get("name")

五、Methods 
object user.getName() = $user.getName()

六、Formal Reference Notation 
用{}把變量名跟字符串分開 

如
#set ($user="csy"}
${user}name 
返回csyname

$username
$!username
$與$!的區別
當找不到username的時候，$username返回字符串"$username"，而$!username返回空字符串"" 

七、雙引號 與 引號 
#set ($var="helo")
test"$var" 返回testhello
test'$var' 返回test'$var'
能夠經過設置 stringliterals.interpolate=false改變默認處理方式

八、條件語句
#if( $foo ) 
<strong>Velocity!</strong>
#end
#if($foo)
#elseif()
#else
#end
當$foo爲null或爲Boolean對象的false值執行.

九、邏輯運算符:== && || !

十、循環語句#foreach($var in $arrays ) // 集合包含下面三種：Vector, a Hashtable or an Array
#end
#foreach( $product in $allProducts )
<li>$product</li>
#end

#foreach( $key in $allProducts.keySet() )
<li>Key: $key -> Value: $allProducts.get($key)</li>
#end

#foreach( $customer in $customerList )
<tr><td>$velocityCount</td><td>$customer.Name</td></tr>
#end

十一、velocityCount變量在配置文件中定義
# Default name of the loop counter
# variable reference.
directive.foreach.counter.name = velocityCount
# Default starting value of the loop
# counter variable reference.
directive.foreach.counter.initial.value = 1

十二、包含文件 
#include( "one.gif","two.txt","three.htm" )

1三、Parse導入腳本
#parse("me.vm" )

1四、#stop 中止執行並返回 

1五、定義宏Velocimacros ,至關於函數 支持包含功能
#macro( d )
<tr><td></td></tr>
#end
調用 
#d()

1六、帶參數的宏
#macro( tablerows $color $somelist )
#foreach( $something in $somelist )
<tr><td bgcolor=$color>$something</td></tr>
#end
#end

1七、Range Operator 
#foreach( $foo in [1..5] )

附：《淺析MVC框架中View層的優雅設計及實例》

    在基於B/S的應用程序開發中，從基本的技術分工上來講就是兩大塊，一是軟件顯示界面，另外一個是程序邏輯。在N年前的腳本語言時代，不管是asp、 php仍是jsp，咱們基本是都是把這二者柔和在一塊兒的。儘管咱們千方百計作好不少函數或者包含文件來努力達到軟件的複用，但仍然沒法知足多變的用戶需 求,這主要是由於之前的純腳本編碼方式沒法很好支持及應用面向對象(OO)領域中的強大功能。

    在常見的B/S軟件項目中，界面的設計包括html界面、Wap界面及其它由文本字符協議爲基本表示的界面等。以咱們接觸最多的html頁面爲例子，在作 這些界面的時候每每須要美工先使用photoshop或fireworks等圖形界面設計工具進行全局設計，而後再使用進行Dreamweaver等 html頁面製做工具進行加工製做。而強大的程序邏輯及後臺處理都是由服務器端程序完成，這些程序具備較高的穩定性，其開發工具如 JBuilder、 Eclipse等對View層的界面沒法很好的支持(固然那些用記事本寫界面的應用除外)，這就使得不少MVC框架的設計都沒法兩全 齊美。

    做爲一個比較友好的MVC的框架，在簡化服務器應用開發的同時，還須要在View這一層設計上不要過多的影響到界面人員的工做，最基本的要求就是不要過多的加入一些設計軟件不支持的標籤等元素(如Struts的不少標籤在Dreamweaver中都不支持)。

　　固然，要使界面能跟後臺程序邏輯融合，前臺頁面和後臺邏輯之間須要會話協議的支持。Velocity是一個基於java的模板引擎 （template engine），它容許任何人僅僅簡單的使用模板語言（template language）來引用由java代碼定義的對象。做爲一個比較完善的模板引擎，

Velocity的功能是比較強大的，但強大的同時也增長了應用複雜性。

　　理論上你能夠在EasyjWeb模板使用全部Velocity的腳本及功能，但咱們不推薦你在界面模板中使用過多過複雜的腳本表達方式，在萬不得已的狀況下，不要在界面模板中加入任何複雜的邏輯，更不要在界面模板中加入變量聲明、邏輯運算符等等。

總結：　
    固然，在實際應用中，爲了實現界面的友好、人性化，會出現不少易變的需求。如根據對象的不一樣狀態，顯示不一樣的提示顏色、提示語音等功能。在這時候，仍然要 慎用太多的模板腳本功能，大多數需求均可以經過變通的方式解決，有些信息能夠直接在對象中增長邏輯轉化信息，有些界面要求能夠經過在界面中使用與特定界面 有關的表達方式來實現，如html頁面中使用javascript、css，Wap頁面中使用WMLScript等等。只有這樣才能確保系統核心不受界面 的的影響，才能更好的擴展及維護。