JavaScript模板引擎 - Elapse

背景：

用于公司项目，产品诉求：

1，可编译，高性能。

2，简单/灵活的include

3，简洁的语法

 

故决定自行开发一个引擎名为：Elapse

 

 

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

模板：

				<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”参数接收了模板源文件，系统才认为得到了此模板。你对模板加载大可放心，一切都由引擎调度好了。

 

最终产品特点：

        1，语法简单。由于我们是基于JS语法，并做增强，所以学习成本低。且功能强大。

          2，可编译，高性能。经测试，编译后的运行效率和市面上大部分模板引擎效率持平，或更高。

          3，简单的include。只需配置一个loader（加载器），便可支持各种模板来源，并自动从来源获取模板。

 

详细文档见附件，打开guide.html即文档，勿用ie查看，文档样式不兼容。

项目开源，github：https://github.com/yinhang/Elapse

 

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