怎样在webpack中使用 art-template 模板引擎， art-template详解
1 简介
art-template是一个简约、执行速度超快的模板引擎。它采用作用域声明的技术来优化模板渲染速度，从而获得接近 Javascript 极限的运行性能，并且同时支持 NodeJs和浏览器。使用art-template 便于代码的维护，以前我们渲染数据是以字符串模板的形式在 js 文件中写入的 html 内容，如果 html内容需要修改，我们需要在 js 中修改。而用了模板引擎后，我们只需要在 html 文件中修改 html 内容。还有就是使用模板引擎操作DOM，效率也会更高一些。
art-template的特性：
- 拥有接近 Javascript 极限的运行性能；
- 调试友好：语法、运行时错误日志精确到模板所在行，支持在模板文件上打断点（Webpack Loader）；
- 支持 Express、Koa、Webpack；
- 支持模板继承与子模板；
- 浏览器版本仅 6KB 大小；
2 安装
可以在命令行中使用如下命令：
npm install art-template --save
也可以直接下载 js 文件，进入链接 Ctrl+s 保存文件至项目目录中：template-web.js（gzip:6kb 这个源码是压缩过的）
3 语法
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法且有强大的逻辑处理能力。（例如在使用循环时，标准语法只能使用 each 循环遍历，而原始语法还可以使用 for、while等循环）
标准语法支持基本模板语法以及基本 Javascript 表达式；原始语法支持任意 Javascript 语句，原始语法兼容 EJS、Underscore、LoDash模板。
3.1 输出
标准语法：
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法：
注意：<% %>与<%= %>的区别在于，<% %>里面是 Js 语句，<%= %>里面是表达式。
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
3.2 原文输出
原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。
//标准语法
{{@ value}}
//原始语法
<%- value %>
3.3 条件输出
//标准语法
{{if user==="aaa"}}
<h2>{{user.name}}</h2>
{{else if user==="bbb"}}
<h2>{{user.title}}</h2>
{{/if}}
//原始语法
<% if (user==="aaa") { %>
<h2><%= user.name %></h2>
<% else if (user==="bbb"){ %>
<h2><%= user.title %></h2>
<% } %>
3.4 循环输出
- 当target 为数组时，
$index 为数组的下标，$value 为下标对应的值； - 当target 为对象时，
$index 为key，$value 为对应的value值； - target 的默认值为 $data，也就是传入模板的原始数据对象；
- $index 和 $value，可以自定义：
{{each data val key}};
//标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
//自定义键值名称，下面写法的结果和上面的一样
{{each target item prop}}
{{prop}} {{item}}
{{/each}}
//原始语法，data 支持 array 与 object 的迭代，其默认值为 $data
<% for(var i = 0; i < data.length; i++){ %>
<%= i %> <%= data[i] %>
<% } %>
3.5 自定义变量
//标准语法
{{set name="Lily"}}
{{set temp = data.sub.content}}
//原始语法
<%= var name="Lily" %>
<% var temp = data.sub.content; %>
3.6 模板继承
//标准语法
{{extend './layout.html'}}
{{block 'head'}}
...
{{/block}}
//原始语法
<% extend ('./layout.html') %>
<% block('head', function () { %>
...
<% }) %>
模板继承允许你构建一个包含站点共同元素的基本”模板骨架“，例如：
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
head>
<body>
{{block 'content'}}{{/block}}
body>
html>
<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
渲染index.art 后，将自动应用布局骨架。
3.7 子模板
//标准语法
{{include './header.art'}}
{{include './header.art' data}}
//原始语法
<% include('./header.art') %>
<% include('./header.art', data) %>
4 调试
template.defaults.debug
art-template 内建调试器，能够捕获到语法与运行错误，并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启：process.env.NODE_ENV !== ‘production’
设置 template.defaults.debug=true 后，等同于：
{
"cache": false,
"minimize": false,
"compileDebug": true
}
5 模板变量
template.defaults.imports
模板通过 $imports 可以访问到模板外部的全局变量与导入的变量。
导入变量，imports.log = console.log
template.defaults.imports.log = console.log;
使用的时候就可以直接用 $imports.log
<% $imports.log('hello world') %>
内置变量清单
$data传入模板的数据$imports外部导入的变量以及全局变量print字符串输出函数include子模板载入函数extend模板继承模板导入函数block模板块声明函数
6 核心方法
// 基于模板名渲染模板
template(filename, data);// 将模板源代码编译成函数，返回一个渲染函数
template.compile(source, options);// 将模板源代码编译成函数并立刻执行，返回渲染结果，一般都用这个
template.render(source, data, options);
来看一个例子，html模板内容如下：
<div id="content">
<script type="text/html" id="tpl">
{{if user}}
<h2>名字为：{{user.name}}</h2>
<p>年龄为：{{user.age}}岁</p>
{{/if}}
script>
div>
6.1 template(id, data)
- 基于模板名渲染模板，第一个参数为模板id ，即script 标签的 id；
- script 标签的type 属性，可以是”text/html"，或者"text/template"，不能是“text/script"；
- 模板的script 标签必须在template()方法调用的script 标签之前；
使用该方法的方式为：
var data = {
name: '张三',
age:18
}
//第一个参数为模板的id，第二个参数为要传入的数据
var html = template('tpl', {user: data});
//插入dom
document.getElementById("content").innerHTML=html;
最后结果为:
<div id="content">
<h2>名字为：张三h2>
<p>年龄为：18岁p>
div>
6.2 template.compile(source)(data)
- source，为html模板字符串；
- 该方法最后返回一个渲染函数，数据需要以参数的形式传进去；
还是上面的例子：
var data = {
name: '李四',
age:20
}
//获取html结构
var tpl=document.getElementById("tpl").innerHTML;
//生成模板
var render = template.compile(tpl);
//渲染html结构
var html = render({user: data});
//插入dom
document.getElementById("content").innerHTML=html;
最后结果为
<div id="content">
<h2>名字为：李四h2>
<p>年龄为：20岁p>
div>
6.3 template.render(source, data)
将模板源代码编译成函数并立刻执行，返回渲染结果。这个方法是工作中最常用的。
- 使用方法跟第一种方法类似，只是这里的第一个参数不是 script 标签的id ，而是html模板字符串。
- source，是
Html 模板字符串，我们可以使用 webpack 的 string-loader 插件将html文件内容转成字符串。 - data，是要
渲染的数据。
还是上面的例子：
var data = {
name: '王五',
age:21
}
//获取html结构
var tpl=document.getElementById("tpl").innerHTML;
//生成模板
var html = template.render(tpl,{user:data});
//插入dom
document.getElementById("content").innerHTML=html;
最后结果为
<div id="content">
<h2>名字为：王五h2>
<p>年龄为：21岁p>
div>
7 使用
在webpack 中使用 art-template，我们在这里使用 template.render( source,data )
使用下载 js 文件的方式，在html文件中引入 template-web.js。
<script src="./libs/template-web.js">script>
设置 webpack.config 配置，使用string-loader将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);
//- option1
- option2