您的位置:首页 > Web前端 > JavaScript

JS模板引擎 :ArtTemplate (1)

2015-10-18 22:51 232 查看
1.为什么需要用到模板引擎

我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去。

例如这样子:

var data = [
{text: "测试一"},
{text: "测试二"},
{text: "测试三"},
{text: "测试四"}
];
function generateList(data) {
var listHtml = "";
listHtml += "<ul>";
for (var i = 0, len = data.length; i < len; i++) {
listHtml += "<li>";
listHtml += data.text;
listHtml += "</li>";
}
listHtml += "</ul>";
return listHtml;
}


但是,这种通过字符串拼接的方式,比较简单的还好,如果结构比较复杂,拼接的时候还需要注意引号之间的嵌套,这样的代码维护起来比较困难。

一旦需求发生变化,这里修改起来也是很麻烦。所以我们需要模板引擎来改善这种情况。

例如上面的例子,如果使用模板引擎则可以是这样子:

var data = {
list:[
{text: "测试一"},
{text: "测试二"},
{text: "测试三"},
{text: "测试四"}
]
};
<script id="test" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li><%= list[i].text %></li>
<% } %>
</ul>
</script>


不知道你有没有感觉简单一点呢,反正我是感觉更清晰明了一点。

2.artTemplate的介绍

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



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

artTemplate 这一切都在 1.7kb(gzip) 中实现!

这是artTemplate的官网,使用方法相信有一定js基础的,看了文档之后都能够使用。这里就不详细介绍了。官网

3.artTemplate 模板引擎的基本原理

  模板引擎其实做的就是两件事。

根据一定的规则,解析我们所定义的模板
这里,我们将模板定义在script标签中,然后,当我们使用到某个模板的时候,引擎会根据我们提供的ID,解析相应的模板,此时会返回一个渲染函数。(为了性能,还会将这个渲染函数缓存起来)

(function($data,$filename) {
'use strict';
var i=$data.i,list=$data.list,$out='';$out+='<ul>\n';
for (var i = 0; i < list.length; i ++) {
$out+='\n        <li>';
$out+= list[i].text;
$out+='</li>\n';
}
$out+='\n</ul>';
return new String($out);
})


上述代码,我已经删除了一些不必要的信息,解析模板之后,会返回一个这样的渲染函数。也就是说,其实模板引擎就是将我们平时用的字符串拼接的事情给做了。
至于,引擎是如何解析的,在下一篇我会详细介绍

根据数据以及模板生成html(其实背后也是用的字符串拼接)
这里,会根据用户所传的数据,然后调用上一步返回的渲染函数。得到我们想要的结果。

这是第一篇,先简单的介绍到这里,接下来会写另外几篇对artTemplate的源码进行讲解。

小弟才疏学浅,难免会对一些知识点以及一些细节讲的有些偏颇或者不够全面,望各位多多提出意见。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: