高性能 JavaScript 模板引擎 Art-template 使用方法

Question

Art-template 是一个款性能卓越的 JavaScript 模板引擎，它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

特点

快速

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

调试

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

Browser Debug：

语法

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

• 拥有接近 JavaScript 渲染极限的的性能
• 调试友好：语法、运行时错误日志精确到模板所在行；支持支持在模板文件上打断点（Webpack Loader）
• 支持压缩输出页面中的 HTML、CSS、JS 代码
• 支持 Express、Koa、Webpack
• 支持模板继承与子模板
• 兼容 EJS、Underscore、LoDash 模板语法
• 模板编译后的代码支持在严格模式下运行
• 支持 JavaScript 语句与模板语法混合书写
• 支持自定义模板的语法解析规则
• 浏览器版本仅 6KB 大小

用法

1、使用

引用简洁语法的引擎版本，例如下面：

<script src="dist/template.js"></script>

2、表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

3、输出表达式

对内容编码输出：{{content}}
不编码输出：{{#content}}

编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

4、条件表达式

{{if admin}}
 <p>admin</p>
{{else if code > 0}}
 <p>master</p>
{{else}}
 <p>error!</p>
{{/if}}

5、遍历表达式

{{each list as value index}}
 <li>{{index}} - {{value.user}}</li>
{{/each}}

6、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：

{{include 'template_name' news_list}}

相关链接

• 英文文档：http://aui.github.io/art-template/docs/
• template.js (简洁语法版, 2.7kb)
• template-native.js (原生语法版, 2.3kb)
• 中文帮助手册