JavaScript模板发动机 - Elapse

JavaScript模板引擎 - Elapse背景：用于公司项目，产品诉求：1，可编译，高性能。2，简单/灵活的include3，简洁的

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

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

1 楼 rambolovepanda 2012-07-02   您能否给一个 ajax调用的案例我对你的include还是不太了解！勿喷我是小白 2 楼 little_shieh 2012-08-13   有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.

<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>
3 楼 little_shieh 2012-08-13   little_shieh 写道有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.

<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊 4 楼 satanultra 2012-08-13   \${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。另外检查一下你的数据。
little_shieh 写道little_shieh 写道有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.

<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊 5 楼 little_shieh 2012-08-27   不加\的话，模板引擎认为是语法错误，
加了\后，数据出来了，但是在不同的浏览器下的表现不同。
我现在改用 jquery-jtemplates.js 了。

satanultra 写道 \${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。另外检查一下你的数据。
little_shieh 写道little_shieh 写道有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.

<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊
satanultra 写道 \${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。另外检查一下你的数据。
little_shieh 写道little_shieh 写道有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.

<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