js模板引擎--artTemplate
js模板引擎--artTemplate
以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧...
artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上,测试截图如下:
下面进入正题:
特性
- 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍
- 支持运行时调试,可精确定位异常模板所在语句
- 对 NodeJS Express 友好支持
- 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
- 支持
include
语句 - 可在浏览器端实现按路径加载模板
- 支持预编译,可将模板转换成为非常精简的 js 文件
- 模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
- 支持所有流行的浏览器
快速上手
编写模板(采用script标签并带有属性id和type="text/html")

<script id="test" type="text/html">
{{if isAdmin}} <h1>{{author}}</h1>
<ul>
{{each list as value i}}
<li>{{i+1}}:{{value}}</li>
{{/each}}
</ul> {{/if}}
</script>

渲染模板

1 var data = {
2 author: '宫崎骏',
3 isAdmin: true,
4 list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
5 };
6 var html = template('test', data);
7 document.getElementById('content').innerHTML = html;

模板语法
有两个版本的模板语法可以选择。
1.简洁语法(采用"{{ }}",推荐使用)

<script id="test" type="text/html">
{{if admin}}
{{include 'admin_content'}} {{each list}}
<div>{{$index}}.{{$value.user}}</div>
{{/each}}
{{/if}}
</script>

2.原生语法(采用"<%= %>")

<script id="test" type="text/html">
<%if {%>
<%include('admin_content')%> <%for (var i=0;i<list.length;i++) {%>
<div><%=i%>.<%=list[i].user%></div>
<%}%>
<%}%>
</script>

下载地址
- template.js (简洁语法版, 2.7kb)
- template-native.js (原生语法版, 2.3kb)
方法
1. template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)
查找模板,如果没有 data 参数,那么将返回一渲染函数。

1 //修改代码前
2 var data = {
3 author: '宫崎骏',
4 isAdmin: true,
5 list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
6 };
7 var html = template('test', data);
8 document.getElementById('content').innerHTML = html;
9
10 //修改代码后
11 var data = {
12 author: '宫崎骏',
13 isAdmin: true,
14 list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
15 };
16 var html = template('test');
17 console.log(html);

控制台输出结果如下图:
2. template.compile(source, options)
将返回一个渲染函数。

1 <h1>用变量存放模板</h1>
2 <div id="content"></div>
3 <script>
4 var source = '<ul>' +
5 '{{each list as value i}}' +
6 '<li>{{i+1}}.{{value}}</li>' +
7 '{{/each}}' +
8 '</ul>';
9 var render = template.compile(source);
10 var html = render({
11 list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
12 });
13 document.getElementById('content').innerHTML = html;
14 </script>

3. template.render(source, options)
将返回一个渲染结果。
4. template.helper(name, callback)
将返回一个渲染结果。

1 <script id="test" type="text/html">
2 {{time | dateFormat: 'yyyy年 MM月 dd日 hh:mm:ss'}}
3 </script>
4 <script>
5 template.helper('dateFormat', function(date, format) {
6 var date = new Date(date);
7 var map = {
8 M: date.getMonth() + 1, //月份
9 d: date.getDate(), //日
10 h: date.getHours(), //小时
11 m: date.getMinutes(), //分
12 s: date.getSeconds(), //秒
13 q: Math.floor((date.getMonth() + 3) / 3), //季度
14 S: date.getMilliseconds() //毫秒
15 };
16 var format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
17 var v = map[t];
18 if (v !== undefined) {
19 if (all.length > 1) {
20 v = '0' + v;
21 v = v.substr(v.length - 2);
22 }
23 return v;
24 } else if (t === 'y') {
25 return (date.getFullYear() + '').substr(4 - all.length);
26 }
27 return all;
28 });
29 return format;
30 });
31 // ---------
32 var data = {
33 time: new Date().toString()
34 };
35 var html = template('test', data);
36 document.getElementById('content').innerHTML = html;
37 </script>

