js模板 arttemplate 让数据与html分离

js模板引擎

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

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

Tencent arttemplate使用

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

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

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分离的更多相关文章

各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
JS数据绑定模板artTemplate试用
之前写JS绑定数据曾经用过tmpl库,虽然功能比较强大但是感觉不是很轻量,对于相对简单的数据需求显得有些臃肿.而Ajax返回数据自己拼接html的方式又显得不够高端,因此今天看了一篇介绍artTemp ...
js模板引擎-art-template常用总结
art-template javascript 模板引擎,官网:https://github.com/aui/art-template 分为原生语法和简洁语法,本文主要是讲简洁语法基础数据渲染输出 ...
js模板引擎-art-template常用总结（转）
原文:https://www.cnblogs.com/shiyou00/p/6841801.html art-template javascript 模板引擎,官网:https://github.co ...
js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性拥有接近 JavaScript 渲染极限的的性能调试友好:语法. ...

随机推荐

浅析c++中virtual关键字
http://blog.csdn.net/djh512/article/details/8973606 1.virtual关键字主要是什么作用? c++中的函数调用默认不适用动态绑定.要触发动态绑定, ...
从CRITS发展历史解读结构框架
Michael Goffin 是MITRE公司的一名员工,在其博客中介绍了Crits 的发展历史.原文地址例如以下: CRITs: Collaborative Research Into Threat ...
怎样把vector和string数据传给旧的C API
通常情况下.旧的C API使用数组合char*指针来进行数据交换而不是vector或string对象. 这种API还将存在非常长的一段时间,假设我们想有效地使用STL.我们就必须与它们和平共处. ...
趣谈Java变量的可见性问题
了解过多线程的我们,对synchorized,sleep和valatile都比较了解,但是当这三个名词和“Java变量得可见性”的话题联系在一起不知道大家是否还可以保持大脑清晰??? 最近看到一个关于 ...
实用ExtJS教程100例-005：自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
Java(C#)基础差异-数组
1.填充数组 Java 数组填充替换方法Arrays.fill() 举例如下: import java.util.Arrays; public class FillDemo { public stat ...
libstdc++.so.6: version `GLIBCXX_3.4.21' not found
问题: dotnet: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by dotnet)dotnet ...
ADB与AVD的常见问题
一.adb问题常用解决方法若是模拟器启动正常,但是adb检测不到模拟器,我们给他一套不解释连招,下面教大家几招基础拳法. 1.基础拳法一:循环自动检测下图那个小按钮,点它,狠狠的点它,然后点运行, ...
Generalized normal distribution and Skew normal distribution
Density Function The Generalized Gaussian density has the following form: where (rho) is the " ...
PHP 5.4.17 发布!
PHP 5.4.17发布.2013-07-04 经过1个RC 上个版本是2013-06-07的5.4.16.修正了大约20个Bug以及几个安全漏洞.尽管5.5.0正式版已经发布.但5.4还未停止更新. ...