template : 模板渲染引擎
示例
介绍
template 模板渲染引擎基于开源项目artTemplate改造而来:
artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能极限,在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。
引擎支持调试。若渲染中遇到错误,调试器可精确定位到产生异常的模板语句,解决前端模板难以调试的问题。
这一切都在 2kb(gzip) 中实现!
快速上手
编写模板
使用一个type="text/html"
的script
标签存放模板:
<script id="test" type="text/html"> <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i ++) {%> <li>条目内容 <%=i + 1%> :<%=list[i]%></li> <%}%> </ul> </script>
模板逻辑语法开始与结束的界定符号为<%
与%>
,若<%
后面紧跟=
号则输出变量内容。
渲染模板
template.render(id, data)
var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template.render('test', data); document.getElementById('content').innerHTML = html;
嵌入子模板
<%include(id, [data])%>
语句可以嵌入子模板,其中第二个参数是可选的,它默认传入当前的数据。
<script id="test" type="text/html"> <h1><%=title%></h1> <%include('list')%> </script> <script id="list" type="text/html"> <ul> <%for(i = 0; i < list.length; i ++) {%> <li>条目内容 <%=i + 1%> :<%=list[i]%></li> <%}%> </ul> </script>
不转义HTML
模板引擎默认数据包含的 HTML 字符进行转义以避免 XSS 漏洞,若不需要转义的地方可使用两个=
号。
<script id="test" type="text/html"> <%==value%> </script>
若需要关闭默认转义,可以设置template.isEscape = false
。
在js中存放模板
var source = '<ul>' + '<% for (var i = 0; i < list.length; i ++) { %>' + '<li>索引 <%= i + 1 %> :<%= list[i] %></li>' + '<% } %>' + '</ul>'; var data = { list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var render = template.compile(source); var html = render(data); document.getElementById('content').innerHTML = html;
添加辅助方法
template.helper(name, callback)
辅助方法一般用来进行字符串替换,如 XSS 过滤、UBB 替换、脏话替换等。
例如扩展一个UBB替换方法:
template.helper('$ubb2html', function (content) { return content .replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>') .replace(/\[i\]([^\[]*?)\[\/i\]/igm, '<i>$1</i>') .replace(/\[u\]([^\[]*?)\[\/u\]/igm, '<u>$1</u>') .replace(/\[url=([^\]]*)\]([^\[]*?)\[\/url\]/igm, '<a href="$1">$2</a>') .replace(/\[img\]([^\[]*?)\[\/img\]/igm, '<img src="$1" />'); });
在模板中的使用方式:
<%=$ubb2html(content) %>
注意:引擎不会对辅助方法输出的 HTML 字符进行转义。
设置界定符
若前端模板语法与后端语法产生冲突,可以修改模板引擎界定符,例如:
template.openTag = "<!--["; template.closeTag = "]-->";
自定义语法
artTemplate 提供一个语法扩展用来简化模板逻辑语法。语法示例:
{if admin} <h3>{title}</h3> <ul> {each list} <li>{$index + 1}: {$value}</li> {/each} </ul> {/if}