art-template学习（二）之语法

语法

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

一、输出

标准语法

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

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

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

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

二、原文输出

标准语法

{{@ value }}

原始语法

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

三、条件

标准语法

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

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

四、循环

标准语法

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

{{each target $vallist $indexcomment}}
    {{$vallist}} {{$indexcomment}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

1、模板继承target 支持 array 与 object 的迭代，其默认值为 $data。

2、$value 与 $index 可以自定义：{{each target val key}}。

五、变量

标准语法

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

原始语法

<% var temp = data.sub.content; %>

六、模板继承

标准语法

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

原始语法

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

<!--index.art-->
{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

渲染 index.art 后，将自动应用布局骨架。

子模板

标准语法

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

原始语法

<% include('./header.art') %>
<% include('./header.art', data) %>

1、data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。

2、art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。

过滤器

注册过滤器

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

过滤器函数第一个参数接受目标值。

标准语法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

如果想修改 {{ }} 与 <% %>，请参考解析规则。

注释

artTemplate的注释和html一样

调试

template.defaults.debug

art-template 内建调试器，能够捕获到语法与运行错误，并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启：process.env.NODE_ENV !== 'production'

设置 template.defaults.debug=true 后，等同于：

{
    "cache": false,
    "minimize": false,
    "compileDebug": true
}

更多参见选项。

模板变量

template.defaults.imports

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

导入变量

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

$imports.log("hello world")

内置变量清单

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

解析规则

template.defaults.rules

art-template 可以自定义模板解析规则，默认配置了原始语法与标准语法。

修改界定符

// 原始语法的界定符规则
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ 	]*([wW]*?)[ 	]*(-?)%>/;
// 标准语法的界定符规则
template.defaults.rules[1].test = /{{([@#]?)[ 	]*(/?)([wW]*?)[ 	]*}}/;

它们是一个正则表达式，你可以只修改界定符部分。例如修改 <% %> 为 <??>：

var rule = template.defaults.rules[0];
rule.test = new RegExp(rule.test.source.replace('<%', '<\?').replace('%>', '\?>'));

添加语法

从一个简单的例子说起，让模板引擎支持 ES6 ${name} 模板字符串的解析：

template.defaults.rules.push({
    test: /${([wW]*?)}/,
    use: function(match, code) {
        return {
            code: code,
            output: 'escape'
        }
    }
});

其中 test 是匹配字符串正则，use 是匹配后的调用函数。关于 use 函数：

参数：一个参数为匹配到的字符串，其余的参数依次接收 test 正则的分组匹配内容
返回值：必须返回一个对象，包含 code 与 output 两个字段：
- code 转换后的 JavaScript 语句
- output 描述 code 的类型，可选值：
  - 'escape' 编码后进行输出
  - 'raw' 输出原始内容
  - false 不输出任何内容

值得一提的是，语法规则对渲染速度没有影响，模板引擎编译器会帮你优化渲染性能。

压缩页面

template.defaults.minimize

art-template 内建的压缩器可以压缩 HTML、JS、CSS，它在编译阶段运行，因此完全不影响渲染速度，并且能够加快网络传输。

开启

template.defaults.minimize = true;

配置

参见：https://github.com/kangax/html-minifier

默认配置

template.defaults.htmlMinifierOptions = {
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true,
    // 运行时自动合并：rules.map(rule => rule.test)
    ignoreCustomFragments: []
};

选项

template.defaults

// 模板名
filename: null,

// 模板语法规则列表
rules: [nativeRule, artRule],

// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true,

// 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,

// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,

// 是否开启缓存
cache: true,

// 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
// 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
minimize: true,

// 是否编译调试版
compileDebug: false,

// 模板路径转换器
resolveFilename: resolveFilename,

// 子模板编译适配器
include: include,

// HTML 压缩器。仅在 NodeJS 环境下有效
htmlMinifier: htmlMinifier,

// HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
htmlMinifierOptions: {
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true,
    // 运行时自动合并：rules.map(rule => rule.test)
    ignoreCustomFragments: []
},

// 错误事件。仅在 bail 为 false 时生效
onerror: onerror,

// 模板文件加载器
loader: loader,

// 缓存中心适配器（依赖 filename 字段）
caches: caches,

// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',

// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',

// 忽略的变量。被模板编译器忽略的模板变量列表
ignore: [],

// 导入的模板变量
imports: runtime

参考

官网

artTemplate

art-template学习（二）之语法

语法

一、输出

标准语法

原始语法

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

二、原文输出

标准语法

原始语法

三、条件

标准语法

原始语法

四、循环

标准语法

原始语法

五、变量

标准语法

原始语法

六、模板继承

标准语法

原始语法

子模板

标准语法

原始语法

过滤器

注册过滤器

注释

调试

模板变量

导入变量

内置变量清单

解析规则

修改界定符

添加语法

压缩页面

开启

配置

选项

参考

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