Ajax第二天笔记总结（二)-阿里云开发者社区

五、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>&nbsp;&nbsp;
              <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>&nbsp;&nbsp;
              <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;
}

导入并使用自定义的模板引擎

Ajax第二天笔记总结（二)

五、art-template模板引擎

1、art-template 简介

2、安装 art-template

3、art-template 模板引擎基本使用

4、art-template 标准语法

六、案例 - 新闻列表

七、模板引擎的实现原理

1、正则与字符串操作

2、实现简易的模板引擎

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Ajax第二天笔记总结（二)

五、art-template模板引擎

1、art-template 简介

2、安装 art-template

3、art-template 模板引擎基本使用

4、art-template 标准语法

六、案例 - 新闻列表

七、模板引擎的实现原理

1、正则与字符串操作

2、实现简易的模板引擎

热门文章

最新文章

相关课程

相关电子书