1. 模板引擎是什么

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的文档。

模板引擎的核心原理就是两个字：替换。将预先定义的标签字符替换为指定的业务数据，或者根据某种定义好的流程进行输出。

2.模板引擎的作用

更优雅地将数据转为视图

3.其它将数据转为视图的方案

3.1 纯dom方式

  <ul id="list"></ul>

const arr = [
  {name:'唐僧',position:'师傅',gender:'男'},
  {name:'孙悟空',position:'大师兄',gender:'男'},
  {name:'猪八戒',position:'二师兄',gender:'男'},
  {name:'沙和尚',position:'三师弟',gender:'男'},
  {name:'小白龙',position:'坐骑',gender:'男'}
]

const ul = document.querySelector("#list")  

for(let i = 0;i < arr.length;i++){
    const newLi = document.createElement("li")
    const div1 = document.createElement("div")
    const div2 = document.createElement("div")
    div1.className = "title"
    div1.innerText = arr[i].name + '的基本信息'
    div2.className = "sec-title"
    const objArr = Object.keys(arr[i])
    for(let j = 0;j < objArr.length;j++){
      const p = document.createElement("p")
      p.innerText = objArr[j] + ':' + arr[i][objArr[j]]
      div2.appendChild(p)
    }
    newLi.appendChild(div1)
    newLi.appendChild(div2)
    ul.appendChild(newLi)
}

3.2 数组join方式

  <ul id="list"></ul>

  const arr = [
      { name: '唐僧', position: '师傅', gender: '男' },
      { name: '孙悟空', position: '大师兄', gender: '男' },
      { name: '猪八戒', position: '二师兄', gender: '男' },
      { name: '沙和尚', position: '三师弟', gender: '男' },
      { name: '小白龙', position: '坐骑', gender: '男' }
    ]

    const ul = document.querySelector("#list")

    for (let i = 0; i < arr.length; i++) {
      ul.innerHTML += [
        '<li>',
          '<div class="title">' + arr[i].name + '的基本信息' + '</div>',
          '<div class="sec-title">',
            '<p>' + '姓名：' + arr[i].name + '</p>',
            '<p>' + '职位：' + arr[i].position + '</p>',
            '<p>' + '性别：' + arr[i].gender + '</p>',
          '</div>',
        '</li>'
      ].join('')
    }

3.3 ES6反引号方式

  <ul id="list"></ul>

  const arr = [
      { name: '唐僧', position: '师傅', gender: '男' },
      { name: '孙悟空', position: '大师兄', gender: '男' },
      { name: '猪八戒', position: '二师兄', gender: '男' },
      { name: '沙和尚', position: '三师弟', gender: '男' },
      { name: '小白龙', position: '坐骑', gender: '男' }
    ]

    const ul = document.querySelector("#list")

    for (let i = 0; i < arr.length; i++) {
      ul.innerHTML += `
        <li>
          <div class="title">${arr[i].name}的基本信息</div>
          <div class="sec-title">
            <p>姓名：${arr[i].name}</p>
            <p>职位：${arr[i].position}</p>
            <p>性别：${arr[i].gender}</p>
          </div>
        </li>
      `
    }

3.4 mustache模板引擎

github地址

CDN引用：cdn.bootcdn.net/ajax/libs/m…

<script type="text/template" id="template">
    <ul id="list">
      {{#arr}}
        <li>
          <div class="title">{{ name }}的基本信息</div>
          <div class="sec-title">
            <p>姓名: {{name}}</p>
            <p>职位: {{position}}</p>
            <p>性别: {{gender}}</p>
          </div>
        </li>
      {{/arr}}
    </ul>
  </script>

  <script>
    const data = {
      arr:[
        { name: '唐僧', position: '师傅', gender: '男' },
        { name: '孙悟空', position: '大师兄', gender: '男' },
        { name: '猪八戒', position: '二师兄', gender: '男' },
        { name: '沙和尚', position: '三师弟', gender: '男' },
        { name: '小白龙', position: '坐骑', gender: '男' }
      ]
    }

    const templateStr = document.querySelector("#template").innerHTML
      
    const domStr = Mustache.render(templateStr, data)

    document.body.innerHTML = domStr
  </script>