2022/8/11 首先是trmplate()模板化，有案例-CSDN博客

本文链接：https://blog.csdn.net/weixin_54534229/article/details/126282438

这篇博客介绍了2022年8月11日的前端开发实践，重点关注了template()模板化技术的使用，通过案例展示了如何进行HTML内容的渲染。文章还探讨了正则表达式和字符操作，特别是如何运用while循环和replace方法。此外，博主提到了自定义模板引擎的实现。

摘要由CSDN通过智能技术生成

//template('授权id'，需要渲染的数据对象)

 <div id="text"></div>
    <!-- 标签内写模板结构指定html -->
    <script type="text/html" id="user">
        <h1>{{name}}-----{{age}}</h1>
 
    </script>
    <script>
        let data = {
            name : '张三',
            age : 20,
        }
        //调用tempalet函数
       let htmstr =  template('user',data)
       document.querySelector('#text').innerHTML = htmstr
    </script>

原文输出语法:{{@ text}}

以下为关于渲染你的综合案例


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./assets/news.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>
  <script src="./js/news.js"></script>
</head>

<body>

  <div id="news-list"></div>

  <!-- 定义模板 -->
  <script type="text/html" id="tpl-news">
      {{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>
                   source为新闻来源
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

</body>

</html>

$(function () {
    //补零
    function zero (n) {
        if (n<10) {
        return '0'+n
     }
        else {
            return n
        }

    }
   
  
    // 定义格式化时间的过滤器
    template.defaults.imports.dateFormat = function (dtStr) {
      var dt = new Date(dtStr)
  
      var y = dt.getFullYear()
      var m = zero(dt.getMonth() + 1)
      var d = zero(dt.getDate())
  
      var hh = zero(dt.getHours())
      var mm = zero(dt.getMinutes())
      var ss = zero(dt.getSeconds())
  
      return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
    }
  
    // 获取新闻列表的函数
    function getNewsList() {
      $.get('http://www.liulongbin.top:3006/api/news', function (res) {
        if (res.status !== 200) {
          return alert('获取新闻列表数据失败！')
        }
        for (var i = 0; i < res.data.length; i++) {
          // 把每一项的 tags 属性，从字符串改造成字符串的数组
          res.data[i].tags = res.data[i].tags.split(',')
        }
        
        var htmlStr = template('tpl-news', res)
        $('#news-list').html(htmlStr)
      })
    }
  
    getNewsList()
  
  })

关于正则和字符操作

 let str = '<div>我是{{name}}</div>'
       let pa = /{{([a-zA-Z]+)}}/
       //得到name相关内容
       let res = pa.exec(str)
       console.log(res)

 let str = '<div>我叫{{name}}</div>'
       let pa = /{{([a-zA-Z]+)}}/
       let res = pa.exec(str)
      let ress = str.replace(res[0],res[1])
       console.log(res)

//多次replace
       let str = '<div>{{name}}今年{{age}}岁了</div>'
       let pattern = /{{\s*([a-zA-Z]+)\s*}}/  //+代表至少出现一次
       //第一次匹配
       let res1 = pattern.exec(str)
       str.replace(res1[0],res1[1])
       console.log(str)
       //第二次匹配
       let res2 = pattern.exec(str)
       str = str.replace(res2[0],res2[1])
       console.log(str)

利用while循环replace

 //使用while进行replace操作
       let str = '<div>{{name}}今年{{age}}岁了</div>'
       let pattern = /{{\s*([a-zA-Z]+)\s*}}/  //+代表至少出现一次
       let parres = null
       while(parres=pattern.exec(str)){
        str = str.replace(parres[0],parres[1])
       }
       console.log(str)



 let data = {name:'张三',age:20}
       let str = '<div>{{name}}今年{{age}}岁了</div>'
       let pattern = /{{\s*([a-zA-Z]+)\s*}}/  //+代表至少出现一次
       let parres = null
       while(parres=pattern.exec(str)){
       str = str.replace(parres[0],data[parres[1]])
       }
       console.log(str)

调用自己的模板引擎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/modereplace.js"></script>
    
</head>
<body>
    <div id="user-box"></div>
    
    <script type="text/html" id="tpl-user">
        
        <div>姓名:{{name}}</div>
        <div>年龄:{{ age }}</div>
        <div>性别:{{  gender}}</div>
        <div>住址:{{address  }}</div>
     </script>
     <!-- 预调用 -->
     <script>
       
 
      //定义数据
      let data = {name:'za',age:28,gender:'男',address:'翻斗花园'}
      //预调用模板引擎
      let htmlStr = template('tpl-user',data)
      //渲染结构
      document.getElementById('user-box').innerHTML = htmlStr


     </script>
      
</body>
</html>

function template( id , data) {
  let str = document.getElementById(id).innerHTML
  let pattern = /{{\s*([a-zA-Z]+)\s*}}/
  let pattResult = null
  while( pattResult=pattern.exec(str)) {
    str = str.replace(pattResult[0], data[pattResult[1]])
  }
  return str
}