Elapse：开源的 JavaScript 模板引擎

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

 

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