自我介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

安装

Npm

npm install art-template --save

在浏览器中实时编译

下载：template-web.js（先引入）

在浏览器中预编译

使用 Webpack 的 Loader: art-template-loader。

模板变量

template.defaults.imports

模板通过 $imports 可以访问到模板外部的全局变量与导入的变量。

导入变量

template.defaults.imports.log = console.log;

内置变量清单

• $data 传入模板的数据
• $imports 外部导入的变量以及全局变量
• print 字符串输出函数
• include 子模板载入函数
• extend 模板继承模板导入函数
• block 模板块声明函数

语法

输出

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

模板一级特殊变量可以使用 $data 加下标的方式访问：

{{$data['user list']}}

原文输出

{{@ value }}

条件

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环

{{each target}}
    {{$index}} {{$value}}
{{/each}}

1. target 支持 array 与 object 的迭代，其默认值为 $data。
2. $value 与 $index 可以自定义：{{each target val key}}。

变量

{{set temp = data.sub.content}}

模板继承

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

子模板

{{include './header.art'}}
{{include './header.art' data}}

过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};