art-template 是一个性能出众、设计巧妙的模板引擎，无论在 NodeJS 还是在浏览器中都可以运行。
- 针对 NodeJS 与 V8 引擎优化，渲染速度出众
- 支持编译、运行时调试，可定位语法错、渲染错误的模板语句
- 兼容 EJS、Underscore、LoDash 模板语法
- NodeJS 支持
require(templatePath)方式载入模板文件（默认后缀.art） - 支持 ES 严格模式环境运行
- 同时支持原生 JavaScript 语法、简约语法
- 支持定义模板的语法规则
- 支持在浏览器运行，仅 5KB 大小
npm install [email protected] --save
<!--./tpl-user.html-->
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>var template = require('art-template');
var html = template(__diranme + '/tpl-user.html', {
user: {
name: 'aui'
}
});<script id="tpl-user" type="text/html">
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
</script>
<script src="art-template/lib/template.js"></script>
<script>
var html = template('tpl-user', {
user: {
name: 'aui'
}
});
</script>// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);art-template 同时支持 {{expression}} 简约语法与任意 JavaScript 表达式 <% expression %>。
{{if user}}
<h2>{{user.name}}</h2>
<ul>
{{each user.tags}}
{{$value}}
{{/each}}
</ul>
{{/if}}等价：
<% if (user) { %>
<h2><%= user.name %></h2>
<ul>
<% for(var i = 0; i < user.tags.length; i++){ %>
<%= user.tags[i] %>
<% } %>
</ul>
<% } %>{{value}}<%= value %>{{@value}}<%- value %>原始输出语句不会对 HTML 内容进行转义。
{{if value}}
[...]
{{else if value2}}
[...]
{{/if}}<% if (value) { %>
[...]
<% else if (value2) { %>
[...]
<% } %>{{each target}}
{{$index}} {{$value}}
{{/each}}target支持Array与Object的迭代，其默认值为$data$value与$index可以自定义：{{each target val key}}
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>{{set temp = data.sub.content}}<% var temp = data.sub.content; %>{{include './header.html' $data}}<% include('./header.html', $data) %>include 第二个参数默认值为 $data，可以自定义。
<% print(val, val2, val3) %>// 向模板中导入过滤器
template.imports.$dateFormat = function(date, format){/*[code..]*/};
template.imports.$timestamp = function(value){return value * 1000};{{date | $timestamp | $dateFormat 'yyyy-MM-dd hh:mm:ss'}}<%= $dateFormat($timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>$data传入模板的数据{Object|array}$imports外部导入的所有变量，等同template.imports{Object}print字符串输出函数{function}include子模板载入函数{function}
如果数据中有特殊 key，可以通过
$data加下标的方式访问，例如$data['user-list']
template.imports.$console = console;<% $console.log('hello world') %>模板外部所有的变量都需要使用 template.imports 注入、并且要在模板编译之前进行声明才能使用。
缓存默认是开启的，开发环境中可以关闭它：
template.defaults.cache = false;从一个简单的例子说起，让模板引擎支持同时 ES6 ${name} 模板字符串的解析：
template.defaults.rules.push({
test: /\${([\w\W]*?)}/,
use: function(match, code) {
return {
code: code,
output: 'escape'
}
}
});其中 test 是匹配字符串正则，use 是匹配后的调用函数。关于 use 函数：
- 参数：一个参数为匹配到的字符串，其余的参数依次接收
test正则的分组匹配内容 - 返回值：必须返回一个对象，包含
code与output两个字段：code转换后的 JavaScript 语句output描述code的类型，可选值：'escape'编码后进行输出'raw'输出原始内容false不输出任何内容
创造一个 <?js expression ?> 语法模板：
<?js if (user) { ?>
<h2><?js= user.name ?></h2>
<?js } ?>template.defaults.rules.push({
test: /<\?js([=-]?)([\w\W]*?)\?>/,
use: function(match, output, code) {
output = ({
'=': 'escape',
'-': 'raw',
'': false
}}[output];
return {
code: code,
output: output
}
}
});
- 如果你需要创造一个非 JavaScript 的语法规则，可以在
use函数中使用this.getEsTokens(code)获取code的esTokens来辅助解析- 多个规则会同时生效
引入 art-template/lib/extension 后，NodeJS 支持使用 require() 来加载 .art 后缀的模板文件。
require('art-template/lib/extension');
var view = require('./index.art');
var html = view(data); 根据模板名渲染模板。
var html = template('/welcome.html', {
value: 'aui'
});在浏览器中，
filename请传入存放模板的元素id在 NodeJS 中，
filename如果非绝对路径，则会根据options.root来定位模板
编译模板并缓存。
// compile && cache
template('/welcome.html', 'hi, <%=value%>.');
// use
template('/welcome.html', {
value: 'aui'
});编译模板并返回一个渲染函数。
var render = template.compile('hi, <%=value%>.');
var html = render({value: 'aui'});编译并返回渲染结果。
var html = template.render('hi, <%=value%>.', {value: 'aui'});模板引擎默认配置。参考 选项。
向模板中注入上下文。这是 template.defaults.imports 的快捷方式。
template.imports.$parseInt = parseInt;<%= $parseInt(value) %>template.defaults
{
// 模板名字
filename: null,
// 模板语法规则
rules: [nativeRule, artRule],
// 是否支持对模板输出语句进行编码。为 false 则关闭编码输出功能
escape: true,
// 模板路径转换器
resolveFilename: resolveFilename,
// 缓存控制接口（依赖 filename 字段）。为 false 则关闭缓存
cache: cache,
// HTML 压缩器
compressor: null,
// 导入的模板变量
imports: {
$each: each,
$escape: escape,
$include: include
},
// 调试处理函数
debug: debug,
// 模板文件加载器
loader: loader,
// 是否编译调试版。编译为调试版本可以在运行时进行 DEBUG
compileDebug: false,
// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: false,
// 模板根目录。Node 环境专用
root: '/'
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent