js模板引擎

前后交互过程中最麻烦的就是如何将json数据展示到页面中,循环拼接html的方法实在是太low了,饱受其苦,BAT同样会遇到这样的问题,于是乎就有个各自的js模板引擎,目的只有一个:让数据更快的呈现,页面更早的渲染。

这里比人做过比较http://www.cnblogs.com/guohu/p/3870677.html,腾讯的arttemplate有绝对性优势,那么我们就简单粗暴的选它了。

Tencent arttemplate使用

这里有官方的详细文档:腾讯arttemplate

语法介绍,分原生语法和简洁语法

arttemplate-native.js web版下载

tornado的模板语法和简洁语法冲突了,我去,那就用原生语法吧,最后已经配置成这个鸟样子了

template.config('openTag','<@');
template.config('closeTag','@>');
<script type="text/html" id="tmp_msg">
<@ for(var i=0; i < 5; i++){ @>
<div class="col-md-12 clearfix" style="margin-top:5px;padding-bottom: 5px;border-bottom: 0.5px solid #ccc;">
<div class="col-sm-2"><img src="/static/img/user.png" width="60px" height="60px" alt=""></div>
<div class="col-sm-6">这是一个美国人发的测试消息</div>
<div class="col-sm-2">2017-2-13 9:12</div>
<div class="col-sm-2">
<input type="checkbox">
</div>
</div>
<@}@>
</script>

一个bug

第一次用就碰到了个奇怪的事情,在调用template时总是没有输出

var html = template(tmpName, resp);
$('#' + tabName).html(html);

加上了对resp的判断之后就可以了,这是为什么?

if (resp.data && resp.data.length > 0) {
var html = template(tmpName, resp);
$('#' + tabName).html(html);
}

自定义配置

方法

基本用法


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../dist/template-native.js"></script>
</head> <body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %> <h1><%=title%></h1>
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> :<%= list[i] %></li>
<% } %>
</ul> <% } %>
</script> <script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

在javascript中存放模板

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../../dist/template-native.js"></script>
</head> <body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'
+ '<% } %>'
+ '</ul>'; var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
}); document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

显示html


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../../dist/template-native.js"></script>
</head> <body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义:<%=#value%></p>
<p>默认转义: <%=value%></p>
</script> <script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

嵌入子模板


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../../dist/template-native.js"></script>
</head> <body>
<div id="content"></div>
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> :<%= list[i] %></li>
<% } %>
</ul>
</script> <script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

自定义方法


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../../dist/template-native.js"></script>
</head> <body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
<%=dateFormat(time, 'yyyy<b>年</b> MM月 dd日 hh:mm:ss')%>
</script> <script>
/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) { date = new Date(date); var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}); // -------- var data = {
time: (new Date).toString(),
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

js模板 arttemplate 让数据与html分离的更多相关文章

  1. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  2. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  3. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  4. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  5. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  6. JS数据绑定模板artTemplate试用

    之前写JS绑定数据曾经用过tmpl库,虽然功能比较强大但是感觉不是很轻量,对于相对简单的数据需求显得有些臃肿.而Ajax返回数据自己拼接html的方式又显得不够高端,因此今天看了一篇介绍artTemp ...

  7. js模板引擎-art-template常用总结

    art-template javascript 模板引擎,官网:https://github.com/aui/art-template 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出 ...

  8. js模板引擎-art-template常用总结(转)

    原文:https://www.cnblogs.com/shiyou00/p/6841801.html art-template javascript 模板引擎,官网:https://github.co ...

  9. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

随机推荐

  1. Winfrom固定Label宽度,根据文本动态改变Label的高度 z

    Label,要固定住宽度,然后根据文本的长度来动态改变高度,一开始去网上找解决方案,各种根据字体大小啊,字数啊来动态改变,但是效果却不怎么好.最后灵机一动,想起了偶尔用过一次的FlowLayoutPa ...

  2. 工具:使用过的 API 文档生成工具

    背景 2012 年之前几乎没有为代码增加注释,当然,代码的命名也不见得合理(好的代码胜过面面俱到的注释),后来接触过一些开源框架,优秀的框架都有一个特点:文档和示例非常多,在后来的日子里,几乎会强制自 ...

  3. Linux学习13-CentOS安装ab做压力测试

    前言 网站性能压力测试是服务器网站性能调优过程中必不可缺少的一,测试环境准备好了后,如何对网站做压力测试? 压力测试的工具很多,如:ab.http_load.webbench.siege.jmeter ...

  4. 都市侠盗第五季/全集Leverage迅雷下载

    第五季 Leverage Season 5 (2012)看点:TNT电视网砍掉了<都市侠盗>(Leverage),这部已经播出至第5季的团队盗窃现代罗宾汉剧集将在今年完结,这样的决定对&l ...

  5. 在EditText中限制输入,自定义样式,监听输入的字符,自动换行

    自动获取焦点 <!-- 添加:<requestFocus /> 会自动获取焦点 --> <EditText android:layout_width="matc ...

  6. 《OSPF和IS-IS详解》

    <OSPF和IS-IS详解> 基本信息 作者: (美)Jeff Doyle 译者: 孙余强 出版社:人民邮电出版社 ISBN:9787115347886 上架时间:2014-4-25 出版 ...

  7. RFC 868 -- TIME Protocol

    INTERNET STANDARD Errata Exist Network Working Group J. Postel - ISI Request for Comments: 868 K. Ha ...

  8. Netty Associated -- ByteBuf

    ByteBuf ByteBuf是Netty的Server与Client之间通信的数据传输载体.他提供了一个byte数组(byte[])的抽象视图 buffer创建 我们推荐通过一个Unpooled的帮 ...

  9. Xilinx FFT IP v9.0 使用

    该ip用于实现N=2**m(m=3~16)点FFT的变换, 实现的数学类型包含: A)      定点全精度 B)      定点缩减位宽 C)      块浮点 每一级蝶型运算后舍入或者取整.对于N ...

  10. andengine的convertLocalCoordinatesToSceneCoordinates方法

    使用Tile地图,看过andengine中的例子,都会发现例子中有这么一段话,以前版本的是convertLocalToSceneCoordinates方法. scene.registerUpdateH ...