javascript 模板

今天想记录下对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跟模板，一个请求就好了，而且有利于封装。

好了，不扯了，该睡觉了。