art-template学习（一）之特性和安装

介绍

art-template 是JavaScript模板引擎，是一个简约、超快的模板引擎。

它采用预编译方式让性能有了质的飞跃，从而获得接近 JavaScript 极限的运行性能，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎

Mustache与 micro tmpl 的 25 、 32 倍。并且同时支持 NodeJS 和浏览器。在线速度测试。除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解

决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

特性

• 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍

• 拥有接近 JavaScript 渲染极限的的性能

• 调试友好：支持运行时调试，语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）

• 支持node、 Express、Koa、Webpack

• 支持模板继承与子模板

• 浏览器版本仅 6KB 大小

• 安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

• 支持所有流行的浏览器

• 模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

• 支持预编译，可将模板转换成为非常精简的 js 文件

• 可在浏览器端实现按路径加载模板

模板语法

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

原始语法

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

原始语法兼容 EJS、Underscore、LoDash 模板。

编写模板

<script id="test" type="text/html">

<h1>{{title}}</h1>

<ul>

    {{each list as value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

    {{/each}}

</ul>

</script>

 

渲染模板

方式一：浏览器

var data = {

    title: '标签',

    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

方式二：node，使用标准语法

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
　　user: {
　　　　name: 'aui'
　　}
});

方式三：node，使用原始语法

var template =require('art-template/node/template-native.js')
var html = template(__dirname + '/tpl-user.art', {
　　user: {
　　　　name: 'aui'
　　}
}); 

 

核心方法

// 基于模板名渲染模板，

template(filename, data);

// 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。

template(id, data)

// 将模板源代码编译成函数，返回渲染函数

template.compile(source, options); 

// 将模板源代码编译成函数并立刻执行，返回渲染结果

template.render(source, data, options);

// 添加辅助方法例如时间格式器

template.helper(name, callback)

// 更改引擎的默认配置

template.config(name,value)

 

 

安装

Npm

npm install art-template --save

在浏览器中实时编译

下载：template-web.js（gzip: 6kb）

• template.js (简洁语法版, 2.7kb)

• template-native.js (原生语法版, 2.3kb)

兼容

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

差异

因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

<script src="lib/template-web.js"></script>
<script id="tpl-user" type="text/html">
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
</script>

在浏览器中预编译

使用 Webpack 的 Loader: art-template-loader。

插件

• Webpack: art-template-loader

• Express: express-art-template

• Koa: koa-art-