五、art-template模板引擎
1、art-template 简介
art-template 是一个简约，超快的模板引擎，中文官首页：http://aui.github.io/art-template/zh-cn/index.html
2、安装 art-template
- 浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html
- 找到 安装 导航栏，找到下载链接，右键下载即可
3、art-template 模板引擎基本使用
- 导入
art-template
- 在window全局，就多了一个函数，叫做 template(‘模板id’，需要渲染的数据对象)
<script src="./lib/template-web.js"></script>
- 定义数据
const data = { name: 'zs', age: 20}
定义模板
- 模板的 HTML 结构，必须定义到
script标签中，注意：需要把type属性改成text/html - 给 模板 添加一个
id - 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找 我们调用 template() 函数 第二个参数里面对应的
name属性的值
<script type="text/html" id="tpl-user"> <h1>{{name}} ------ {{age}}</h1> </script>
调用 template 函数
- 函数的返回值就是拼接好的模板字符串
const htmlStr = template('tpl-user', data)
渲染HTML结构
- 最后我们需要把template返回的模板字符串设置到页面容器中
$('#container').html(htmlStr)
4、art-template 标准语法
art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法
- 输出
语法：
{{ value }} {{ obj.key }} {{ obj['key'] }} {{ a ? b : c }} {{ a || b }} {{ a + b }}
- 在 {{}} 语法中，可以进行 变量 的输出，对象属性 的输出，三元表达式 输出，逻辑或 输出，加减乘除等表达式 输出
- 原文输出
语法：
{{@ value }}
- 如果输出的 value 值中，包含了 HTML 标签结构，则需要使用 原文输出 语法，才能保证HTML标签被正常渲染
注意：@前面不能有 空格 - 条件输出
如果要实现条件输出，则可以在 {{}} 中使用 if…else if…/if 的方式，进行按需输出
语法：
{{ if flag == 0 }} 当 flag 等于 0 时进行输出 {{ else if flag == 1 }} 当 flag 等于 1 时进行输出 {{ /if }}
循环输出
如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问
语法：
{{ each arr }} {{ $index }} {{ $value }} {{ /each }}
- 过滤器
过滤器本质就是一个 function 函数
语法：
{{ value | filterName }}
过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){ return 处理结果 }
案例 - 格式化时间过滤器
- 定义数据
const data = { regTime: new Date() }
- 定义过滤器函数
template.defaults.imports.dateFormat = (date) => { const y = date.getFullYear(); const m = date.getMonth() + 1; const d = date.getDate(); return y + "-" + m + "-" + d; };
在模板引擎中使用过滤器
<div>注册时间为：{{ regTime | dateFormat }}</div>
六、案例 - 新闻列表
获取新闻列表数据
- 定义函数，获取新闻列表数据
getNewsList() - 查阅接口文档，关注 请求
url，请求方式，请求参数，响应数据 - 利用
$.ajax()发起请求 - 在回调函数中，判断请求是否成功
代码：
// 获取新闻列表 function getNewsList() { $.ajax({ method: "GET", url: "http://www.liulongbin.top:3006/api/news", data: {}, success: function (res) { if (res.status !== 200) { return alert("获取数据失败！"); } console.log(res); }, }); }
定义新闻列表 item 模板
- 创建 script 标签，更改type属性值为
text/html，给模板定义id - 找到静态页面中 item 的结构，拷贝到模板里面
代码：
<script type="text/html" id="tpl-info"> <div class="news-item"> <img class="thumb" src="" alt="" /> <div class="right-box"> <h1 class="title">5G商用在即，三大运营商营收持续下降</h1> <div class="tags"> <span>三大运营商</span> <span>中国移动</span> <span>5G商用</span> </div> <div class="footer"> <div> <span>胡润百富</span> <span>2019-10-28 10:14:38</span> </div> <span>评论数：66</span> </div> </div> </div> </script>
编译模板渲染结构
- 在请求成功的回调里面，先对返回数据进行改造，里面返回的
tags是一个字符串，我们需要分割成数组 - 调用
template()方法，传入id和返回的数据 - 把函数的返回值添加到页面容器中
- 在模板中利用
each遍历列表 - 利用
$value能够拿到每一个item项 - 设置图片
img，**注意：**需要拼接请求根路径 - 设置标题
title 设置标签，注意：标签在之前改造成数组了，这里又需要进行遍历设置来源 source设置时间，注意：时间需要格式化，利用过滤器来实现设置评论数 cmtcount
代码：
<script type="text/html" id="tpl-info"> {{ 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>
定义格式化时间过滤器
- 调用
template.defaults.imports添加dateFormat()函数
代码：
// 定义格式化时间过滤器 template.defaults.imports.dateFormat = (dateStr) => { const date = new Date(dateStr); const y = padZero(date.getFullYear()); const m = padZero(date.getMonth() + 1); const d = padZero(date.getDate()); const hh = padZero(date.getHours()); const mm = padZero(date.getMinutes()); const ss = padZero(date.getSeconds()); return y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss; }; // 定义补 0 函数 function padZero(n) { if (n >= 10) return n; return "0" + n; }
七、模板引擎的实现原理
1、正则与字符串操作
- exec 函数
exec() 函数用于 检索字符串 中的正在表达式的匹配
如果字符串中又匹配的值，则返回该匹配值，否则返回 null
语法：
RegExpObject.exec(string)
代码：
let str = "Hello"; let pattern = /x/; let result = pattern.exec(s); console.log(result);
- 分组
正则表达式中 （） 包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下：
var str = '<div>我是{{name}}</div>' var pattern = /{{([a-zA-Z]+)}}/ var result = pattern.exec(str) console.log(result)
- 字符串的 replace 函数
replace() 函数用于在字符串中 用一些字符 替换 另一些字符的
语法：
var result = "123456".replace('123', 'abc') console.log(result); // abnc456
代码：
let str = "<div>我是{{name}}</div>"; const pattern = /{{([a-zA-Z]+)}}/; const patternResult = pattern.exec(str); const result = str.replace(patternResult[0], patternResult[1]); console.log(result); // <div>我是name</div>
- 多次 replace
代码：
let str = "<div>我是{{ name }}，今年{{ age }}岁。</div>"; const pattern = /{{\s*([a-zA-Z]+)\s*}}/; // 第一次匹配 const res1 = pattern.exec(str); str = str.replace(res1[0], res1[1]); // 第二次匹配 const res2 = pattern.exec(str); str = str.replace(res2[0], res2[1]); console.log(str); // <div>我是name，今年age岁。</div> // 第三次匹配 const res3 = pattern.exec(str); console.log(res3); // null
使用循环来 replace
代码：
var str = "<div>我是{{ name }}，今年{{ age }}岁。</div>"; var pattern = /{{\s*([a-zA-Z]+)\s*}}/; let patternResult = null; while ((patternResult = pattern.exec(str))) { str = str.replace(patternResult[0], patternResult[1]); } console.log(str); // <div>我是name，今年age岁。</div>
替换成真实内容
代码：
const data = { name: "章三", age: 20 }; let str = "<div>我是{{name}}，今年{{ age }}岁了。</div>"; const pattern = /{{\s*([a-zA-Z]+)\s*}}/; let patternResult = null; while ((patternResult = pattern.exec(str))) { str = str.replace(patternResult[0], data[patternResult[1]]); } console.log(str); // <div>我是章三，今年20岁了。</div>
2、实现简易的模板引擎
- 定义模板结构
代码：
<script type="text/html" id="tpl-user"> <div>姓名：{{name}}</div> <div>年龄：{{ age }}</div> <div>性别：{{ gender}}</div> <div>住址：{{address }}</div> </script>
预调用模板引擎
代码
<script> // 定义数据 var data = { name: "章三", age: 28, gender: "男", address: "杭州江干4号大街" }; // 调用模板引擎 var htmlStr = template("tpl-user", data); // 渲染HTML结构 document.getElementById("user-box").innerHTML = htmlStr; </script>
封装 template 函数
代码
function template(id, data) { var str = document.getElementById(id).innerHTML; var pattern = /{{\s*([a-zA-Z]+)\s*}}/; var pattResult = null; while ((pattResult = pattern.exec(str))) { str = str.replace(pattResult[0], data[pattResult[1]]); } return str; }
- 导入并使用自定义的模板引擎
