今天想记录下对arttemplate模板的使用,哎,其实这玩意的兴起主要还是得从浏览器操作dom说起。如果修改浏览器的某一个dom节点就会引起文档流的重绘,然后这个重绘的耗时相当的大,是昂贵的开销。所以我们一般不愿意直接进行DOM操作,因为这个性能太差了,我们一般会采用字符拼接的方法来做,最后把整个字符串用innerHTML的方式插入,例如如下代码:
var html='',data=["name:1","name:2"] ;
html+='<ul>';
for(var i=0,len=data.length;i<len;i++){
html+='<li>'+data[i]+'</li>;
}
html+='</ul>';
$(el).html(html);
当页面越来越复杂了,你拼接的html的程序就越来越复杂了,而且有些朋友使用replace去替换,这玩意用不好的是相对慢一点的,所以有了各种模板,用的比较多的就是arttemplate,这玩意的源码不是很长,我看了一下主要就是解析语法生成一个render函数,并且这个是可以被缓存的,你可以做个试验,使用arttemplate加载一个id位id1的模板,然后你删除这个模板对应的<script type="text/html" id="id1"></script>然后你会发现你还可以正常的使用这个模板,哈哈。
然后就是还支持开始结束标签的改写,其他的功能倒是没怎么使用,具体的语法类似JSP,PHP之类的,我也不喜欢重复,直接上github看就可以了。
附上地址:http://aui.github.io/artTemplate/
不过值得一提的是arttemplate的模板使用不止是可以写在html页面中用<script type="text/html" id="xxx" ></script>的方式使用,还可以直接传入一个字符串编译,如下:
template.compile(source, options) //将返回一个渲染函数。演示 template.render(source, options) //将返回渲染结果
这种用法让我们可以把模板做成一个str变量,同时也可以放在tmpl里面通过ajax加载模板片段使用,同时有这样一个工具TmodJS,强大的工具啊,不仅自动化处理了模板的,并且可以包装成AMD模块化代码,这样可以减少模块化的时候分别请求js跟模板,一个请求就好了,而且有利于封装。
好了,不扯了,该睡觉了。