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}

详情