我们接着上篇 《 前端模版引擎 - artTemplate 【上】 》 继续讲解 artTemplate 的最新版本 art-template
新版本的 art-template 据作者所说有以下的改变：
- 调试增强
支持运行时错误调试，编译错误调试。- 断点
使用 Webpack Loader 后可以输出 SourceMap，支持在浏览器中对模板进行断点调试。- 混合式语法
art-template 从 v3.0 开始默认采用的是简洁语法，相对于 ejs 式的语法，简洁语法优点是利于读写，弊端是逻辑控制非常有限，比如循环控制等。v4.0 同时支持两种语法，在功能与易用性之间取得较好的平衡。- 模板继承
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。- 自定义语法
[email protected] 支持应用多个模板解析规则。
阅读完其文档，新版的 artTemplate 大致的语法并有什么改变，新增了一下功能并修改了 API ，看起来是比旧版本的代码要优雅一点。文档我觉得是有点乱的，假如没有用过之前版本的话，小白上手比较麻烦，下面我尝试用自己的语言进行讲解。
没用过前面版本的同学，直接可以看下面这一段：
1. 简介
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
—— 来自某度
art-template 以优雅的方式解决你 web 开发中 dom 字符串拼接与数据绑定的工具
2. 使用环境
art-template 目前含有5种使用环境，区别与上一个版本，并没有开发 Grunt 跟 Gulp 的插件（ 因为他觉得 webpack 才是主流喔~ ），而是新增了两种基于 Node.js 平台下的 Express 与 Koa，同时 tmodjs 替换成 art-template-loader
a. NodeJS
$ cnpm install art-template --save
b. 浏览器版本
下载：template-web.js（gzip: 6kb）
c. Webpack 插件
art-template-loader
d. Express 插件
express-art-template
e. Koa 插件
koa-art-template
3. 语法
安装完 art-template 后，这里将会介绍如何编写其模板文件。其语法有原生跟简洁两种，因为简洁语法在循环条件的逻辑控制比较有限，同时该模板支持两种语法的并存，他们可以互助互补，所以下面我基本都是按照简洁语法说明在必要的时候才会加上原生语法。
a. 输出
别的不说，数据绑定肯定是第一项吧
{{value}} // 目前最常见的双花括号数据绑定
{{data.key}} // 对象点方式
{{data['key']}} // 另外一种对象处理方式
{{a ? b : c}} // 三元运算
{{a || b}} // 或运算 防止 undefined 报错
{{a + b}} // 并列输出
{{$data['list']}} // 官档说是为模板一级的特殊变量，我目前看不出它跟 {{value}} 有什么不同，应用场景有待发掘
b. 不转义
art-template 源码中就禁用了 html 片段转义成字符串了，要是想使用原文输出
{{@value}}
老版本的 # 也是可以用的
{{#value}}
c. 条件与循环
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
// 循环更老版本是改变了的，更简单了点，同时可以看出，并不能写更多的逻辑，只是单纯的循环数组
{{each target}}
{{$index}} {{$value}}
{{/each}}
// 可以采用原生语法，达到更多的逻辑实现
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
注意：
target 支持 array 与 object 的迭代，其默认值为 $data。
$value 与 $index 可以自定义：{{each target val key}}。
d. 变量
相对于老版本还新增加了变量的定义，确实对后台修改了参数名时，减少了人工替换的工作量
{{set temp = data.sub.content}}
e. 模板继承
新增的 “骨架” 继承也是一个挺好用的东西，只能在 NodeJS 中使用，或者采用 webpack 进行编译，原因是 js 中不能注入外部文件的机制
如何使用看后续
{{extend './layout.art'}} // 引入模板骨架
{{block 'head'}} ... {{/block}} // 需要替换的包裹标签
骨架 html
{{block 'title'}}My Site{{/block}}
{{block 'head'}}
{{/block}}
{{block 'content'}}{{/block}}
应用 index.html
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
{{/block}}
{{block 'content'}}
This is just an awesome page.
{{/block}}
f. 子模板
// 引入子模板，在浏览器版本中不能使用 url 的方式，只能采用 模板 ID 方式，与旧版本无异，可参考我的上一篇文章的使用方式
{{include './header.art'}}
{{include './header.art' data}}
g. 过滤器
跟旧版本一样的管道符机制，只是过滤器注册的方法改变了
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
template.defaults.imports.dateFormat = function(date, format){
/*[code..]*/
};
template.defaults.imports.timestamp = function(value){
return value * 1000
};
4. 使用方法
a. NodeJS
- 按上述语法编写模板文件，后缀可以用 .art 与其他 .html 文件区分（用不用都没关系）
- 编写 Node 的运行的 js 文件
// use
var template = require('art-template');
var html = template(__dirname + '/demo.art', {
user: {
name: 'Max-demo'
}
});
// compile && cache 这里提供一个动态编写模板方法，有这个业务需求可以选用，但一般都是我们本地自己编写好模板的
template('/welcome.art', 'hi, <%=value%>.');
b. 浏览器版本使用
跟旧版差不多
var html = template('test', data);
document.getElementById('content').innerHTML = html;
// 更多用法看我上一篇文章
c. Webpack 用法
先看文档，在后续我写 webpack 时，会再补充插件说明
art-template-loader
d. Express 用法
还没研究过这个库，以后会在本人的 Node教程 中研究该库
express-art-template
e. Koa 用法
还没研究过这个库，以后会在本人的 Node教程 中研究该库
koa-art-template
5. API
- template(filename, content) - 渲染 & 动态生成模板缓存
// 在渲染时，[filename] 可以是文件路径，但在浏览器版中只能是模板 ID ，[content] 为渲染数据
var html = template(__dirname + '/demo.art', {
user: {
name: 'Max-demo'
}
});
&
var html = template('test', data);
// 该方法只能在 Node 与 其他工具下使用
// 这时 [filename] 是生成的文件路径，[content] 为模板 html 片段
template('/welcome.art', 'hi,{{value}}');
- .compile(source, options) - 编译模板并返回一个渲染函数
// 该方法应用于外部引入 js 文件模板或动态渲染
// 外部引入模板，请看上一篇中的 [compile.js - 模板外置方法]
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
// 动态渲染
var render = template.compile('hi, {{value}}');
var html = render({value: 'Max'});
// 这里的 [options] 是一个 template.defaults 中的配置对象
- .render(source, data, options)
编译并返回渲染结果
// 上面动态渲染的一步到位方法
var html = template.render('hi, {{value}}', {value: 'Max'});
// 这里的 [options] 是一个 template.defaults 中的配置对象
- .defaults
模板引擎默认配置
查看
常用的提一下：
template.defaults.minimize = true; // 压缩代码
template.defaults.rules // 语法正则改写
// 原始语法的界定符规则
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;
// 标准语法的界定符规则
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;
template.defaults.imports // 定义变量
template.defaults.imports.log = console.log;
<% $imports.log('hello world') %> == console.log('hello world')
- .extension
给 NodeJS require.extensions 注册的模板渲染函数
// 加载 .ejs 模板
var template = require('art-template');
require.extensions['.ejs'] = template.extension;
var view = require('./index.ejs');
var html = view(data);
一般只要用.art ，因为其默认被注册，可以直接使用，不是在 Node 环境下其实不需要做这些用 .html 就好。
好了，上面就是 《 前端模版引擎 - art-template 【下】 》的全部内容了，希望能够对你有所帮助~
该篇收录于文集：前端技术栈