`

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>

        运行效果:
  

        工程目录结构:

  • 大小: 21.6 KB
  • 大小: 27.1 KB
分享到:
评论

相关推荐

    easyTemplate实例

    在博文《easyTemplate实例》中,作者可能详细介绍了如何使用`easyTemplate`进行实际开发操作。虽然没有具体的描述,但我们可以推测文章可能包含以下几个方面的内容: 1. **安装与引入**: - 描述如何在项目中添加`...

    数据库实例概述.pptx

    数据库实例概述包括Oracle实例的概念、数据库与实例的关系、实例组成等几个方面。 Oracle实例的概念:Oracle数据库主要由放在磁盘中的物理数据库和对物理数据库进行管理的数据库管理系统组成。其中数据库管理系统...

    ADAMS入门详解与实例.pdf

    ADAMS入门详解与实例

    图像分割实战-系列教程1:语义分割与实例分割概述

    "图像分割实战-系列教程1:语义分割与实例分割概述" 本节课程主要讲解了图像分割的基本概念和技术,包括语义分割和实例分割。图像分割是计算机视觉领域中的一个基本任务,其目的是将图像分割成不同的区域,每个区域...

    结构弹塑性分析程序OpenSEES原理与实例

    结构弹塑性分析程序OpenSEES原理与实例,由华南理工大学的陈学伟博士和林哲博士共同编著而成,讲述OpenSees前后处理软件ETO(Etabs to OpenSees)的原理和应用实例。

    Adams入门详解与实例(李增刚).pdf

    ### Adams入门详解与实例知识点梳理 #### 一、Adams软件概述 - **定义与应用领域**:Adams是一款世界领先的多体动力学仿真软件,主要用于机械系统的动态模拟与分析,能够帮助工程师们准确地预测产品在实际工作环境...

    AutoCAD VBA _ VB.NET开发基础与实例教程 第2版.pdf

    #### 二、VBA与VB.NET概述 - **VBA**(Visual Basic for Applications): - **定义**:一种事件驱动的编程语言,用于自动化Microsoft Office等应用程序中的任务。 - **特点**:简单易学,适合初学者快速上手;...

    FEKO 5.4 电磁场分析技术与实例详解-2009

    FEKO 5.4 电磁场分析技术与实例详解-2009

    开关电源设计入门与实例解析 张占松.pdf

    开关电源设计入门与实例解析是一本面向初学者和行业工程师的实用工具书,旨在通过基础知识的讲解和具体实例的分析,帮助读者掌握开关电源设计的核心技术。 首先,我们需要理解开关电源的基本工作原理。开关电源的...

    MSC.ADAMS技术与工程分析实例

    《MSC.ADAMS技术与工程分析实例》是一本专为机械工程和制造行业从业者设计的指南,旨在帮助读者理解和掌握虚拟样机仿真技术的核心工具——MSC.ADAMS。本书通过丰富的实例,深入浅出地介绍了如何运用ADAMS进行工程...

    AutoCAD ObjectARX(vc)开发基础与实例教程

    AutoCAD ObjectARX(vc)开发基础与实例教程代码,主要内容包括AutoCAD .NET API介绍、使用AutoCAD .NET API控制AutoCAD工作环境、创建及编辑AutoCAD实体、创建和编辑尺寸标注、3D图形处理、定义打印布局、打印输出、...

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...

    ADS2011射频电路设计与仿真实例 徐兴福

    ADS2011射频电路设计与仿真实例,这本书由徐兴福编写,是一本专注于ADS(Advanced Design System)软件的教学与应用的专业书籍。ADS是用于电子设计自动化(EDA)的一套工具,广泛应用于无线通信、雷达系统、航天电子...

    NASTRAN快速入门与实例

    李增刚的书 比较基础 也比较简单明了 对了解nastran卡片文件和格式有很大的帮助

    VB.NET编程技巧与实例集粹PDF,200个经典实例,非常好的教程.

    这本书“VB.NET编程技巧与实例集粹”是针对初学者和有一定基础的开发者设计的,通过200个经典实例,深入浅出地讲解了VB.NET的核心概念和技术。 首先,VB.NET的基础知识包括语法结构、变量和数据类型、控制流程(如...

    ANSYS 10.0工程电磁分析技术与实例详解

    工程电磁分析技术与实例详解是有限元仿真技术重要内容,是学习的经典资料

    AutoCAD VBA&VB;.NET开发基础与实例教程C#版 教材pdf

    AutoCAD VBA&VB;.NET开发基础与实例教程 pdf版教材pdf版教材

    现代光学镜头设计方法与实例_毛文炜

    毛文炜老师的佳作,适合初级及中级光学/镜头设计者。文中有大量的实例,手把手的教大家从入门到进阶。

    ANSYS信号完整性分析与仿真实例[扫描版PDF电子书]

    根据提供的信息来看,标题和描述均提到了“ANSYS信号完整性分析与仿真实例”,但具体内容部分并未给出实际的书籍内容或章节概述,而是重复了关于购买电子书的信息。因此,我们将围绕“ANSYS信号完整性分析与仿真实例...

Global site tag (gtag.js) - Google Analytics