art-template
作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。
官方地址：
https://aui.github.io/art-template/zh-cn/index.html
传统网站数据是在服务端拼接的,使用ajax是在前端将数据和html拼接
art-template 前后端通用
<!--1. 使用步骤: -->
1.下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>
2.准备 art-template 模板
<script id="tpl" type="text/html">
<div class="box"></div>
</script>
3.告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template('tpl', {username: 'zhangsan', age: '20'});
4.将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html; //插入到元素container内
5.通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tpl" type="text/html">
<div class="box"> {{ username }} </div>
</script>
<head>
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
<h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
// 3.告诉模板引擎将那个数据和哪个模板进行拼接
// 1) 模板id 2)数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', { username: 'zhangsan', age: 30 });
document.getElementById('container').innerHTML = html;
</script>
</body>
模板语法
<!--1. 插值表达式: -->
标准语法： {{ 数据 }}
<!--2. 插值表达式中可以进行运算，最终显式运算的结果: -->
标准语法
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!--3. 原文输出: -->
如果数据中携带HTML标签，默认不会解析标签，会将其转义后输出。使用以下方式可以解析标签。
{{@ value }}
或者
{{#html}} //改成这种写法
<!--4. 条件判断: -->
标准语法
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
实例:
{{if age > 18}}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
<!--5. 数据循环: -->
{{each target}}
{{$index}} {{$value}}
{{/each}}
记忆循环的语法 {{each 变量名}}...{{/each}}
each 后面跟的是遍历的数据的变量名，需要跟传入进来的值的名一致
{{$index}} 获取的是索引，{{$value}} 获取的是数组里面当前的元素
实例:
<ul>
{{each users}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
<!--6. 子模板: -->
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
标准语法
{{include './header.art'}}
实例:
{{ include './common/header.art' }} //对文件进行引入
<div> {{ msg }} </div>
<!--7. 模板继承: -->
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
{{extend './layout.html'}} //直接引入
{{block 'head'}} ... {{/block}}
实例:
//文件layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
{{block 'link'}} {{/block}} //留坑位
</head>
<body>
{{block 'content'}} {{/block}}
</body>
</html>
文件://05.art
{{extend './common/layout.art'}} //使用继承引入,
{{block 'content'}} //对应名字填坑
<p>{{ msg }}</p>
{{/block}}
{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}
<!--8 导入模板变量 -->
有的时候我们需要在模板引擎里面导入其他的一些对象，例如：我们需要在模板里面进行日期的格式化，所以我们需要进行导入模板变量
语法:
template.defaults.imports.变量名 = 变量值; //导入
$imports.变量名称 //外部导入的变量 以及全局变量 //使用
//在模板引擎里面进行引入:
<div>$imports.dataFormat(time)</div>
在script里面进行导入:
function dateFormat（未格式化的原始时间）{
return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;
示例:
<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>当前时间是：{{$imports.dateFormat(date)}}</div> // 使用
</script>
<script>
window.onload = function () {
// 将方法导入到模板中，注意：需要在调用方法之前进行导入
template.defaults.imports.dateFormat = dateFormat; //导入下面那个函数
// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
var html = template('tpl', {
date: new Date()
});
document.getElementById('container').innerHTML = html;
function dateFormat(date) {
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
}
}
// function dateFormat(date) {
// return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
// } //如果是在全局作用域下是可以直接使用不用导入的
</script>
<!-- 注意-->
渲染时先渲染html结构,ji放在后面
<!-- 9,向模板中开放外部变量,处理数据 -->
{{each info}}
<tr>
<td>{{dateFormat($value.update_time)}}</td>
</tr>
{{/each}}
<script>
function dateFormat(date) {
var year = date.substr(0, 4);
var month = date.substr(4, 2);
var day = date.substr(6, 2);
var hour = date.substr(8, 2);
var minute = date.substr(10, 2);
var seconds = date.substr(12, 2);
return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
}
// 向模板中开放外部变量
template.defaults.imports.dateFormat = dateFormat;
</script>
<!-- 10. // 克隆 -->
var contant = $('.warp').clone()
$('#addBoxShadow').html(contant.html)
$('#addBoxShadow form').find('.form-control').each
``
