• 模板引擎小结-使用

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

              let showData = []

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

                showData.push('

    '+item.username+'河南-郑州'+item.content+'
    '+item.time+'
    ')

              })

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

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

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

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

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

    1. <h3 class="title">h3>
    2. <div>
    3.   姓名：<span id="name">span>
    4. div>
    5. <div>
    6.   年龄：<span id="age">span>
    7. div>
    8. <div>
    9.   是否会员：<span id="isVIP">span>
    10. div>
    11. <div>
    12.   注册时间：<span id="firstTime">span>
    13. div>
    14. <div>
    15.   <ul class="hobby">
    16.  
    17.   ul>
    18. div>
    19.  
    20.  
    21. <script>
    22.   /**传统渲染数据  操作太多
    23.   **/
    24.  
    25.   const data = {
    26.     title:'传统渲染',
    27.     name:'马克李',
    28.     age:24,
    29.     isVIP:'否',
    30.     firstTime:'2022-05-09',
    31.     hobby:['吃饭','睡觉','打豆豆']
    32.   }
    33.  
    34.   $('.title').html(data.title)
    35.   $('#name').html(data.name)
    36.   $('#age').html(data.age)
    37.   $('#isVIP').html(data.isVIP)
    38.   $('#firstTime').html(data.firstTime)
    39.  
    40.   $.each(data.hobby,function (i,item) {
    41.       $('.hobby').append('
    42. '+item+'
      43. ')
  • })
  • script>

    • 所以我们使用模板引擎

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

    ② 使代码结构更清晰

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

    使用步骤

    ① 导入 art-template

     

    ② 定义需要渲染的数据

      let data = {

        name:'巴达木',

        age:35,

        birthday:1987,

        start:'

    123

    ',

        flag:0,

        hobby:[

          'HTML',

          'CSS',

          'JavaScript',

          'jQuery',

          'Ajax',

          'XML',

          'Vue',

        ],

        regTime:new Date()

      }

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

    ④ 调用template函数

    let htmlStr = template('tpl',data)

    tpl 是script模板的id

    data 是要渲染的数据

    返回的是html 字符串

    ⑤ 把数据 渲染到页面当中

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

     

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

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

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

     还可以进行条件输出

      {{if flag === 0}}

        flag的值是0

        {{else if flag === 1}}

        flag的值是1

        {{/if}}

    循环输出

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

        {{each hobby}}

       

  • 学习步骤是：{{$index}}、将会依次掌握 {{$value}}

    •     {{/each}}

    还可以定义过滤器

    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

      }

    新闻列表的渲染案例

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>09新闻列表案例title>
    6.   <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js">script>
    7.   <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">
    8.   <script src="pic/template-web.js">script>
    9.   <style>
    10.     .newsny-box{width: 930px;
    11.       padding: 20px 0;
    12.       border-bottom: dashed 1px #dbdbdb;
    13.       height: 140px;
    14.       box-sizing: content-box;
    15.       margin: 0 auto}
    16.  
    17.     .newsny01{width: 180px;
    18.       height: 140px;}
    19.  
    20.     .newsny01 img{width: 215px;
    21.       height: 140px;
    22.       vertical-align: middle;}
    23.  
    24.     .newsny02{width: 690px;
    25.       height: 140px;
    26.       position: relative;}
    27.  
    28.     .newsny02 h3{font-size: 18px;
    29.       color: #333;
    30.       margin-top: 0px;
    31.       margin-bottom: 10px;}
    32.  
    33.     .newsny02 h3 a{color: #333;}
    34.  
    35.     .newsny02 h3 a:hover{color: #147ce6;}
    36.  
    37.  
    38.     .span{font-size: 14px;
    39.       color: #999;
    40.       position: absolute;
    41.       bottom:0;
    42.       right: 0px;}
    43.  
    44.     .i{font-size: 14px;
    45.       color: #999;
    46.       position: absolute;
    47.       bottom:0;
    48.       left: 0px;}
    49.  
    50.     .tab span{
    51.       display: inline-block;
    52.       margin: 0px 6px;
    53.       padding: 4px 12px;
    54.       border-radius: 8px;
    55.       background: #e5e5f5;
    56.     }
    57.  
    58.     .source{
    59.       font-size: 15px;
    60.       margin: 4px 0px 12px;
    61.     }
    62.   style>
    63. head>
    64. <body>
    65. <img src="pic/09.png" alt="" style="display: block">
    66.  
    67. <div id="newBox">div>
    68.  
    69.  
    70. <script type="text/html" id="news">
    71.   {{each data}}
    72.   
      class="newsny-box">
    73.     <div class="newsny01 fl">
    74.       <a href="#"><img src="{{'http://www.liulongbin.top:3006'+$value.img}}">a>
    75.     div>
    76.     <div class="newsny02 fr">
    77.       <h3><a href="#">{{$value.title}}a>h3>
    78.       <p class="source">来源：{{$value.source}}p>
    79.       <p class="tab">
    80.           {{each $value.tags}}
    81.         <span>{{$value}}span>
    82.           {{/each}}
    83.       p>
    84.       <span class="span">【{{$value.time|dateSet}}】span>
    85.       <i class="i">【浏览量：{{$value.cmtcount}}】i>
    86.     div>
    87.     <div class="cl">div>
    88.   div>
    89.   {{/each}}
    90. script>
    91.  
    92. <script>
    93.   $(function () {
    94.  
    95.     // function more10(...args){
    96.     //   $.each(args,function (i,ele) {
    97.     //     ele = ele<10 ? '0'+ele : ele
    98.     //     console.log(ele)
    99.     //     return ele
    100.     //   })
    101.     // }
    102.  
    103.     function Zero(x){
    104.       // if (x<10){
    105.       //   return  '0'+x
    106.       // }else {
    107.       //   return x
    108.       // }
    109.       return x = x<10 ? '0'+x : x
    110.     }
    111.  
    112.  
    113.     template.defaults.imports.dateSet = function(date){
    114.       // 注意 这里是字符串  要new Date 一下
    115.       let dt = new Date(date)
    116.       let y = dt.getFullYear()
    117.       let m = Zero(dt.getMonth() +1)
    118.       let d = dt.getDate()
    119.       let w = dt.getDay()
    120.       let h = Zero(dt.getHours())
    121.       let min = Zero(dt.getMinutes())
    122.       let s = dt.getSeconds()
    123.       let weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
    124.       return y + "-" + m + "-" + d + weeks[w] + h + "：" + min + "：" + s
    125.     }
    126.  
    127.  
    128.     function getNew() {
    129.  
    130.       $.get(
    131.         'http://www.liulongbin.top:3006/api/news',
    132.         function (res) {
    133.           if (res.status !== 200){
    134.             console.log('获取新闻失败')
    135.           }
    136.  
    137.           $.each(res.data,function (i,ele) {
    138.             // 把每一项的 tags 数组 转换为字符串
    139.             ele.tags = ele.tags.split(',')
    140.           })
    141.  
    142.           console.log(res)
    143.  
    144.           let htmlStr = template('news',res)
    145.           $('#newBox').html(htmlStr)
    146.         }
    147.       )
    148.     }
    149.  
    150.   getNew()
    151.  
    152.  
    153.  
    154.  
    155.  
    156.   })
    157. script>
    158. body>
    159. html>

  • 相关阅读:
    linux控制台命令
    Jetson Orin NX 开发指南（9）: MAVROS 的安装与配置
    设计LRU缓存（双向链表+哈希表）
    UI自动化概念 + Web自动化测试框架介绍
    Python实战项目：打乒乓（源码分享）（文章较短，直接上代码）
    【每日练习】删除公共字符
    TreeMap排序探寻
    BCC源码内容概览（4）
    微信小程序如何设置一个全局的定时器，跳转页面也不清除，只有在某个条件改变的时候才清除
    OPENCV--调用GrabCut实现图像分割
  • 原文地址：https://blog.csdn.net/benlalagang/article/details/126135514