模板引擎
- 作用:用于JSON数据中生成字符串
- 常用模板引擎:
1.Art-template
2.DOT
3.JavaScript-Templates
4.Template.js
5.Tempo
6. ECT
7. Dot Dom
8.Template7
9.Bunny
10.Squirrelly
11.ejs - 模板代码写在script标签中
script 标签的特点是:
1.标签内容永远不会显示在界面上
2. 如果 type 不等于 text/javascript 的话,内部的内容不会作为 JavaScript 执行
Art-template
介绍:
是一个简单且超快速的模板引擎,可通过范围预先声明的技术优化模板渲染速度。
它实现了接近JavaScript极限的运行时性能。同时,它支持NodeJS和浏览器。
- 拥有接近 JavaScript - 渲染极限的的性能
- 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
- 支持 Express、Koa、Webpack
- 支持模板继承与子模板
- 浏览器版本仅 6KB 大小
官方下载链接
链接: 下载地址
模板语法的用法
- 将下载的
art-template.js
文件复制进在生产的 js 文件中,然后用 <script>标签引入到 html中
<!-- 引入art-template模板库 -->
<script src="./js/template-web.js"></script>
- 编写HTML模板
<!-- 编写模板语法 -->
<div id="box">
<script id="test" type="text/html">
<h1>{{ title }}</h1>
</script>
</div>
- 向模板插入数据,并输出到页面
<script>
let data={
title:"hello world"
}
var html = template("test",data)
const divEle= document.getElementByID('#box')
divEle.indexHTML = html
</script>
语法
- 模板插值语法 {{ 变量 }} 如 {{ title }}
- 流程控制语句 (if else)可以用来判断
- 循环遍历语句
each
关键字后面跟上要循环的数组
$index
:索引号
$value
:数项
用循环遍历的方法渲染商品列表代码演示
<table>
<!-- 定义显示商品列表模板 -->
<script type="text/html" id="table1">
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>状态</th>
</tr>
{{ each list}}
<tr>
<td>{{ $index }}</td>
<td>{{ $value.name}}</td>
<td>{{ $value.price}}</td>
<td>{{ $value.num}}</td>
<!-- <td>{{ $value.state?'正常':'不正常' }}</td> -->
<td>
{{ if $value.state }}
<button style="color: red;" onclick="setState({{ $index }})">正常</button>
{{ else }}
<button style="color: green;" onclick="setState({{ $index }})">不正常</button>
{{ /if}}
</td>
</tr>
{{ /each}}
</script>
</table>
<script>
let data = {
list: [{
name: 'javascript高级编程',
price: 80.98,
num: 10,
state: false
},
{
name: 'vue高级编程',
price: 180.98,
num: 2,
state: true
},
{
name: 'react高级编程',
price: 220.98,
num: 5,
state: false
},
]
}
const tableEle = document.querySelector('table')
//渲染商品列表
let productListStr = template('table1', data)
tableEle.innerHTML = productListStr
/**
* 设置状态
*/
function setState(index) {
let product = data.list[index]
product.state = !product.state
//渲染商品列表
let productListStr = template('table1', data)
tableEle.innerHTML = productListStr
}
</script>