介绍
art-template 是JavaScript模板引擎,是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。在线速度测试。
下面介绍的点是个人常用到的,不常用的并没介绍
特性
- 拥有接近 JavaScript 渲染极限的的性能
- 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
- 支持 Express、Koa、Webpack
- 支持模板继承与子模板
- 浏览器版本仅 6KB 大小
模板
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写;原始语法具有强大的逻辑处理能力。
标准语法
{{if user}} |
原始语法
<% if (user) { %> |
原始语法兼容 EJS、Underscore、LoDash 模板。
安装
Npm
npm install art-template --save |
在浏览器中实时编译
下载:template-web.js(gzip: 6kb)
兼容
IE8+(IE8 需要补丁才能运行。示例)
差异
因为浏览器不支持文件系统,所以 template(filename, data)
不支持传入文件路径,它内部使用 document.getElementById(filename).innerHTML
来获取模板,例如:
<script src="lib/template-web.js"></script> |
在浏览器中预编译
使用 Webpack 的 Loader: art-template-loader。
插件
- Webpack: art-template-loader
- Express: express-art-template
- Koa: koa-art-template
语法
art-template 支持标准语法与原始语法。标准语法可以让模板易读写,而原始语法拥有强大的逻辑表达能力。
标准语法支持基本模板语法以及基本 JavaScript 表达式;原始语法支持任意 JavaScript 语句,这和 EJS 一样。
输出
标准语法
{{value}} |
模板一级特殊变量可以使用 $data
加下标的方式访问:
{{$data['user list']}}
|
原文输出
标准语法
{{@ value }} |
原文输出语句不会对 HTML
内容进行转义处理,可能存在安全风险,请谨慎使用。
条件
标准语法
{{if value}} ... {{/if}} |
循环
标准语法
{{each target}} |
{{each target $vallist $indexcomment}} |
模板继承target
支持array
与object
的迭代,其默认值为$data
。$value
与$index
可以自定义:{{each target val key}}
。
标准语法
{{extend './layout.art'}} |
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例:
<!--layout.art--> |
<!--index.art--> |
渲染 index.art 后,将自动应用布局骨架。
子模板
标准语法
{{include './header.art'}} |
data
数默认值为$data
;标准语法不支持声明object
与array
,只支持引用变量,而原始语法不受限制。- art-template 内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。
过滤器
注册过滤器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; |
过滤器函数第一个参数接受目标值。
标准语法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}} |
{{value | filter}}
过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
如果想修改 {{
}}
与 <%
%>
,请参考 解析规则。
调试
template.defaults.debug
art-template 内建调试器,能够捕获到语法与运行错误,并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启:process.env.NODE_ENV !== 'production'
设置 template.defaults.debug=true
后,等同于:
{ |
更多参见 选项。
模板变量
template.defaults.imports
模板通过 $imports
可以访问到模板外部的全局变量与导入的变量。
导入变量
template.defaults.imports.log = console.log; |
内置变量清单
$data
传入模板的数据$imports
外部导入的变量以及全局变量print
字符串输出函数include
子模板载入函数extend
模板继承模板导入函数block
模板块声明函数
解析规则
template.defaults.rules
art-template 可以自定义模板解析规则,默认配置了原始语法与标准语法。
修改界定符
// 原始语法的界定符规则 |
它们是一个正则表达式,你可以只修改界定符部分。例如修改 <%
%>
为 <?
?>
:
var rule = template.defaults.rules[0]; |
添加语法
从一个简单的例子说起,让模板引擎支持 ES6 ${name}
模板字符串的解析:
template.defaults.rules.push({ |
其中 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 = {
|
选项
template.defaults
// 模板名
|