背景：

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

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}
						颜色${co