js模板引擎用法
template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate
1、特性
（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）（2）、支持运行时调试，可精确定位异常模板所在语句（演示）
（3）、对 NodeJS Express 友好支持（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
（5）、支持include语句
（6）、可在浏览器端实现按路径加载模板（详情）
（7）、支持预编译，可将模板转换成为非常精简的 js 文件
（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
（9）、支持所有流行的浏览器
2、语法
（1）、使用
引用简洁语法的引擎版本，例如： <script src="dist/template.js"></script>
（2）、表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
（3）、输出表达式
对内容编码输出： {{content}}
不编码输出： {{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
（4）、条件表达式
|
1
2
3
4
5
6
7
|
{{if admin}} <p>admin</p> {{else if code > 0}} <p>master</p> {{else}} <p>error!</p> {{/if}} |
（5）、遍历表达式
无论数组或者对象都可以用 each 进行遍历。
|
1
2
3
|
{{each list as value index}} <li>{{index}} - {{value.user}}</li> {{/each}} |
亦可以被简写：
|
1
2
3
|
{{each list}} <li>{{$index}} - {{$value.user}}</li> {{/each}} |
（6）、模板包含表达式
用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据，亦可以指定数据：{{include 'template_name' news_list}}
（7）、辅助方法
使用template.helper(name, callback)注册公用辅助方法：
|
1
2
3
4
|
template.helper('dateFormat', function (date, format) { // .. return value; }); |
模板中使用的方式： {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}
支持传入参数与嵌套使用： {{time | say:'cd' | ubb | link}}
3、实例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>basic-demo</title> <script src="../dist/template.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}} </script> <script> var data = { title: '基本例子', isAdmin: true, list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>no escape-demo</title> <script src="../dist/template.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> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>include-demo</title> <script src="../dist/template.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> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> <script> var data = { title: '嵌入子模板', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>helper-demo</title> <script src="../dist/template.js"></script> </head> <body> <h1>辅助方法</h1> <div id="content"></div> <script id="test" type="text/html"> {{time | dateFormat:'yyyy年 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 */ template.helper('dateFormat', function (date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date(\d+)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } 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: 1408536771253, }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html> |
本文复制自http://www.jb51.net/article/100095.htm
js模板引擎用法的更多相关文章
- jquery.tmpl.js 模板引擎用法
1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...
- 百度JS模板引擎 baiduTemplate 1.0.6 版
A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...
- 使用新一代js模板引擎NornJ提升React.js开发体验
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...
- laytpl js模板引擎
laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...
- js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...
- android webview 中 js 模板引擎的使用
最近在项目中要求用 webview 展示几个界面, 而后台返回的不是 html 而是 json 数据. 起初用 StringBuilder 一个一个拼 html, 后来感觉太繁琐,拼一个还行,拼多了就 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
随机推荐
- 将mysql数据库数据以Excel文件的形式导出
最近在工作中,领导让从数据库中导出一些数据并存放到Excel表格中,网上有许多教程,下面是我总结的其中俩种方法. 从数据库管理工具中导出(navicat) 在navicat导出数据导Excel中还是比 ...
- django---单表操作之展示书籍列表
下面使用python console对数据库进行增删改查 下面我们来举个例子在页面上展示记录 结果: 注意html里面变量的写法 {% for book in book_list %} <tr& ...
- 【转】netstat 的10个基本用法
5. 获取进程名.进程号以及用户 ID 查看端口和连接的信息时,能查看到它们对应的进程名和进程号对系统管理员来说是非常有帮助的.举个栗子,Apache 的 httpd 服务开启80端口,如果你要查看 ...
- 【Social Listening实战】当数据分析遭遇心理动力学：用户深层次的情感需求浮出水面
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文篇幅较长,分为五部分,在中间部分有关于心理分析工具的介 ...
- 5. MYSQL问题：Access denied for user 'root'@'localhost' (using password:YES)
开发Web项目时,连接MYSQL数据库,出现问题:Access denied for user 'root'@'localhost' (using password:YES). 解决方案: ...
- java接口的学习笔记
1接口 接口是一个特殊的类,在JAVA中,接口是由抽象方法和全局敞亮组成. 在JAVA忠使用INTERFACE定义接口. public class InterfaceDemo { public sta ...
- Linux 下 Bash配置文件读取
Linux安装时可能要修改的配置文件:/etc/profile./etc/bashrc(ubuntu没有这个文件,对应地,其有/etc/bash.bashrc文件.我用的是ubuntu系统,所以下面将 ...
- UI5-学习篇-13-Eclipse 开发UI5应用
1.Eclipse环境配置及组件安装 UI5-学习篇-1-Eclipse开发工具及环境搭建 2.创建项目 3.设置代理映射 打开WebContent->WEB-INF->web.xml文件 ...
- CSS内容简单总结
day50 1. 内容回顾 1. 伪类和伪元素 1. 伪类 1. :link 2. :visited 3. :hover ...
- mysql字符串处理
MySQL字符串操作: substring(column_name, "start_position"); # 从指定的位置(第二个参数, start_position)开始,取到 ...