前端开发工程师喜爱的js模板引擎是淘宝的 juicer 和腾讯的 artTemplate。
一、artTemplate
artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。对 NodeJS Express 友好支持。
在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。
核心方法
// 基于模板名渲染模板
template(filename, data);
使用template方法需要将模板放在body的一级元素否则会报错：
报错:[ERROR] : Template Error
<filename>
lottery_list
<name>
Render Error
<message>
Template not found
// 将模板源代码编译成函数
template.compile(source, options)(data);
// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);
语法
1、循环
{{each data as value i}}{{/each}}
2、条件
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
3、原文输出，不转义
{{@ value }}
4、模版继承
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
demo
//main.js
var templateTpl = require("./template.art");
var obj = {
name:'Amy',
data:['hello','hi']
}
template.compile(templateTpl)(data);
//template.art
<p>my name is {{name}}</p>
{{each data as value i}}
<p>say {{value}}</p>
{{/each}}
二、Juicer
juicer是一个高效、轻量的前端 (Javascript) 模板引擎，效率和易用是它追求的目标。 除此之外，它还可以运行在 Node.js 环境中。
腾讯的artTemplate比较简洁，性能更高效。淘宝的juicer偏原生模板一点的写法。更具完善和灵活性一点。
核心方法
//编译模板并根据所给的数据立即渲染出结果.
juicer(tpl, data);
语法
1、变量
${变量}
2、条件
{@if} ... {@else if} ... {@else} ... {@/if}
3、原文输出，不转义
$${变量}
4、循环
{@each} ... {@/each}
{@each i in range(5, 10)}
${i}; //输出 5;6;7;8;9;
{@/each}
5、子模板嵌套
{@include tpl, data}
