高性能JavaScript模板引擎template.js原理解析

点击有惊喜

artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试);artTemplate的模板还支持使用自动化工具预编译;

artTemplate的库分为两种,一个是template.js(采用"{{ }}"),一个是template-native.js(采用"<%= %>");第一个是简洁语法版,第二个是原生语法(感觉像JSP)版,两个库的语法不可混用,否则会报错;本文主要是讲简洁语法

template.js是一款使用方便/性能卓越javascript模板引擎,简单/好用,支持webpack和fis,只有5K左右大小

原理

提前将Html代码放进一个<script id="test" type="text/html"></script>中,当需要用到时,在js里这样调用:var htmlstr = template("test",放Json数据或其他),然后$("#*").html(htmlstr),放进去就好

功能概述

提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果

特性

1.性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)

2.支持运行时调试,可精确定位异常模板所在语句(演示)

3.对NodeJS Express友好支持

4.安全,默认对输出进行转义,在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

5.支持include语句,可导入定义的其它模块

6.可在浏览器端实现按路径加载模板(详情)

7.支持预编译,可将模板转换成为非常精简的js文件

8.模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选

9.支持所有流行的浏览器

10.丰富的自定义配置

11.支持数据过滤

12.异常捕获功能

具体方法

引入template.js文件

引用简洁语法的引擎版本,例如:<script src="template.js"></script>

编写模板

使用一个type="text/html"的script标签存放模板,或者放到字符串中:

<script id="test" type="text/html">  {{ if ifAdmin }}  //{{}}符号包裹起来的语句为模板的逻辑表达式<h1>{{ author }}</h1><ul>{{each list as value i}}<li>{{ i+1 }} : {{ value }}</li>{{/each}}</ul>{{/if}}
</script>

注意:{{}}这是都是对内容编码输出,写成{{#author}}是对内容不编码输出;编码可以防止数据中含有HTML字符串,避免引起XSS攻击

渲染模板(向模板插入数据并输出到页面)

var data = { author:'宫崎骏',isAdmin:true,list:['千与千寻','哈尔的移动城堡','幽灵公主','风之谷','龙猫']
};
var html = template('test',data); //template(id,data):根据id渲染模板,内部会根据document.getElementById(id)查找模板,如果没有data参数那么将返回一渲染函数
document.getElementById('content').innerHTML = html;

输出结果

<h1>宫崎骏</h1>
<ul><li>1 : 千与千寻</li>  <li>2 : 哈尔的移动城堡</li> <li>3 : 幽灵公主</li>  <li>4 : 风之谷</li> <li>5 : 龙猫</li>
</ul>

语法

表达式

流程控制语句(if else)

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

示例如下

<script id="test" type="text/html"><div>{{if bok == 22}}<h1>线上</h1>{{else if bok == 33}}<h2>隐藏</h2>{{else}}<h3>走这里</h3>{{/if}}</div>
</script>

嵌套的写法

<script id="test" type="text/html"><div>{{if bok}}{{if list.length >= 0}}<p>线上</p>{{else}}<p>没有数据</p>{{/if}}{{/if}}</div>
</script>

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

示例如下

<script id="test" type="text/html"><div>{{if list.length >= 0}}{{each list as value index}}<p>编号：{{index+1}} -- 姓名：{{value.name}} -- 年龄：{{value.age}}</p>{/each}{{/if}}</div>
</script>

也可以简写为

<script id="test" type="text/html"><div>{{if list.length >= 0}}{{each list}}<p>编号：{{$index+1}} -- 姓名：{{$value.name}} -- 年龄：{{$value.age}}</p>{/each}{{/if}}</div>
</script>

调用自定义方法

辅助方法

使用template.helper(name, callback)注册公用辅助方法,可以直接在{{}}中调用:

<script id="test" type="text/html">  <div>{{if c == 100}}<ul>{{each person}}<li>姓名：{{$value.name}} -- 性别：{{show($value.sex)}}</li>{{/each}}</ul>{{/if}}</div>
</script>
<script>var data = {c:100,person:[{name:"jack",age:18,sex:1},{name:"tom",age:19,sex:0},{name:"jerry",age:20,sex:0},{name:"kid",age:21,sex:1},{name:"jade",age:22,sex:0}]};//自定义函数template.helper('show',function(sex){console.log(sex); //同样可以打印日志到控制台if(sex == 0){return "男"}else if(sex == 1){return "女"}});var html = template('test',data);document.getElementById('app').innerHTML = html;
</script>

辅助方法,可以扩展常用的公共方法

template.helper('dateFormat', function (date, format) { // .. return value;
});

在模板中的使用方式：

语法 : {{ data | funname : '第二参数' }};

具体调用为 : funname(data,'第二参数');

模板中使用的方式:{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持传入参数与嵌套使用:{{time | say:'cd' | ubb | link}}

注意:引擎不会对辅助方法输出的HTML字符进行转义

调用子模版

{{include 'main'}}引入子模板,数据默认为共享;{{include 'main' a}},a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的

<body><div id="app"></div><script id="main" type="text/html">  <ul>{{each list}}<li>{{$value}}</li>{{/each}}</ul>  {{include 'main' a}} <!-- include--导入其它模版,很实用的一个功能 --></script><script type="text/html"><div><ul>{{each person}}<li>{{$value.name}}</li>{{/each}}</ul>{{include 'main' a}}</div></script><script>var data = {person:[{name:"jack",age:18},{name:"tom",age:19},{name:"jerry",age:20},{name:"kid",age:21},{name:"jade",age:22}],a:{list:['文艺','博客','摄影','电影','民谣','旅行','吉他']}};var html = template('test',data);document.getElementById('app').innerHTML = html;</script>
</body>

点击有惊喜