模板引擎

渲染 UL 结构遇到的问题

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

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

什么是模板引擎

模板引擎，顾名思义，它河以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处

减少了字符串的拼接操作

使代码结构更清晰

使代码更易于阅读和维护

模板引擎怎么用

下载地址 : http://aui.github.io/art-template/zh-cn/

模板引擎的使用步骤

1. 导入模板引擎

2. 定义需要渲染的数据

3. 定义模板 (模板的 HTML 结构, 必须定义到 script 中, script要设置id名和type="text/html"属性)

4. 调用 tem plate 函数

代码示例

<!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. 导入模板引擎 -->
  <!-- 在 window 全局, 多声明一个函数, 叫做 template ('模板的Id', 需要渲染的数据对象) -->
  <script src="js/template-web.js"></script>
  <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
  <div id="container">

  </div>

    <!-- 3. 定义模板 -->
    <!-- 3. 模板的 HTML 结构, 必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">   <!-- 把这个script 中的内容不要当做 js 执行, 要当做 HTML 执行 -->
      <h1>{{name}} ----- {{age}}</h1>
    </script>
    <script>
      // 2. 定义需要渲染的数据
      let data = {name: 'zs', age: 20}

      // 4. 调用 tem plate 函数
      let htmlStr = template('tpl-user', data)
      $('#container').html(htmlStr);
    </script>
</body>
</html>