一.概述
在前后端分离的解决方案中,模板起到了重要作用!
在使用Struts或Spring的后端中,使用Freemarker模板作为载体,能够非常有效的实现前后端的分离。
有人或许会认为使用前端模板一样可以实现此效果,而且实现的会更好。如果单纯从技术和实 现的角度去考虑,确实是使用前端模板效果会更好,前后端分离的会更彻底,但如果真的这样做,任何地方都采用前端模板去渲染,那这样的WEB应用将会失去高 可靠性及易用性。
我们的建议是,一般的页面由后端模板渲染,页面中的某些特殊模组,可以由前端模板进行渲染,比如,一个具有诸多交互且内 容不断变化的数据列表。
在使用过Freemarker模板后,感觉它的语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了下面的EasyTemplate!
EasyTemplate模板的函数大小为1.34k(未压缩),暂时只实现了 list,list index,if elseif else等功能,可以满足大部分的使用需求了。
据悉,EasyTemplate模板引擎的解析速度测试,渲染1000行数据,在不同的浏览器中,平均速度大约在30豪秒以内。
二.EasyTemplate可用标签
<#macro tname dataname> //模板开始标签,tname为此模板的名称,dataname为此模板中用到的数据名称
<#if (condition)>
<#elseif (condition)>
<#else>
</#if>
${x?a:b} //三元表达式,最后不能加分号";" 注意:在所有的 {} 中都不能出现分号!
<#list List as list> //遍历一个数组对象
${list_index} //在此次遍历中的当前索引:as 后的别名加上"_index"
${list.xxx} //取值,as后的别名.xxx
</#list> //结束遍历
</#macro> //模板结束标签
三.实例
<!doctype html>
<html>
<head>
<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="lib/easy.template.js" type="text/javascript"></script>
</head>
<body>
<div id="navSign"></div>
</body>
<script id="tplNavigation" type="text/x-easy-template">
<#macro tplApplyLl data>
<dl>
<#list data as linkObj>
<dt>
<#if (linkObj.link && '#' != linkObj.link)>
<a href="${linkObj.link}" target="_black" <#if (linkObj.tabId)> tabId="${linkObj.tabId}"</#if>
<#if (linkObj.title)> title="${linkObj.title}"</#if>>
${linkObj.label}
</a>
<#else>
${linkObj.label}
</#if>
</dt>
<div>
<#if (linkObj.subMenu && linkObj.subMenu.length)>
<#list linkObj.subMenu as sub>
<dd>
<a <#if (sub.tabId)>tabId="${sub.tabId}" </#if>
<#if (sub.title)>title="${sub.title}" </#if>
href="<#if (sub.link)>${sub.link}<#else>#</#if>" target="_black">
${sub.label}
</a>
</dd>
</#list>
</#if>
</div>
</#list>
</dl>
</#macro>
</script>
<script type="text/javascript">
var navigationLinkData = [
{label: '导航栏', subMenu: [
{tabId: 'linkToBaidu', label: '百度', title:'百度中国',
link: 'http://www.baidu.com/'},
{tabId: 'linkToGoogle', label: 'Google', title:'Google中国',
link: 'http://www.google.com.hk/'},
{tabId: 'linkToIteye', label: 'iteye', title:'IT技术网站',
link: 'http://www.iteye.com/'},
{tabId: 'linkToSina', label: '新浪', title:'中国著名门户网站',
link: 'http://www.sina.com.cn/'},
{tabId: 'linkToSina', label: '搜狐', title:'中国最大的门户网站',
link: 'http://www.sohu.com/'},
{tabId: 'linkToSina', label: '腾讯', title:'中国最具发展前景互联网腾讯的门户网站',
link: 'http://www.qq.com/'},
{tabId: 'linkToPingan', label: '中国平安', title:'中国最具影响力的金融集团',
link: 'http://www.pingan.com/index.shtml'}
]}
];
//navigation, use template to generate html
var getNavContent = function(data){
if(!data || !data.length){
return '';
}
var res = easyTemplate($('#tplNavigation').html(), data).toString();
console.log(res);
return res;
};
$('#navSign').html(getNavContent(navigationLinkData));
</script>
</html>
运行效果:
工程目录结构: