模板引擎小结-使用

benlalagang

已于 2022-08-03 14:18:09 修改

阅读量211

点赞数

分类专栏： jquery ajax 文章标签： html javascript

于 2022-08-03 11:24:11 首次发布

本文链接：https://blog.csdn.net/benlalagang/article/details/126135514

版权

jquery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

发送网络请求将服务器返回的数据进行渲染

let showData = []

$.each(dataArr,function (i,item) {

showData.push('<div class="comments-list"><div class="left2"><span class="user">'+item.username+'</span><span class="address">河南-郑州</span><span class="comments-text">'+item.content+'</span></div><div class="right2"><span class="time">'+item.time+'</span></div></div>')

})

$('.comments').empty().html(showData)

上述代码是通过字符串拼接的形式来渲染UI结构

如果UI结构比较负载，则拼接字符串的时候要格外注意引号之前的嵌套。且一旦需求发生变化修改起来也非常麻烦。

如果分离开操作也是比较麻烦的

要重复的获取元素进行内部填充

<h3 class="title"></h3>
<div>
  姓名：<span id="name"></span>
</div>
<div>
  年龄：<span id="age"></span>
</div>
<div>
  是否会员：<span id="isVIP"></span>
</div>
<div>
  注册时间：<span id="firstTime"></span>
</div>
<div>
  <ul class="hobby">

  </ul>
</div>


<script>
  /**传统渲染数据  操作太多
  **/

  const data = {
    title:'传统渲染',
    name:'马克李',
    age:24,
    isVIP:'否',
    firstTime:'2022-05-09',
    hobby:['吃饭','睡觉','打豆豆']
  }

  $('.title').html(data.title)
  $('#name').html(data.name)
  $('#age').html(data.age)
  $('#isVIP').html(data.isVIP)
  $('#firstTime').html(data.firstTime)

  $.each(data.hobby,function (i,item) {
      $('.hobby').append('<li>'+item+'</li>')
  })

</script>

所以我们使用模板引擎

① 减少了字符串拼接的操作

② 使代码结构更清晰

③ 使代码更易于阅读与维护

使用步骤

① 导入 art-template

<script src="./template-web.js"></script>

② 定义需要渲染的数据

let data = {

name:'巴达木',

age:35,

birthday:1987,

start:'<p>123</p>',

flag:0,

hobby:[

'HTML',

'CSS',

'JavaScript',

'jQuery',

'Ajax',

'XML',

'Vue',

],

regTime:new Date()

}

③ 定义模板定义到script 标签中的type = text/html

<script type="text/html" id="tpl">

<h3>{{name}}---{{age}}</h3>

<h4>{{birthday+age}}</h4>

<h4>{{@start}}</h4>

<div>

{{if flag === 0}}

flag的值是0

{{else if flag === 1}}

flag的值是1

{{/if}}

</div>

<ul>

{{each hobby}}

<li>学习步骤是：{{$index}}、将会依次掌握 {{$value}}</li>

{{/each}}

</ul>

<h3>{{regTime|dateSet}}</h3>

</script>

④ 调用template函数

let htmlStr = template('tpl',data)

tpl 是script模板的id

data 是要渲染的数据

返回的是html 字符串

⑤ 把数据渲染到页面当中

$('#container').html(htmlStr)

介绍下第三步定义模板中的语法规则

art-template 提供了 {{}} 这种语法格式在{{}}内可以进行变量输出。或循环数组等操作。这种{{}}语法在art-template中被称为标准语法。

在{{}} 中可以及进行变量输出对象属性输出三元表达式输出加减乘除表达式输出

还可以进行条件输出

flag的值是0

flag的值是1

循环输出

{{}} 内通过each 语法循环数组，当前循环的索引使用 $index进行访问当前的循环项使用$value进行访问。

<li>学习步骤是：{{$index}}、将会依次掌握 {{$value}}</li>

还可以定义过滤器

template.defaults.imports.filterName = function(value){/*return 处理的结果*/}

// 定义处理时间的过滤器

template.defaults.imports.dateSet = function(date){

let y = date.getFullYear()

let m = date.getMonth() +1

let d = date.getDate()

return y + '-' +m +'-'+ d

}

新闻列表的渲染案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09新闻列表案例</title>
  <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">
  <script src="pic/template-web.js"></script>
  <style>
    .newsny-box{width: 930px;
      padding: 20px 0;
      border-bottom: dashed 1px #dbdbdb;
      height: 140px;
      box-sizing: content-box;
      margin: 0 auto}

    .newsny01{width: 180px;
      height: 140px;}

    .newsny01 img{width: 215px;
      height: 140px;
      vertical-align: middle;}

    .newsny02{width: 690px;
      height: 140px;
      position: relative;}

    .newsny02 h3{font-size: 18px;
      color: #333;
      margin-top: 0px;
      margin-bottom: 10px;}

    .newsny02 h3 a{color: #333;}

    .newsny02 h3 a:hover{color: #147ce6;}


    .span{font-size: 14px;
      color: #999;
      position: absolute;
      bottom:0;
      right: 0px;}

    .i{font-size: 14px;
      color: #999;
      position: absolute;
      bottom:0;
      left: 0px;}

    .tab span{
      display: inline-block;
      margin: 0px 6px;
      padding: 4px 12px;
      border-radius: 8px;
      background: #e5e5f5;
    }

    .source{
      font-size: 15px;
      margin: 4px 0px 12px;
    }
  </style>
</head>
<body>
<img src="pic/09.png" alt="" style="display: block">

<div id="newBox"></div>


<script type="text/html" id="news">
  {{each data}}
  <div class="newsny-box">
    <div class="newsny01 fl">
      <a href="#"><img src="{{'http://www.liulongbin.top:3006'+$value.img}}"></a>
    </div>
    <div class="newsny02 fr">
      <h3><a href="#">{{$value.title}}</a></h3>
      <p class="source">来源：{{$value.source}}</p>
      <p class="tab">
          {{each $value.tags}}
        <span>{{$value}}</span>
          {{/each}}
      </p>
      <span class="span">【{{$value.time|dateSet}}】</span>
      <i class="i">【浏览量：{{$value.cmtcount}}】</i>
    </div>
    <div class="cl"></div>
  </div>
  {{/each}}
</script>

<script>
  $(function () {

    // function more10(...args){
    //   $.each(args,function (i,ele) {
    //     ele = ele<10 ? '0'+ele : ele
    //     console.log(ele)
    //     return ele
    //   })
    // }

    function Zero(x){
      // if (x<10){
      //   return  '0'+x
      // }else {
      //   return x
      // }
      return x = x<10 ? '0'+x : x
    }


    template.defaults.imports.dateSet = function(date){
      // 注意 这里是字符串  要new Date 一下
      let dt = new Date(date)
      let y = dt.getFullYear()
      let m = Zero(dt.getMonth() +1)
      let d = dt.getDate()
      let w = dt.getDay()
      let h = Zero(dt.getHours())
      let min = Zero(dt.getMinutes())
      let s = dt.getSeconds()
      let weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
      return y + "-" + m + "-" + d + weeks[w] + h + "：" + min + "：" + s
    }


    function getNew() {

      $.get(
        'http://www.liulongbin.top:3006/api/news',
        function (res) {
          if (res.status !== 200){
            console.log('获取新闻失败')
          }

          $.each(res.data,function (i,ele) {
            // 把每一项的 tags 数组 转换为字符串
            ele.tags = ele.tags.split(',')
          })

          console.log(res)

          let htmlStr = template('news',res)
          $('#newBox').html(htmlStr)
        }
      )
    }

  getNew()





  })
</script>
</body>
</html>