artTemplate模板引擎简单介绍使用
2014-09-22 12:53
781 查看
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的模板编写也挺相似。
值得注意的是list是json数据的key,并不是数据的变量名,如果需要循环,可以这样写
渲染的方法
其中data是从后台获取的json格式的数据,最后就可以将html变量插入到dom里。
另外,渲染的方法还有两种:
id是script中定义的属性,data的格式是{key: value}的形式。这里的key就是模板的id,数据放在value部分。
官方文档中的描述:
对于两个方法都有id参数没有任何说明。
id这个参数是dom对象还是jquery对象?看了源码才知道,id是个string,id=”someID”引号中的部分。
那么对于template.render方法的data参数呢?
同样没有详细说明,只有一个例子,一开始将数组直接传进去,死活报错。无奈再去看源码吧,原来data参数是{key: value}的形式。这里的key就是模板的id,你自己的数据放在value部分。
对于template.compile方法的source参数,一样没有详细说明。
官方文档上只有compile(‘模板内容’)这样的方式,未提及外部定义模板内容的方式。正式项目使用肯定要外部定义模板的嘛。继续蹲坑里看源码吧,原来这里需要的是dom对象,$(‘#key’).html()即可,key为模板id。
文档地址: 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部分。
官方文档中的描述:
对于两个方法都有id参数没有任何说明。
id这个参数是dom对象还是jquery对象?看了源码才知道,id是个string,id=”someID”引号中的部分。
那么对于template.render方法的data参数呢?
同样没有详细说明,只有一个例子,一开始将数组直接传进去,死活报错。无奈再去看源码吧,原来data参数是{key: value}的形式。这里的key就是模板的id,你自己的数据放在value部分。
对于template.compile方法的source参数,一样没有详细说明。
官方文档上只有compile(‘模板内容’)这样的方式,未提及外部定义模板内容的方式。正式项目使用肯定要外部定义模板的嘛。继续蹲坑里看源码吧,原来这里需要的是dom对象,$(‘#key’).html()即可,key为模板id。
相关文章推荐
- artTemplate模板引擎简单介绍使用
- JS模板引擎-腾讯artTemplate 最全的使用介绍
- 使用模板引擎artTemplate的几个问题总结
- JS模板引擎Ejs的简单使用介绍
- 前端模板引擎 artTemplate的 使用与进阶
- 模板引擎artTemplate及模板预编译器TmodJS的使用入门
- 一个前端攻城狮的全栈之路第四弹:jade模板引擎的简单介绍和使用
- 高性能JavaScript模板引擎artTemplate介绍
- 高性能art-template模板引擎的使用
- js高效模板引擎artTemplate 的使用总结
- JS模板引擎---腾讯artTemplate的使用
- artTemplate模板引擎使用
- 关于js模板引擎 arttemplate 的使用
- 玄宇说:简单的VTemplate模板引擎的使用
- JSONP与artTemplate模板引擎使用的示例--请求天气数据
- js模板引擎art-template.js使用方法
- 模板引擎ArtTemplate使用方法
- JSONP与artTemplate模板引擎使用的示例--请求天气数据
- 前端模板引擎 artTemplate的 使用与进阶
- js模板引擎art-template使用方法