模板引擎art-template

最新推荐文章于 2024-07-16 17:18:30 发布

Youser511

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量206

点赞数

分类专栏：学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45025670/article/details/126108122

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

模板引擎

之前渲染ul遇到问题

字符串拼接，html标签和js混淆在一起，修改起来非常麻烦

var str = `
        <li class="list-group-item">
          <span class="badge" style="background-color: orchid;">评论时间:${item.time}</span>
          <span class="badge" style="background-color:aquamarine;">评论人:${item.username}</span>
          ${item.content}
        </li>
        `

模板引擎网站

http://aui.github.io/art-template/zh-cn/docs/index.html

好处

减少了字符串的拼接
代码结构更简单
代码易于阅读和维护

模板引擎使用

<!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>
  <!-- 1 导入模板引擎 -->
  <!-- 提供一个全局函数  template('模板的id',需要渲染的数据) -->
  <script src="./js/template-web.js"></script>
  <script src="./js/jquery.js"></script>
</head>
<body>

  <a href="#">百度</a>
  <a href="javascript:;">百度</a>

  <div id="container"></div>
  <!-- 3定义模板 -->
  <script type="text/html" id="tpl_user">
     <div>
       {{name}}------{{age}}
       <hr/>
       {{if flag === 0}}
        flag的值为0
       {{else if flag ===1}}
       flag的值为1
       {{/if}}
     </div>
     <ul>
      {{each hobby}}
      <li>索引为{{$index}}循环的值为{{$value}}</li>
      {{/each}}
     </ul>

     <h3>{{time | dateFormat}}</h3>
  </script>
  <script>

// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function(date){
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  return y + '-' + m + '-' + d;
}



  // 2  定义需要渲染的数据
  var data = {
    name:"zs",
    age:12,
    test:"<a href='#'>超链接</a>",
    flag:1,
    hobby:['吃','喝','玩','乐'],
    time:new Date()
  }

// template
console.log(template)

// 4调用template函数
var htmlStr = template('tpl_user',data);
console.log(htmlStr)

// 5渲染html结构
$("#container").html(htmlStr);

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