JavaScript模板引擎Template.js使用
籍永安
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法。template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。
特性
1.性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍
2.支持运行时调试，可精确定位异常模板所在语句。
3.对 NodeJS Express 友好支持。
4.、支持预编译，可将模板转换成为非常精简的 js 文件。
5.模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选。
用法
1.第一步首先要进行引入
引用简洁语法的引擎版本，例如
<script src="dist/template.js"></script>
- 要有一个模板
（1）必须是scrip标签
（2）scrip标签必须有type属性，并且type属性不能为
ext/javascript 最好是text/html (有标签提示)
（3）必须有一个id
<script type="text/html" id="tpl">
//这里拼接html结构
</script>
3.调用模板 生成html，template
<script id="tpl" type="text/html">
{{each list value}}
<tr>
<td>{{value.heroName}}</td>
<td>{{value.skillName}}</td>
<td><img src="{{value.heroIcon}}" alt="" /></td>
</tr>
{{/each}}
</script>
注意：each后面的 list是你要便利的数组，而value就是值。
(2)另外的一种写法
<script id="tpl" type="text/html">
{{each list}}
<tr>
<td>{{$value.heroName}}</td>
<td>{{$value.skillName}}</td>
<td><img src="{{$value.heroIcon}}" alt="" /></td>
</tr>
{{/each}}
</script>
不要这个 value，在内容里面加上这个$符号也可以
4.最后调用这个模板
var html = template("tpl",{username:"zhangsan",age:"20"});
这个tpl就是定义的id
实例
记住这四步然后看看怎么使用模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./第二次ajax/art-template模板的使用/template-web.js"></script>
<title>Document</title>
</head>
<body>
<script type="text/html" id="tpl">
<h1>{{username}}{{age}}</h1>
</script>
<script type="text/javascript">
var html = template("tpl",{username:'zhangsan',age:'20'}) //调用template模板,与数据username进行拼接,返回值是拼接好的字符串
console.log(html);
</script>
</body>
</html
在渲染数据上过多，推荐使用这个方法，且使用非常的方便。
类似资料：