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 () { %>
...
<% }) %>

模板继承允许你构建一个包含站点共同元素的基本”模板骨架“，例如：

<!--layout.art-->
<!doctype html>
<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);
//<ul><li>option1</li><li>option2</li></ul>

蒲公英芽

发布了130 篇原创文章 · 获赞 46 · 访问量 3万+

私信关注

art-template 模板引擎的使用