JavaScript模板引擎
背景：用于公司项目，产品诉求：
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 = 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
欢迎你的使用，并期待加入此项目一同开发。
页:
[1]