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
转载于:https://www.cnblogs.com/gyjWEB/p/3899760.html
JS之模板技术(aui / artTemplate)相关推荐
- js模板引擎之art-template
1.模板引擎介绍 1.1 为什么要使用模板引擎 我们通过ajax获取到数据后,需要把数据渲染到页面中,在使用模板引擎前,我们的做法是大量的拼接字符串. 拼接字符串的缺点:1.代码可阅读性非常 ...
- html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 一个对前端模板技术的全面总结
此文的写作耗时很长,称之为雄文不为过,小心慢用 此文缘由 其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面 <!-- more --> 就是给 ...
- 前端模板技术的全面总结
此文缘由 其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面 <!-- more --> 就是给我这个画面 突然发现取名字真是个大学问,当时就基 ...
- JS特效模板精彩案例!
2013年,淘宝装修市场推出了一款新型模板--JS特效模板,何为JS特效模板?JS特效模板比普通模板的优势在哪里?! JS特效模板,顾名思义,就是利用javascri ...
- mustache模板技术简介
mustache模板技术简介 一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 J ...
最新文章
- jquery json 判断用户是否已注册
- 3.4_函数_Function_Part_2
- CodeForces - 456C Boredom(线性dp)
- Spring Cloud(F版)搭建高可用服务注册中心
- c# 联合halcon 基于相关性 模板匹配_机器视觉之halcon入门(5)-字符识别exe生成...
- 逍遥模拟器配置burpsuite抓包环境
- tcp和udp的区别和三次 四次挥握手 http://www.cnblogs.com/bizhu/archive/2012/05/12/2497493.html...
- 14个支持响应式设计的流行前端开发框架
- 计算机时代 英语,雅思8分范文:计算机时代教师角色 【出国英语】
- Python使用pip自动升级所有第三方库
- mtk2502和nrf52832哪个好_蓝牙芯片NRF51822与NRF52832的性能对比
- Javascript三种创建对象的方法,new关键字,for...in 遍历对象
- java jar 启动脚本
- 算法图解第九章笔记与习题(动态规划)
- 激光雷达障碍物检测:点云聚类算法
- iOS经典讲解之Apple Pay开发
- 在线安装rancher2.4管理K8S集群并部署服务
- Unity经纬度相互转换(WGS-84、GCJ-02、BD-09)
- 到底什么是IaaS、PaaS、SaaS?
- Studio One2023中文版支持视频配乐加歌词音轨功能
热门文章
- 开源 RPC 框架有哪些
- python2和3通用的头文件写法 不确定是否叫头文件 这种说法 大概就是这个意思
- Linux内核模块自动加载机制 .
- P3175 [HAOI2015]按位或
- 12306网站将新增微信通知方式
- apple apns http2 java调用
- MyEclipse 2014下搭建Android开发环境
- oracle启动时报错ORA-00845 MEMORY_TARGET not supported on this system
- Linux中的进程调度(六)
- 9种让肌肤美白的简单方法 - 生活至上,美容至尚!