模板引擎
这里只引入一种模板引擎的介绍,更多方法可以查询文档
art-Template 模板引擎介绍
简介：
- artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
特性：
- 拥有接近 JavaScript 渲染极限的的性能
- 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
- 支持 Express、Koa、Webpack
- 支持模板继承与子模板
- 浏览器版本仅 6KB 大小
模板：
- art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
模板引擎的使用：
1.首先需要引入插件：
- 可以在官网（http://aui.github.io/art-template/zh-cn/）去下载‘template-web.js’
- 引入方式：
<script src="./template-web.js"></script>
2.语法:
- 输出:
- 标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
- 原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
- 条件：
- 标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
- 原始语法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
- 循环：
- 标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
- 原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
- 注：另有其他语法可以查看官网（http://aui.github.io/art-template/zh-cn/）文档
核心方法:
template(filename, content): 根据模板名渲染模板。返回动态生成的页面结构
案例：使用模板引擎简写语法渲染首页
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hero - Admin</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.hero-list img {
width: 50px;
height: 50px;
display: block
}
.hero-list td {
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<header>
<div class="page-header container">
<h1>王者荣耀 <small>英雄管理器</small></h1>
</div>
</header>
<div class="container hero-list">
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>性别</th>
<th>头像</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>jack</td>
<td>男</td>
<td><img src="http://127.0.0.1:3002/images/1.jpg"></td>
<td><a href="#">查看</a> <a href="javascript:;">修改</a>
<a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</div>
<!-- 下面创建页面动态结构所需要的模板 -->
<!--type属性就是规范了里面的代码以何种语法进行解析 ，script默认的type为text/javascript,script有默认的type,如果设置类型为text/template，那么浏览器知道这不是js,也不会按js语法进行解析，
同时它还知道这是一个模板结构，所以会按模板结构的语法处理 -->
<script type="text/template" id='listTemp'>
{{each data as value index}}
<tr>
<td>{{i+1}}</td>
<td>{{value.name}}</td>
<td>{{value.gender}}</td>
<td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td>
<td><a href="#">查看</a> <a href="javascript:;">修改</a>
<a href="javascript:;">删除</a></td>
</tr>
{{/each}}
</script>
<!-- 引入jq -->
<script src="./js/jquery.min.js"></script>
<!-- 引入模板引擎 -->
<script src="./js/template-web.js"></script>
<script>
$(function () {
// 页面一加载就发起ajax请求
$.ajax({
type: 'get',
url: 'http://127.0.0.1:3002/getalldata',
dataType: 'json',
success: function (result) {
console.log(result)
if (result.code == 200) {
// 调用模板引擎，生成动态结构
var html = template('listTemp', result)
// 将动态结构填充到页面指定结构
$('#tbody').html(html)
}
}
})
})
</script>
</body>
</html>
