easyTemplate概述与实例 -

bijian1013

浏览: 3237936 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

easyTemplate概述与实例

博客分类：

JavaScript

easyTemplate freeMark easyTemplate实例

一.概述

　　在前后端分离的解决方案中，模板起到了重要作用！

　　在使用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>

运行效果：