JS之模板技术（aui / artTemplate）
artTemplate是个好东西啊，一个开源的js前端模板引擎，使用简单，渲染效率特别的高。
我经常使用这个技术来在前端动态生成新闻列表，排行榜，历史记录等需要在前端列表显示的信息。
下面是artTemplate的下载链接：
https://github.com/aui/artTemplate
因为artTemplate比较简单，容易上手，项目的例子，文档又比较齐全，大家有需要可以直接参考官方文档，例子进行深入了解，
我这里就这是用简单常用的，用于快速上手的一个例子吧！
先说明，我是下载artTemplate工程项目src目录下的template.js的
内容大概为:
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部分。
更加详细的内容可参考官方文档。
...略
var template = function (id, content) {
return template[
typeof content === 'object' ? 'render' : 'compile'
].apply(template, arguments);
};
...略
其中主要也就是使用到这个函数。
前端的页面内容主要为
<body>
<center><h1><font color="#f00">这是template模板技术使用示例</font></h1></center>
<script id="personListId" type="text/html">
<font color="#f00" size="24">
<$for (var i = 0; i < personList.length; i++) {$>
客户姓名：<$=personList[i].name$> 客户年龄：<$=personList[i].age$><br/>
<$}$>
</font>
</script>
<div id="templateContent"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/page/index.js"></script>
</body>
其中我使用了jquery，template，这两个都可以上网下载，放置到对应目录就ok。
下面这段代码使用模板技术进行for循环，格式为：
<$$>对内可写js代码，<$=val$>是输出js的变量val的值，
看着这个for循环，需要注意三点：
1）<script></script>必须标上唯一id，如<script id="personListId"></script>
2）<script></script>的type的值是text/html，而不是text/javascript
3）personList这个js变量从哪里来的，这里先留个疑问吧
4）对于这个列表要怎么显示，你就对应怎么写就好，这里是最简单的显示客户姓名和客户年龄，也没带什么图片，样式之类的
客户姓名：<$=personList[i].name$> 客户年龄：<$=personList[i].age$><br/>。
<script id="personList" type="text/html">
<font color="#f00" size="24">
<$for (var i = 0; i < personList.length; i++) {$>
客户姓名：<$=personList[i].name$> 客户年龄：<$=personList[i].age$><br/>
<$}$>
</font>
</script>
接下来就是写自己的js代码，使用template模板技术，动态渲染以上前端代码
代码写在js/page/index.js这个文件中，内容为：
$(function(){
var persons= [
{
name : "11111111111",
age : 1111111111111111
},
{
name : "2222222222",
age : 2222222222
},
{
name : "33333333333",
age : 333333333333
}
];//自定义的json格式数据，实际应用中一般都是使用ajax请求服务器获取json格式的数据，不知道从js的哪个版本起，js已经内置支持json格式的数据
var html = template('personListId',{personList : persons});//看着这行代码，是否注意到之前提到的personListId和personList 已经在这里使用上和定义好了
$('#templateContent').html('').html(html);//jquery的用法，目的就是将动态生成的内容（html）填充到id为templateContent的div
});
write less，do more，i like
JS之模板技术（aui / artTemplate）的更多相关文章
- js模板引擎之artTemplate
http://www.cnblogs.com/52fhy/p/5393673.html artTemplate 不支持requre.js,悲剧啊,只能用juicer啊 这个还是比较有名的. 简介: a ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- MVC下的客户端模板技术
1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的 ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 再谈前端HTML模板技术
在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...
- 必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...
- js使用模板快速填充数据
1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...
- Smarty模板技术学习
模板引擎技术:使得php代码和html代码分离的技术就称为"模板引擎技术" 自定义smarty模板技术实现 <?php //迷你smarty原理 class MiniSmar ...
- smarty模板技术
一.什么是smarty?smarty是一个使用php写出来的模板php模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用php程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美 ...
随机推荐
- SAS零散知识总结
1,变量名命名规范:以字母或者下划线开始,可包含字母.下划线.数字,且不超过32个字符: 2,INFILE用于读取外部数据文件,一般于FILENAME(和LIBNAME用户一致,但路径要精确到文件名( ...
- 使用printf输出各种格式的字符串( 转载)
1. 原样输出字符串: printf("%s", str); 2. 输出指定长度的字符串, 超长时不截断, 不足时右对齐: printf("%Ns" ...
- zoj 3725 - Painting Storages(动归)
题目要求找到至少存在m个连续被染成红色的情况,相对应的,我们求至多有m-1个连续的被染成红色的情况数目,然后用总的数目将其减去是更容易的做法. 用dp来找满足条件的情况数目,, 状态:dp[i][0] ...
- cobbler 配置(转载)
Cobbler介绍 Cobbler 是一个系统启动服务(boot server),可以通过网络启动(PXE)的方式用来快速安装.重装物理服务器和虚拟机,支持安装不同的 Linux 发行版和 Windo ...
- Linux之RPM安装软件
源码包 (可以看到源代码) 脚本安装包(写好的xsheel一键安装.本质还是源码包和二进制包) 二进制包(RPM包.系统默认包) 包管理系统简单,通过命令就可以安装.卸载 ...
- CSS3之绽放的花朵(网页效果--每日一更)
今天,带来的是纯CSS3打造的效果--绽放的花朵. 先来看效果吧:亲,请点击这里 这是纯CSS3样式打造的效果,关键是采用了animation属性和transform属性.详细请看下面代码. HTML ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- MySQL数据丢失讨论
原文地址:http://hatemysql.com/tag/sync_binlog/ 1. 概述 很多企业选择MySQL都会担心它的数据丢失问题,从而选择Oracle,但是其实并不十分清楚什么情况下 ...
- 新浪微博UWP UI意见征求
各位园主,卑职最近在忙一些新浪微博UWP的事儿,其中有一些UI上的design和实现,拿出来见见公婆,请大家给个意见: 您是喜欢A还是B.麻烦直接回在评论区了,写A或B,愿意多写几句意见的更欢迎! 先 ...
- .net开发笔记（十二） 设计时与运行时的区别（续）
上一篇博客详细讲到了设计时(DesignTime)和运行时(RunTime)的概念与区别,不过没有给出实际的Demo,今天整理了一下,做了一个例子,贴出来分享一下,巩固前一篇博客讲到的内容. 简单回顾 ...