2个高性能的JS模板引擎推荐：artTemplate和juicer

前端开发工程师喜爱的js模板引擎是淘宝的 juicer 和腾讯的 artTemplate。

一、artTemplate

---

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。对 NodeJS Express 友好支持。
在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

核心方法

// 基于模板名渲染模板
template(filename, data);
使用template方法需要将模板放在body的一级元素否则会报错：
报错:[ERROR] : Template Error



lottery_list



Render Error



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
my name is {{name}}
{{each data as value i}}
say {{value}}
{{/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}