5. template.config(name, value)
更改引擎的默认配置。
字段 | 类型 | 默认值 | 说明 |
---|---|---|---|
openTag | String | '{{' |
逻辑语法开始标签 |
closeTag | String | "}}" |
逻辑语法结束标签 |
escape | Boolean | true |
是否编码输出 HTML 字符 |
cache | Boolean | true |
是否开启缓存(依赖 options 的 filename 字段) |
compress | Boolean | false |
是否压缩 HTML 多余空白字符 |
使用预编译
可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:
一、按文件与目录组织模板
template('tpl/home/main', data)
二、模板支持引入子模板
{{include '../public/header'}}
基于预编译
- 可将模板转换成为非常精简的 js 文件(不依赖引擎)
- 使用同步模板加载接口
- 支持多种 js 模块输出:AMD、CMD、CommonJS
- 支持作为 GruntJS 插件构建
- 前端模板可共享给 NodeJS 执行
- 自动压缩打包模板
预编译工具:TmodJS
NodeJS
安装
npm install art-template
使用
var template = require('art-template');
var data = {list: ["aui", "test"]}; var html = template(__dirname + '/index/main', data);
配置
NodeJS 版本新增了如下默认配置:
字段 | 类型 | 默认值 | 说明 |
---|---|---|---|
base | String | '' |
指定模板目录 |
extname | String | '.html' |
指定模板后缀名 |
encoding | String | 'utf-8' |
指定模板编码 |
配置base
指定模板目录可以缩短模板的路径,并且能够避免include
语句越级访问任意路径引发安全隐患,例如:
template.config('base', __dirname);
var html = template('index/main', data)
NodeJS + Express
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
//app.set('views', __dirname + '/views');
运行 demo:
node demo/node-template-express.js
js模板引擎--artTemplate的更多相关文章
- js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...
- 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(以前的artTemplate)
使用js.jquery动态生成html会非常麻烦.现在的模板引擎可以很简单的解决这个问题.比如腾讯出的art-Template 官网:http://aui.github.io/art-template ...
- js模板引擎-art-template常用
art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...
- 性能卓越的js模板引擎--artTemplate
artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...
- js模板引擎artTemplate快速上手
腾讯的artTemplate 1,编写模板 (采用script标签并带有属性id和type="text/html") <script id="test" ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
随机推荐
- Java中Volatile的作用
Java中Volatile的作用 看了几篇博客,发现没搞懂.可是简单来说,就是在我们的多线程开发中.我们用Volatile关键字来限定某个变量或者属性时,线程在每次使用变量的时候.都会读取变量改动后的 ...
- JDBC批量运行executeBatch
JDBC运行SQL语句,有两个处理的接口,一个PreparedStatement,Statement,一般操作JDBC比較用得多的还是PreparedStatement 只是在运行批量,Prepare ...
- Java class文件分析工具 -- Classpy
Classpy Classpy是一个图形化的class文件分析工具,功能和javap类似,界面主要參考了Java Class Viewer: 为什么要又一次创造轮子? 写这个工具花了将近一周的时间.那 ...
- c# datagridviewcomboboxcell值无效的解决办法
一直认为是数据库存储的数据和datagridviewcomboboxcell对不上导致,今天碰到两者对应上了,预览的时候还是提示错误, 查看了下网上其他大神的解决方法,是数据库字段类型有误,查看了下, ...
- 【Oracle】ORA-01722:无效数字(控制文件最后一个字段)
原因: 每一行物理数据最后都存在一个换行符. 如果integer或者number类型的字段位于控制文件的最后,最后其实都会有CR/LF的换行符,在用sqlldr导入时会把换行符也算作那个数字的一部分, ...
- [Swust OJ 666]--初来乍到(题号都这么溜~~,递归,找规律)
题目链接:http://acm.swust.edu.cn/problem/0666/ Time limit(ms): 1000 Memory limit(kb): 65535 Descriptio ...
- 断开/删除 SVN 链接(.svn)的几种方法
上传到正式的服务器时需要去掉这些不必要的文件,找到了几种方法: 1.windows下: xcopy project_dir project_dir_1 /s /i (从project_dir 复制文件 ...
- Pyton——int内部功能介绍
int内部功能详解: class int(object): """ int(x=0) -> integer int(x, base=10) -> intege ...
- 以正确的方式开源 Python 项目
以正确的方式开源 Python 项目 大多数Python开发者至少都写过一个像工具.脚本.库或框架等对其他人也有用的工具.我写这篇文章的目的是让现有Python代码的开源过程尽可能清 晰和无痛.我不是 ...
- centos 推荐使用epel源
centos 推荐使用epel源 张映 发表于 2011-10-13 分类目录: linux 在dell r410上面装的是centos6,64的操作系统,用的163的源,我一直都是用163的源,比较 ...