简介
art-template是一个简约、执行速度超快的模板引擎。它采用作用域声明的技术来优化模板渲染速度，从而获得接近 Javascript 极限的运行性能，并且同时支持 NodeJs和浏览器。使用art-template 便于代码的维护，以前我们渲染数据是以字符串模板的形式在 js 文件中写入的 html 内容，如果 html内容需要修改，我们需要在 js 中修改。而用了模板引擎后，我们只需要在 html 文件中修改 html 内容。还有就是使用模板引擎操作DOM，效率也会更高一些。
art-template的特性：
- 拥有接近 Javascript 极限的运行性能；
- 调试友好：语法、运行时错误日志精确到模板所在行，支持在模板文件上打断点（Webpack Loader）；
- 支持 Express、Koa、Webpack；
- 支持模板继承与子模板；
- 浏览器版本仅 6KB 大小；
安装
可以在命令行中使用如下命令：
npm install art-template --save
也可以直接下载 js 文件，进入链接 Ctrl+s 保存文件至项目目录中：template-web.js（gzip:6kb 这个源码是压缩过的）
语法
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法且有强大的逻辑处理能力。（例如在使用循环时，标准语法只能使用 each 循环遍历，而原始语法还可以使用 for、while等循环）
标准语法支持基本模板语法以及基本 Javascript 表达式；原始语法支持任意 Javascript 语句，原始语法兼容 EJS、Underscore、LoDash模板。
标准语法：
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
//变量
{{set name="Lily"}}
//条件
{{if user==="aaa"}}
<h2>{{user.name}}</h2>
{{else if user==="bbb"}}
<h2>{{user.title}}</h2>
{{/if}}
//循环，$index和$value，可以自定义：{{each data val key}}
{{each data}}
{{$index}} {{$value}}
{{/each}}
原始语法：
注意：<% %>与<%= %>的区别在于，<% %>里面是 Js 语句，<%= %>里面是表达式。
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
//变量
<%= var name="Lily" %>
//条件
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
//循环，data 支持 array 与 object 的迭代，其默认值为 $data
<% for(var i = 0; i < data.length; i++){ %>
<%= i %> <%= data[i] %>
<% } %>
核心方法
// 基于模板名渲染模板
template(filename, data);// 将模板源代码编译成函数，返回一个渲染函数
template.compile(source, options);// 将模板源代码编译成函数并立刻执行，返回渲染结果
template.render(source, data, options);
template.render(source, data, options)
- source，是 Html 模板字符串，我们可以使用 webpack 的 string-loader 插件将html文件内容转成字符串。
- data，是要渲染的数据。
- options，是一个 template.defaults 中的配置对象。
var html = template.render('hi, {{value}}', {value: 'Max'});
console.log(html);//hi,Max
使用
我们在这里使用 template.render( source,data )
使用下载 js 文件的方式，在html文件中引入 template-web.js。
<script src="./libs/template-web.js"></script>
设置 webpack.config 配置，将html文件转成字符串：
loaders: [ { test: /.html$/, loader: “string” } ]
list.html 文件内容如下：
<ul>
{{each datalist}}
<li>$value['text']</li>
{{/each}}
</ul>
list.js 文件内容如下：
//引入html文件
import ItemTpl from "./list.html";
//要渲染的数据
var data=[
{text: 'option1'},
{text: 'option2'}
]
//将data数据传到list.html文件中
let html=template.render(ItemTpl,{datalist:data});
console.log(html); //html: '<ul><li>option1</li><li>option2</li></ul>'