artTemplate模板引擎简单介绍使用

github首页地址： https://github.com/aui/artTemplate

文档地址： http://aui.github.io/artTemplate/

参考 高性能JavaScript模板引擎原理解析： http://cdc.tencent.com/?p=5723

　　artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

　　除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

　　使用的方法很简单，第一步：编写模板，第二部，渲染模板。

编写模板的方法就是很常用的拼接，与Velocity的模板编写也挺相似。

var source =
  '<ul>'
+    '<% for (var i = 0; i < list.length; i ++) { %>'
+        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
+    '<% } %>'
+ '</ul>';

值得注意的是list是json数据的key，并不是数据的变量名，如果需要循环，可以这样写

	var data={
	    "list":datasource;
	};

渲染的方法

var render = template.compile(source);
var html = render(data);

其中data是从后台获取的json格式的数据，最后就可以将html变量插入到dom里。

　　另外，渲染的方法还有两种：

template.compile([id], source);//id可选
template.render(id, data);//也可以直接渲染

id是script中定义的属性，data的格式是{key: value}的形式。这里的key就是模板的id，数据放在value部分。

官方文档中的描述：

1. 对于两个方法都有id参数没有任何说明。

   id这个参数是dom对象还是jquery对象？看了源码才知道，id是个string，id=”someID”引号中的部分。

2. 那么对于template.render方法的data参数呢?

   同样没有详细说明，只有一个例子，一开始将数组直接传进去，死活报错。无奈再去看源码吧，原来data参数是{key: value}的形式。这里的key就是模板的id，你自己的数据放在value部分。

3. 对于template.compile方法的source参数，一样没有详细说明。

   官方文档上只有compile(‘模板内容’)这样的方式，未提及外部定义模板内容的方式。正式项目使用肯定要外部定义模板的嘛。继续蹲坑里看源码吧，原来这里需要的是dom对象，$(‘#key’).html()即可，key为模板id。

版权声明：本文为博主原创文章，未经博主允许不得转载。