artTemplate模板引擎简单使用

artTemplate模板引擎简单使用

介绍

javascript模板引擎

特性

1.安全，默认对输出进行转义，防止数据中含有HTML字符串，避免引起XSS攻击

2.支持include语句

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

4.支持所有流行的浏览器

5.支持预编译，性能卓越，可将模板转换为非常精简的js文件

6.对NodeJS Express友好支持

7.支持运行时调试，可精确定位异常模板所在语句

方法介绍

template(id,data)

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

template.config(name, value)

更改引擎的默认配置。

字段	类型	默认值	说明
openTag	String	‘{{‘	逻辑语法开始标签
closeTag	String	‘}}’	逻辑语法结束标签
escape	Boolean	true	是否编码输出HTML字符
cache	Boolean	true	是否开启缓存 （依赖 options 的 filename 字段）
compress	Boolean	false	是否压缩HTML多余的空白字符

template.compile(source, options)

将返回一个渲染函数。

template.render(source, options)

将返回渲染结果。

template.helper(name, callback)

添加自定义的辅助方法。

快速上手

编写模板

使用一个type="text/html"的script标签存放模板：

<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;

template(id,data)会返回一个html字符串

模板语法

简洁语法

引入简洁语法的引擎版本

<script src="dist/template.js"></script>

表达式

//使用两个大括号包含
{{content}}     //对内容编码输出
{{#content}}    //对内容不编码输出，编码可以防止数据中含有html字符串，避免引起XSS攻击

//条件表达式
{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

//遍历表达式
//无论是数组或者对象都可以使用each进行遍历
{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}
//简写方式
{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}

//模板包含表达式
{{include 'template_name'}}     //用于嵌入子模板
{{include 'template_name' news_list}}       //子模版默认共享当前数据，也可以指定数据

//辅助方法使用
{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}     //使用模板
{{time | say:'cd' | ubb | link}}        //传入参数与嵌套使用

原生JS语法版

原生语法

引入原生语法的引擎版本

<script src="dist/template-native.js"></script>

表达式

//使用<%与%>包含语句的逻辑表达式
<%=content%>    //对内容编码输出
<%=#content%>   //对内容不编码输出，编码可以防止数据中含有html字符串，避免引起XSS攻击

//遍历表达式
//无论是数组或者对象都可以使用each进行遍历
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>
//模板包含表达式
<% include('template_name') %>      //用于嵌入子模板
<% include('template_name', news_list) %>       //子模版默认共享当前数据，也可以指定数据

//辅助方法使用
<% $ubb2html(content) %>       //使用模板

比较两种语法可以看出，简洁版语法更为简单高效，可读性也较原生语法更好，而且编写时不易出错。因此更加推荐使用简洁语法版本。

补充特性

在javascript中存放模板

var source = '<ul>'
+    '{{each list as value i}}'
+        '<li>索引 {{i + 1}} ：{{value}}</li>'
+    '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
    list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;

将模板作为字符串的形式存储在变量中，再使用compile方法返回一个渲染函数，将需要渲染的数据作为参数传入函数中即可。

自定义辅助方法

使用template.helper方法添加公用的辅助方法

template.helper(test, callback);
var html = template('test', data);
document.getElementById('content').innerHTML = html;

debug错误捕获

模板错误报错时，能够精确定位到异常所在语句

Template Error

<filename>
test

<name>
Render Error

<message>
Cannot set property 'alert' of undefined

<line>
5

<source>
{{window.alert=null}}

结语

大部分内容都摘自github上artTemplate模板的说明文档，想看看更加详细的介绍和demo演示，以及artTemplate下载的可以参见
https://github.com/aui/artTemplate#templateconfigname-value