渲染UI结构时遇到的问题
var rows = []
$.each(res.data, function (i, item) { // 循环拼接字符串
rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
上述代码是通过字符串拼接的形式，来渲染UI结构。
如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。
什么是模板引擎
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
模板引擎的好处
①减少了字符串的拼接操作
②使代码结构更清晰
③使代码更易于阅读与维护
art-template简介
art-template 是一个简约、超快的模板引擎。中文官网首页为 art-template
art-template的安装
在浏览器中访问 安装 - art-template 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。
art-template模板引擎的基本使用
1. 使用传统方式渲染UI结构
太多，太麻烦了
2. art-template的使用步骤
①导入 art-template
②定义数据
③定义模板
④调用 template 函数
⑤渲染HTML结构
感觉跟vue差不多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入模板引擎 -->
<!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板 -->
<!-- 3.1模板的HTML结构一定要定义到script中 -->
<!-- <script></script> 注意的是没有加type默认的是 -->
<!-- <script type="text/javascript"></script> -->
<script type="text/html" id="tpl-user">
<h1>{{name}}的年龄是{{age}}</h1>
</script>
<script>
// 2.定义需要渲染的数据
var data={
name:'zs',
age:19
}
// 4.调用template函数 注意的是不要加# 因为这个是已经封装好了的
var htmlstr=template("tpl-user",data)
console.log(htmlstr);
// 5.渲染html结构
$('#container').html(htmlstr)
</script>
</body>
</html>art-template标准语法
1. 什么是标准语法
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。
2. 标准语法 - 输出
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
3. 标准语法 – 原文输出
{{@ value }}
加一个@就能原文输出了
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
5. 标准语法 – 循环输出
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。
{{each arr}}
{{$index}} {{$value}}
{{/each}}
6. 标准语法 – 过滤器
{{value | filterName}}
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/*return处理的结果*/}
<div>注册时间：{{regTime | dateFormat}}</div>
定义一个格式化时间的过滤器 dateFormat 如下：
template.defaults.imports.dateFormat = function(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值
}
不使用过滤器返回结果
使用过滤器返回结果
案例 – 新闻列表
1. 实现步骤
①获取新闻数据
$(function(){
// 获取新闻列表的函数
function getNewsList(){
$.get("http://www.liulongbin.top:3006/api/news",function(res){
if(res.status!==200){
return alert('获取失败')
}
console.log(res);
})
}
getNewsList();
})
②定义 template 模板
就是把news-list里面的news-item复制到<script type="text/html">当中
③编译模板
这个data就是传给template函数的数据，就是res参数
这个是字符串需要转换为数组，这样好做
④定义时间过滤器
当前的时间并不是很好看
美化完成后
⑤定义补零函数
// 给时间补零
function padZero(n){
return n=n<=9?'0'+n:n
}完整代码
<!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" />
<title>Document</title>
<link rel="stylesheet" href="./assets/news.css" />
<script src="./lib/jquery.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./js/news.js"></script>
</head>
<body>
<div id="news-list">
</div>
<!-- 定义模板 -->
<script type="text/html" id="tpl-news">
<!-- {{data.length}} data就是传给template函数的数据，就是res参数 -->
<!-- {{data}} -->
{{each data}}
<div class="news-item">
<img class="thumb" src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="" />
<div class="right-box">
<h1 class="title">{{$value.title}}</h1>
<div class="tags">
{{each $value.tags}}
<span>{{$value}}</span>
{{/each}}
</div>
<div class="footer">
<div>
<span>{{$value.source}}</span>
<span>{{$value.time|dateFormat}}</span>
</div>
<span>评论数：{{$value.cmtcount}}</span>
</div>
</div>
</div>
{{/each}}
</script>
</body>
</html>
$(function(){
// 给时间补零
function padZero(n){
return n=n<=9?'0'+n:n
}
// 定义格式化时间的过滤器
template.defaults.imports.dateFormat=function(dtStr){
var dt=new Date(dtStr)
var y=dt.getFullYear();
var m=padZero(dt.getMonth()+1);
var d=padZero(dt.getDate())
var hh=padZero(dt.getHours())
var mm=padZero(dt.getMinutes())
var ss=padZero(dt.getSeconds())
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
// 获取新闻列表的函数
function getNewsList(){
$.get("http://www.liulongbin.top:3006/api/news",function(res){
if(res.status!==200){
return alert('获取失败')
}
// console.log(data);
// 渲染的数据就是res
for(var i=0;i<res.data.length;i++){
// 把每一项的tags属性，从字符串改造成字符串的数组
res.data[i].tags=res.data[i].tags.split(',')
}
console.log(res);
var htmlStr=template('tpl-news',res)
$('#news-list').html(htmlStr)
})
}
getNewsList();
})