提示：art-template项目已停止维护，未防止官网文档某一天也打不开，特此备份。

提示：本文档不含原始语法

art-template 使用文档

art-template 是一个简约、超快的模板引擎，采用作用域预声明技术优化渲染速度，同时支持 NodeJS 和浏览器。

特性

  1. 拥有接近 JavaScript 渲染极限的性能
  2. 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
  3. 支持 Express、Koa、Webpack
  4. 支持模板继承与子模板
  5. 浏览器版本仅 6KB 大小

一、标准语法

art-template 支持标准语法与原始语法。本文档仅涵盖标准语法，使用 {{ }} 作为界定符。

1.1 输出

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

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

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

1.2 原文输出

{{@ value}}

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

1.3 条件判断

{{if value}} ... {{/if}}

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

1.4 循环

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

说明：

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

1.5 变量

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

1.6 模板继承

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

布局模板 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 后，将自动应用布局骨架。

1.7 子模板

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

说明：

  • data 默认值为 $data
  • 标准语法不支持声明 object 与 array，只支持引用变量
  • art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外"优化"

1.8 过滤器

注册过滤器：

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

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

使用过滤器：

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

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

二、核心方法

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

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

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

三、模板变量

3.1 导入变量

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

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

在模板中使用：

{{log('hello world')}}

3.2 内置变量清单

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

四、调试

template.defaults.debug

art-template 内建调试器，能够捕获到语法与运行错误，并且支持自定义的语法。

4.1 自动开启

在 NodeJS 中调试模式会根据环境变量自动开启：

process.env.NODE_ENV !== 'production'

4.2 手动开启

template.defaults.debug = true;

设置后等同于：

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

五、解析规则

template.defaults.rules

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

5.1 修改界定符

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

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

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

5.2 添加语法

例如让模板引擎支持 ES6 ${name} 模板字符串的解析：

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

use 函数说明：

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

语法规则对渲染速度没有影响，模板引擎编译器会自动优化渲染性能。

六、压缩页面

template.defaults.minimize

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

6.1 开启

template.defaults.minimize = true;

6.2 默认配置

基于 html-minifier：

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

七、选项

template.defaults

选项 类型 默认值 说明
filename string null 模板名
rules Array [nativeRule, artRule] 模板语法规则列表
escape boolean true 是否开启对模板输出语句自动编码功能（可防范 XSS 攻击）
debug boolean NodeJS 下根据环境变量自动判断 启动调试模式。为 true 时等同于 {cache:false, minimize:false, compileDebug:true}
bail boolean true 为 true 时，编译错误与运行时错误都会抛出异常
cache boolean true 是否开启缓存
minimize boolean true 是否开启压缩（运行 htmlMinifier）。如果模板包含未闭合的 HTML 标签，请不要打开
compileDebug boolean false 是否编译调试版
resolveFilename function resolveFilename 模板路径转换器
include function include 子模板编译适配器
htmlMinifier function htmlMinifier HTML 压缩器（仅 NodeJS 有效）
htmlMinifierOptions Object 见上方默认配置 HTML 压缩器配置
onerror function onerror 错误事件（仅在 bail 为 false 时生效）
loader function loader 模板文件加载器
caches Object caches 缓存中心适配器（依赖 filename 字段）
root string '/' 模板根目录。如果 filename 不是本地路径，则在 root 查找模板
extname string '.art' 默认后缀名。没有后缀名时会自动添加
ignore Array [] 被模板编译器忽略的模板变量列表
imports Object runtime 导入的模板变量

八、API

8.1 template(filename, content)

根据模板名渲染模板。

参数：

参数 类型 说明
filename string 模板名
content Object / string 数据对象或模板源代码

返回值：

  • content 为 Object → 渲染模板并返回 string
  • content 为 string → 编译模板并返回 function

示例：

// 渲染模板
var html = template('/welcome.art', {
    value: 'aui'
});

// 编译模板并缓存
template('/welcome.art', 'hi, {{value}}.');

// 使用缓存的模板
template('/welcome.art', {
    value: 'aui'
});

浏览器版本无法加载外部文件，filename 为存放模板的元素 id。

8.2 template.compile(source, options)

编译模板并返回一个渲染函数。

参数：

参数 类型
source string
options Object

返回值： function

示例：

var render = template.compile('hi, {{value}}.');
var html = render({ value: 'aui' });

8.3 template.render(source, data, options)

编译并返回渲染结果。

参数：

参数 类型
source string
data Object
options Object

返回值： string

示例：

var html = template.render('hi, {{value}}.', { value: 'aui' });

8.4 template.defaults

模板引擎默认配置对象，类型 Object。参见 选项 章节。

8.5 template.extension

给 NodeJS require.extensions 注册的模板渲染函数。类型 Object。

加载 .ejs 模板：

var template = require('art-template');
require.extensions['.ejs'] = template.extension;

var view = require('./index.ejs');
var html = view(data);

加载 .art 模板（已默认注册）：

var template = require('art-template');
var view = require('./index.art');
var html = view(data);

⚠️ 此功能仅对 NodeJS 生效。在浏览器中使用模板文件渲染请使用 Webpack art-template-loader。

九、浏览器中使用

在浏览器中，模板通常存放在 <script> 标签内，通过 id 引用：

<script id="tpl" type="text/html">
    {{if user}}
      <h2>{{user.name}}</h2>
    {{/if}}
</script>

var html = template('tpl', {
    user: {
        name: 'aui'
    }
});
document.getElementById('content').innerHTML = html;

关键词：art-template
所属分类：网站技术
本文地址：https://me.i-i.me/article/81.html

评论提示: 点击头像可以回复评论

提交取消回复
[face]@
[uname]  [add_time]
[content]
[reply]
加载更多评论