Volecity模板引擎学习笔记
转自：https://blog.csdn.net/reggergdsg/article/details/50937433javascript
最近项目中用到了volecity模板，这里作一下笔记，学习中...相比较 FreeMarker 而言，Velocity 更加简单、轻量级，但它的功能却没有 FreeMarker强大。php
1，首先结合开发中遇到的一个问题：关于.vm文件引用外部JS的问题。vm文件引用外部js无效的问题。要搞清楚这个问题，咱们须要先搞清楚到底什么是volecity模板？volecity模板是如何工做的？css
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 三层的逻辑结构发生混淆。html
-
Volecity中引用外部文件的问题：
-
-
#set($ctx="/baseUrl")
-
-
<script type="text/javascript" src="${ctx}/scripts/charge/test.js"></script>
-
-
#foreach($list in ${result.plist})
-
<div class="line-info">
-
#if(${list.type} == "3")
-
<img src="${ctx}/images/water-icon.png" class="line-icon">
-
#end
-
#if(${list.type} == "4")
-
<img src="${ctx}/images/power-icon.png" class="line-icon">
-
#end
-
#if(${list.type} == "5")
-
<img src="${ctx}/images/gas-icon.png" class="line-icon">
-
#end
-
#if(${list.type} == "6")
-
<img src="${ctx}/images/TV-icon.png" class="line-icon">
-
#end
-
#if(${list.type} == "7")
-
<img src="${ctx}/images/phone-icon.png" class="line-icon">
-
#end
-
<div class="account-info-area">
-
<div class="account-title">
-
#if(${list.type} == "3")水费#end
-
#if(${list.type} == "4")电费#end
-
#if(${list.type} == "5")燃气费#end
-
#if(${list.type} == "6")手机充值费#end
-
#if(${list.type} == "7")固话宽带费#end
-
</div>
-
<div class="account-number">
-
${list.bill}
-
</div>
-
</div>
-
<i class="account-menu"></i>
-
</div>
-
#end
2，关于SpringMVC返回vm模板的问题：前端
-
$.ajax({
-
type:'POST',
-
url:ajaxUrl,
-
data:ajaxData,
-
error:function(){
-
alert('ajax请求出现错误...');
-
},
-
success:function(data){
-
$('#div_output_id').html(data + '');
-
}
-
});
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 引用的类型java
三、变量 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等等。只有这样才能确保系统核心不受界面 的的影响，才能更好的扩展及维护。程序员
- 1. Jade模板引擎学习笔记（一）
- 2. 模板引擎——Jade学习笔记
- 3. Smarty模板引擎 学习记录
- 4. velocity模板引擎学习
- 5. 模板引擎jade学习
- 6. 前端模板引擎 —— 带你学习Jade / Pug 模板引擎
- 7. node模版引擎Jade学习笔记
- 8. Express的模板引擎 - Jade学习笔记
- 9. ssm使用freemarker模板引擎（私人学习笔记）
- 10. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）
- 更多相关文章...
- • Maven 项目模板 - Maven教程
- • Eclipse 代码模板 - Eclipse 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。