art-template高性能JavaScript模板引擎

art-template是一款高性能的JavaScript模板引擎，按照官方首页的描述，它是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。主要有下列几个优点：

1、快速
在编译阶段优化，带来近乎极限的运行速度。


2、调试
无论语法还是运行时错误，都能定位到模板所在行。


3、语法
使用简单的模板语法，同时支持原始 JavaScript 语句、兼容 EJS 模板。


4、轻量
浏览器版本仅 6KB 大小（Gzip）。

一、安装
Npm 在浏览器中实时编译
下载：template-web.js（gzip: 6kb）

兼容
IE8+（IE8 需要补丁才能运行。示例）

差异
因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：  在浏览器中预编译
使用 Webpack 的 Loader: art-template-loader：https://aui.github.io/art-template/zh-cn/webpack

插件
Webpack: art-template-loader：https://aui.github.io/art-template/zh-cn/webpack
Express: express-art-template：https://aui.github.io/art-template/zh-cn/express
Koa: koa-art-template：https://aui.github.io/art-template/zh-cn/koa

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

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

输出

标准语法 原始语法 模板一级特殊变量可以使用 $data 加下标的方式访问： 原文输出

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

条件

标准语法 原始语法 循环

标准语法 原始语法     target 支持 array 与 object 的迭代，其默认值为 $data。
    $value 与 $index 可以自定义： 变量

标准语法 原始语法 模板继承

标准语法 原始语法 模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例： 渲染 index.art 后，将自动应用布局骨架。

子模板

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

过滤器

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

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

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

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

修改界定符 它们是一个正则表达式，你可以只修改界定符部分。例如修改 <% %> 为 <? ?>： 添加语法
从一个简单的例子说起，让模板引擎支持 ES6 ${name} 模板字符串的解析： 其中 test 是匹配字符串正则，use 是匹配后的调用函数。关于 use 函数：

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

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

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

设置 template.defaults.debug=true 后，等同于： 五、模板变量 模板通过 $imports 可以访问到模板外部的全局变量与导入的变量。

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

六、添加语法
    从一个简单的例子说起，让模板引擎支持 ES6 ${name} 模板字符串的解析：     其中 test 是匹配字符串正则，use 是匹配后的调用函数。关于 use 函数：

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

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

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

开启 配置
参见：https://github.com/kangax/html-minifier

默认配置 八、选项 九、API

 template(filename, content)
根据模板名渲染模板。

参数：
{string} filename
{Object,string} content
返回值：
如果 content 为 Object，则渲染模板并返回 string
如果 content 为 string，则编译模板并返回 function
var html = template('/welcome.art', {
    value: 'aui'
});

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

示例
编译模板并缓存。 .compile(source, options)
编译模板并返回一个渲染函数。

参数：
{string} source
{Object} options
返回值：{function}

示例 编译并返回渲染结果。

参数：
{string} source
{Object} options
返回值：{string}

示例 .defaults
模板引擎默认配置。参考 选项。

类型：{Object}

.extension
给 NodeJS require.extensions 注册的模板渲染函数。

类型：{Object}

示例
加载 .ejs 模板： .art 默认被注册，可以直接使用： 需要注意的是：此功能仅对 NodeJS 生效，如果要在浏览器中使用模板文件渲染功能，请使用 Webpack art-template-loader：https://aui.github.io/art-template/zh-cn/webpack