• 附录9-模板引擎

    模板引擎可以根据程序员指定的模板结构和数据自动生成一个完整的HTML页面，模板引擎实质上还是一个外部文件，引入后可以便捷的进行开发，它很像后端框架中的模板层

    模板引擎的原理是正则出指定的位置，然后替换数据

    目录

    1  传统方式渲染页面

    2  模板引擎渲染页面

    2.1  下载art-template

    2.2  使用变量

    2.3  原文输出

    2.4  判断

    2.5  循环

    2.6  过滤器

    3  实现原理

    1  传统方式渲染页面

    现在我想将这些数据

    搞成这样

    我们需要这样写

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div class="title">div>
    11.     <div class="name">div>
    12.     <div class="age">div>
    13.     <div class="VIP">div>
    14.     <div class="time">div>
    15.     <ul class="hobby">ul>
    16. body>
    17. <script>
    18.     var data = {
    19.         title:'
      用户信息
      '      ,
    20.         name:'zs',
    21.         age:20,
    22.         isVIP:true,
    23.         regTime:new Date(),
    24.         hobby:['吃饭','睡觉','打豆豆']
    25.     }
    26.  
    27.     document.querySelector('.title').innerHTML = data.title
    28.     document.querySelector('.name').innerHTML = data.name
    29.     document.querySelector('.age').innerHTML = data.age
    30.     if (data.isVIP) {
    31.         document.querySelector('.VIP').innerHTML = '是'
    32.     }
    33.     else {
    34.         document.querySelector('.VIP').innerHTML = '否'
    35.     }
    36.     document.querySelector('.time').innerHTML = data.regTime
    37.     for (i in data.hobby) {
    38.         li = document.createElement('li')
    39.         li.innerHTML = data.hobby[i]
    40.         document.querySelector('ul').appendChild(li)
    41.     }
    42. script>
    43. html>

    2  模板引擎渲染页面

    我们以art-template为例认识一下模板引擎，art-template官网地址 art-template

    2.1  下载art-template

    可以在这里下载 art-template的源码 GitHub - aui/art-template: High performance JavaScript templating engine

    下载解压后可以在lib中找到template-web.js，我们在需要的时候用script的src进行引用就可以了

    2.2  使用变量

    使用模板要用到script标签的type属性，script默认的type属性是text/javascript,使用模板时，我们需要创建一个type为text/html的script标签

    之后定义data，然后使用template方法，template()第一个参数是类型为type的script的id，第二个参数是要传入的数据。

    之后在类型为type的script中用{{}}的方式引入要使用的变量

    emplate()的返回值是html字符串

    最后将template()的返回值渲染到页面上就可以了

    除了使用{{value}}直接引用变量，还有下面这几种方式可以使用变量

    2.3  原文输出

    当调用的变量中是html字符串的时候，如果仅使用{{}}调用变量会渲染成这样

    这个时候我们可以在变量前加入@以进行原文输出

    这样就可以达到我们想要的效果了

    2.4  判断

    在判断中else if与else都是可以写也可以不写的

    2.5  循环

    {{$index}}是索引,{{$value}}是值

    2.6  过滤器

    定义过滤器的语法是这样的

    使用过滤器的语法是这样的

    我们下面做个例子，我们之前搞的时间是这样的

    我们现在只获取其中的年月日

    3  实现原理

    模板引擎的原理是正则出指定的位置，然后替换数据

    首先定义一个函数

    1. function my_template(id,data) {
    2.     a = document.getElementById(id).innerHTML
    3.     var b = /{{\s*([a-zA-Z]+)\s*}}/
    4.  
    5.     var result = null
    6.     while (result = b.exec(a)) {
    7.         a = a.replace(result[0],data[result[1]])
    8.     }
    9.  
    10.     return a
    11. }

    然后引入文件，定义模板，定义数据，调用函数，渲染页面

    这样就可以显示出来了 

  • 相关阅读:
    用Python画只三脚猫，不忍直视！
    网路通信之校验和
    2023《生信知识库》订阅
    H5微信端在IOS上不能播放音乐解决方案
    抓包工具 Charles 使用手册
    快速排序(c语言代码实现)
    动态规划之数组压缩空间、星号技巧【3】
    Python：函数调用的实参
    odoo16 Model的操作符重载
    改变Bootstrap4、Bootstrap5中复选框的颜色
  • 原文地址：https://blog.csdn.net/potato123232/article/details/127816276