资讯频道 → Web前端
阅读更多

4顶
3踩

Web前端

原创新闻 Elapse：开源的 JavaScript 模板引擎

2012-06-25 16:47 by 见习记者 satanultra 评论(40) 有12259人浏览
模板 JavaScript模板 JS模板 JavaScript 前端模板

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Elapse 是一个开源的 JavaScript 模板引擎，其特点如下：

 

  • 语法简单：由于该引擎基于JS语法，并做增强，所以学习成本低，且功能强大。
  • 可编译，高性能：经测试，编译后的运行效率和市面上大部分模板引擎效率持平，或更高。
  • 简单的include：只需配置一个loader（加载器），便可支持各种模板来源，并自动从来源获取模板。

需求样例——渲染一个数据表格：


模板：

 

				<table>
					<thead>
						<tr>
							<th>
								姓名
							</th>
							<th>
								性别
							</th>
							<th>
								生日
							</th>
						</tr>
					</thead>
					<tbody>
						${forarr #userList as user}
							<tr>
								<td>
									${user.name}
								</td>
								<td>
									${user.sex}
								</td>
								<td>
									${user.birthday}
								</td>
							</tr>
						${/forarr}
					</tbody>
				</table>

 

注入到模板的数据：

 

				{
					"userList": [
						{
							"name": "小明",
							"sex": "男",
							"birthday": "1989-10-29"
						},
						{
							"name": "小红",
							"sex": "女",
							"birthday": "1989-10-1"
						}
					]
				}

  

渲染代码：

 

				var template = $("#template").val();
				var json = $.parseJSON($("#json").val());
				//渲染代码开始
				Elapse.renderFromSource({
					source: template,
					data: json,
					complete: function (text) {
						$("#result").html(text);
					}
				});
				//渲染代码结束

 

渲染结果：

 

<table>  
    <thead>  
        <tr>  
            <th>  
                姓名  
            </th>  
            <th>  
                性别  
            </th>  
            <th>  
                生日  
            </th>  
        </tr>  
    </thead>  
    <tbody>  
          
            <tr>  
                <td>  
                    小明  
                </td>  
                <td>  
                    男  
                </td>  
                <td>  
                    1989-10-29  
                </td>  
            </tr>  
          
            <tr>  
                <td>  
                    小红  
                </td>  
                <td>  
                    女  
                </td>  
                <td>  
                    1989-10-1  
                </td>  
            </tr>  
          
    </tbody>  
</table>
 

简单的变量访问机制：

 

	访问用户变量：${#userList} ${#userList.length}
	访问JS全局变量：${@location.href}
	访问系统生成的临时变量： ${curUser}
 

 

为常用需求优化的关键字：

 

循环数组：

 

					${forarr #userList as user}
						列表长度为:${#userList.length},现在循环到了${user#index},值:${user}
					${/forarr}

  

循环对象：

 

					${foreach #colors as color}
						颜色${color#key}的十六进制值为:${color}
					${/foreach}
  

单纯循环：

 

					循环十次:
					${loop 10 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}
					
					循环十次，每次递增2:
					${loop 10,2 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}
					
					循环十次，每次递增2,初始值为5:
					${loop 10,2,5 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}

 

while循环：

 

					${while true}
						一次循环立马退出
						${break}
					${/while}

if语句：

 

					${if #userList.length == 3}
						用户列表长度为3
					${/if}

 

else语句：

 

					${if #userList.length == 3}
						用户列表长度为3
					${else}
						用户列表长度不为3
					${/if}
  

elseif语句：

 

					${if #userList.length == 3}
						用户列表长度为3
					${elseif #userList.length == 0}
						用户列表长度为0
					${else}
						用户列表长度不为3
					${/if}

 

switch语句：

 

					${switch #userList.length}
						${case 0}
							用户列表长度为空。
							${break}
						${case 1}
							用户列表长度为1。
							${break}
						${case 2}
							用户列表长度为2。
							${break}
						${case 3}
							用户列表长度为3。
							${break}
						${default}
							神马啊。。。
					${/switch}
 

定义变量：

 

					将一个变量赋null:
					${eval #userList[0] = null}
					
					定义一个变量,必须定义在#下:
					${eval #myvar = "hello world!"}

 

给模板命名（注册模板）：

 

					设置模板的name为“userlist”
					${name userlist}
 

简单的模板包含：

 

					包含名称为“userlist”的模板：
					${include userlist}
					
					包含名称为“userlist”的模板,并且向其注入一些数据：
					${include userlist:#userList}

 

系统如何找到包含的模板：

 

					Elapse.setLoader({
						loader: function (name, setter) {	
							//设置loader函数，当系统需要的模板未注册的话，会调用此方法。
							//name: 需要的模板的名称
							//setter: 接收模板方法。
							//定义你的获取方式：来自dom、来自远程。。。我这里是来自远程。  
							$.ajax({
								url: "/getTemplate",
								data: "name=" + name,
								type: "get",
								dataType: "text",
								success: function (source) {
									setter(source);
								}
							});
						}
					});
					
					//你只需要满足loader的调用即可，只有当以上代码的“setter”参数接收了模板源文件，系统才认为得到了此模板。你对模板加载大可放心，一切都由引擎调度好了。

 

详细文档：见附件中的guide.html（勿用ie查看，文档样式不兼容）

 

项目地址：https://github.com/yinhang/Elapse

 

欢迎你的使用，并期待你加入此项目一同开发。

 

 

4
顶
3
踩
评论 共 40 条 请登录后发表评论
20 楼 satanultra 2012-06-26 10:20
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";

谢谢你的回答~我试试，应该代码都在一个页面就可以实现吧

对

<script type="text/javascript" src="${pageContext.request.contextPath}/js/Elapse.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.6.js"></script>
<script type="text/javascript">
var template = $("#template").val();
var json = $.parseJSON($("#json").val());
//渲染代码开始
Elapse.renderFromSource({
source: template,
data: json,
complete: function (text) {
$("#result").html(text);
}
});
//渲染代码结束
{
"userList": [
{
"name": "小明",
"sex": "男",
"birthday": "1989-10-29"
},
{
"name": "小红",
"sex": "女",
"birthday": "1989-10-1"
}
]
}
</script>
  </head>
  <body>
<table>
<thead>
<tr>
<th>姓名[项目的root：<%=pathRoot %>]||[EL获得root：${pageContext.request.contextPath }]</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody>
${forarr #userList as user}
<tr>
<td>${user.name}</td>
<td>${user.sex}</td>
<td>${user.birthday}</td>
</tr>
${/forarr}
</tbody>
</table>
</body>

啊，和el混用就不成了是吧。
19 楼 lsjinpeng 2012-06-26 10:19
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";

谢谢你的回答~我试试，应该代码都在一个页面就可以实现吧

对

引入了2个js文件，jsp不能解析${forarr #userList as user}这一行，你看看哪写差了..
18 楼 lsjinpeng 2012-06-26 10:18
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";

谢谢你的回答~我试试，应该代码都在一个页面就可以实现吧

对

<script type="text/javascript" src="${pageContext.request.contextPath}/js/Elapse.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.6.js"></script>
<script type="text/javascript">
var template = $("#template").val();
var json = $.parseJSON($("#json").val());
//渲染代码开始
Elapse.renderFromSource({
source: template,
data: json,
complete: function (text) {
$("#result").html(text);
}
});
//渲染代码结束
{
"userList": [
{
"name": "小明",
"sex": "男",
"birthday": "1989-10-29"
},
{
"name": "小红",
"sex": "女",
"birthday": "1989-10-1"
}
]
}
</script>
  </head>
  <body>
<table>
<thead>
<tr>
<th>姓名[项目的root：<%=pathRoot %>]||[EL获得root：${pageContext.request.contextPath }]</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody>
${forarr #userList as user}
<tr>
<td>${user.name}</td>
<td>${user.sex}</td>
<td>${user.birthday}</td>
</tr>
${/forarr}
</tbody>
</table>
</body>
17 楼 satanultra 2012-06-26 09:58
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";

谢谢你的回答~我试试，应该代码都在一个页面就可以实现吧

对
16 楼 lsjinpeng 2012-06-26 09:57
satanultra 写道
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";

谢谢你的回答~我试试，应该代码都在一个页面就可以实现吧
15 楼 satanultra 2012-06-26 09:56
istep 写道
偶用jTemplate

我也用过，并且大量使用过。它的include非常麻烦。且没有明显的编译过程。
14 楼 satanultra 2012-06-26 09:54
lsjinpeng 写道
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 

没错，这个是jquery。这段代码可以无视掉，它和模板引擎没有关系~我是为了方便，用jquery来取得上边的模板内容。如果我写成这样也可以运行：例如var template = "用户列表长度：${#userList.length}";
13 楼 istep 2012-06-26 09:53
偶用jTemplate
12 楼 shuaiji 2012-06-26 09:50
[url][/url]
11 楼 lsjinpeng 2012-06-26 09:48
satanultra 写道
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~

你好！哪些带有# ，例如：var template = $("#template").val(); 这个是jquery的选择器吧 ？这个id在整个流程下来没有出现过..希望你能耐心解答，可以笑我小白哦~ 
10 楼 satanultra 2012-06-26 09:44
lsjinpeng 写道
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂

下载附件里的文档~那里有一步一步的指引。基本什么都不用配置，引入Elapse.js就可以了~
9 楼 lsjinpeng 2012-06-26 09:38
能总结一个简单的例子么，什么时候配置什么文件[的顺序]
我新手...看不大懂
8 楼 zghhost 2012-06-26 09:28
有空用一下试试
7 楼 bolo 2012-06-26 08:37
如果用的是FreeMarker模板引擎，这个还能用么？
6 楼 satanultra 2012-06-26 00:02
kjj 写道
satanultra 写道
kjj 写道
${user.name} 
这是el语法还是js语法!!

包裹标记和el类似。内部可写js代码。并对js语法进行了一些修改，添加了一些关键字为模板应用做优化。

我是说,页面上同时出现${user.name} 是不是el和你的模版都同时会去解释,那么在编译jsp阶段会不会冲突!!

会的。起初是{}形式，但如果模板中有js代码就痛苦了。后来改成${}的。我建议模板写在单独的文件中，我们就是这么做的，独立易维护。
5 楼 kjj 2012-06-25 23:47
satanultra 写道
kjj 写道
${user.name} 
这是el语法还是js语法!!

包裹标记和el类似。内部可写js代码。并对js语法进行了一些修改，添加了一些关键字为模板应用做优化。

我是说,页面上同时出现${user.name} 是不是el和你的模版都同时会去解释,那么在编译jsp阶段会不会冲突!!
4 楼 satanultra 2012-06-25 20:20
kjj 写道
${user.name} 
这是el语法还是js语法!!

包裹标记和el类似。内部可写js代码。并对js语法进行了一些修改，添加了一些关键字为模板应用做优化。
3 楼 kjj 2012-06-25 20:11
${user.name} 
这是el语法还是js语法!!
2 楼 tag13346 2012-06-25 19:51
比起国内那些杂七杂八的开源项目，这个还比较有意义。不求大，小而精的工具
1 楼 demonkind 2012-06-25 17:03
mustache也挺好用的。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • taverna-ui-exts:Taverna Workflow 系统 Workbench 用户界面扩展

    Taverna Workflow 系统 Workbench 用户界面组件 此代码以前托管在

  • 面试智力题2

    <br />62-63=1 等式不成立，请移动一个数字（不可以移动减号和等于号），使得等式成立，如何移动？<br /> <br /> <br /> <br />答案：2的6次方-63=1

  • 面试中的智力题

    1.如果你变成蚂蚁大小然后被扔进一个搅拌机里，你将如何脱身？ 1)如果有人可以帮忙，而你又会游泳，快叫人向搅拌器内注入水，利用水的浮力来逃生；你不会游泳，叫人放绳索拉你上去。2)、你的身体好，有力气，自己爬出去；把搅拌器底座挖个孔，钻出去。3)、最直接的办法就是，谁把你放进去的，叫他再把你拿出去。4)、如果你学了法术，把也搅拌器缩小或放大你自己不就可以出来了吗？4)堆积里面的石头垫高了再出去。

  • 一件事情，如果你不能说清楚，十有八九你就作不好

    一件事情，如果你不能说清楚，十有八九你就作不好                                                                     杨军 杨军在 TopLanguage 上也曾分享了三篇非常棒的学习心得的文章，字字珠玑： [1] 有些事情做起来比想象中容易 [2] 有关读书方法的一点想法 [3] 一件事情如果你没有说清楚，十有八九不能做

  • Spring Boot学生信息管理系统项目实战-4.学生管理

    officedocument.spreadsheetml.sheet' ,exts: 'xls|xlsx' //只允许上传xls文件 ,before:function (obj) { layer.load(); //上传处理loading } ,done: function(res){ // 上传完毕回调 layer.closeAll('loading'); //...

  • struts2+spring2.5+hibernate3+Extjs3实现的简单人员管理

    struts2+spring2.5+hibernate3+Extjs3实现的简单人员管理   我是初学Extjs，有很多不是很懂，在做这个小例子时随然能跑起来了，但是在数据添加删除修改之后又会自动更新，有时在重新reload store完成时，页面数据...

  • Lua 中 获取各种系统环境信息用法 for Win32Exts

    Lua 中 获取各种系统环境信息用法 for Win32Exts Win32Exts 是一个支持多种脚本语言（VBS, JS, Lua, Python, Java）的 Win32 扩展库， 通过它，你能够像C/C++ 一般 调用任意系统或者第三方API，实现强大的功能...

  • Layui 复数文件上传 exts 参数失效的问题

    今天维护 layui 做多文件上传的时候有文件格式限制，但是发现选择多个文件的时候，参数 exts 失效。 最后发现是版本太老了，，，我的是 V2.5.4。这个问题作者两年前就已经解决了。 根据 layui 的作者 贤心 的提交...

  • 搅拌机学习

    点选  鼠标右键反点选a再按A全部点选再按a全取消移动画面鼠标中建移动摄影机鼠标中间+shift建立另一个视窗鼠标移动到右上角变十字shift+c移动场景回中间7变上试图5变平视图，（不透明）1变前视图3变侧视图ctrl+u保存启动项ctrl+上箭头/小箭头全面视窗ctrl+右箭头/左箭头切换界面工具框左右横拉鼠标滑鼠中间左右拉ctrl+tab点线面切换z表面模式和线图模式切换shift+a增加物...

  • linux下把ntfs改成ext,更改自己原来的ntfs为exts文件格式系统

    mianhong@mianhong-desktop:~$ mkfs.ext3 /dev/sda3mke2fs 1.40.8 (13-Mar-2008)/dev/sda3 is mounted; will not make a filesystem here!mianhong@mianhong-desktop:~$ umount -v /dev/sda3umount: 只有 root 能从 ...

  • layui_exts.rar

    Layui导入导出excel所需js，包含excel.js,excel.min.js

  • 【dubbo源码】dubbo完美接入spring过程剖析

    使用spring框架来整合Dubbo服务，Dubbo中的各项配置最终都会成为spring中的Bean对象，并遵循spring bean的整个生命周期管理。本文使用xml配置文件的方式来配置Dubbo服务来分析下整个过程。

  • Spring 进阶：SpringMVC 常用注解标签详解

    在Spring MVC中，控制器Controller负责处理由分发的请求，它把用户请求的数据经过业务处理层处理之后封装成一个Model，然后再把该Model返回给对应的View进行展示。在Spring MVC中提供了一个非常简便的定义Controller...

  • spring.cache 随笔0 集成设计

    0. 最近感觉 “困意驱动睡眠” 也有他的意义 spring cache学习（一）：spring cache注解简单了解 Java Caching JSR107介绍 同样，本章也会简单的集成redisson作为缓存服务 1. 从我们自己写的javaConfig开始吧 @...

Global site tag (gtag.js) - Google Analytics