无处不在,搜你所想

一、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.jsvar 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 data as value i}}{{/each}}

5、子模板嵌套

{{each data as value i}}{{/each}}

作者：milletmi
链接：https://www.jianshu.com/p/150d62a2e5a7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。