JavaScript Mustache 模板引擎用法

const data = [

  { tag: 'li', name: 'lain', age: 16 },

  { tag: 'li', name: 'saber', age: 17 },

  { tag: 'li', name: '樱岛麻衣', age: 16 },

  { tag: 'li', name: '稚名真白', age: 17 }

]

for (const key of data) {

  // 1. 获取父元素

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

  // 2. 创建标签

  const li = document.createElement(key.tag)

  // 3. 添加内容

  li.textContent = key.name + key.age

  // 4. 追加子节点

  list.appendChild(li)

}

data.forEach(item => {

  list.innerHTML += [

    '<li>姓名：' + item.name + ' 年龄： ' + item.age + '</li>',

  ].join('')

})

data.forEach(item => {

  list.innerHTML += `

  <li>

    <span>姓名：${item.name}</span>

    <span>年龄：${item.age}</span>

  </li>

  `

})

<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.js"></script>

// 1. 定义补办字符串

const templateStr = `<h1>我喜欢吃{{ peach }}</h1>`

// 2. 定义数据

const fruit = { peach: '桃子' }

// 3. 传入参数 返回新字符串

const domStr = Mustache.render(templateStr, fruit)

console.log(domStr) /* <h1 > 我喜欢吃桃子 < /h1> */

container.innerHTML = domStr

// 1. 定义数据 对象类型 对象里面定义要循环的数组

const data = {

  arr: [

    { tag: 'li', name: 'lain', age: 16 },

    { tag: 'li', name: 'saber', age: 17 },

    { tag: 'li', name: '樱岛麻衣', age: 16 },

    { tag: 'li', name: '稚名真白', age: 17 }

  ]

}

// 2. 定义模板字符串 {{#arr}} 代表循环的数组 接着写法如下

const templateStr = `

  <ul>

    {{#arr}}

      <li>

        <span>姓名：{{ name }}</span>

        <span>年龄：{{ age }}</span>

      </li>

    {{/arr}} 

  </ul>

`

// 3. 返回遍历渲染完的新字符串

const domStr = Mustache.render(templateStr, data)

// 4. 进行挂载 id 属性可以不用进行获取

container.innerHTML = domStr

/*

<ul>

    <li>

      <span > 姓名：lain</span>

      <span > 年龄：16</span>

    </li>

    <li>

      <span > 姓名：saber</span>

      <span > 年龄：17</span>

    </li>

    <li>

      <span > 姓名：樱岛麻衣 & lt;/span>

      <span > 年龄：16</span>

    </li>

    <li>

      <span > 姓名：稚名真白 & lt;/span>

      <span > 年龄：17</span>

    </li>

</ul>

*/

// 1. 定义数据

const fruits = {

  fruits: ['peach', 'watermelon', 'cherry']

// 2. 定义模板字符串

const templateStr = `

  <ul>

    {{ #fruits }}

      <li>{{ . }}</li> // 因为这里是简单的数组 直接用 . 即可

    {{ /fruits }}

  </ul>

`

// 3. 返回遍历渲染完的新字符串

const domStr = Mustache.render(templateStr, fruits)

console.log(domStr)

/*

  <ul>

      <li>peach</li>

      <li>watermelon</li>

      <li>cherry</li>

  </ul>

*/

// 4. 挂载

container.innerHTML = domStr

// 1. 定义数据 对象类型 对象里面定义要循环的数组

const data = {

  arr: [

    { tag: 'li', name: 'lain', age: 16, freiends: ['saber', '樱岛麻衣'] },

    { tag: 'li', name: 'saber', age: 17, freiends: ['樱岛麻衣', '稚名真白'] },

    { tag: 'li', name: '樱岛麻衣', age: 16, freiends: ['稚名真白', 'lain'] },

    { tag: 'li', name: '稚名真白', age: 17, freiends: ['lain', 'saber'] }

  ]

}

// 2. 定义模板字符串 写法如下

const templateStr = `

  <ul>

    {{ #arr }}

      <li>

        <span>姓名：{{ name }}</span>

        <span>年龄：{{ age }}</span>

        <ol>

          {{ #freiends }}

            <li>freiends: {{ . }}</li>

          {{ /freiends }}

        </ol>

      </li>

    {{ /arr }}

  </ul>

`

// 3. 返回遍历渲染完的新字符串

const domStr = Mustache.render(templateStr, data)

// 4. 进行挂载 id 属性可以不用进行获取

container.innerHTML = domStr

/*

<ul>

    <li>

      <span > 姓名：lain</span>

      <span > 年龄：16</span>

      <ol>

          <li>freiends: saber</li>

          <li>freiends: 樱岛麻衣 & lt;/li>

      </ol>

    </li>

    <li>

      <span > 姓名：saber</span>

      <span > 年龄：17</span>

      <ol>

          <li>freiends: 樱岛麻衣 & lt;/li>

          <li>freiends: 稚名真白 & lt;/li>

      </ol>

    </li>

    <li>

      <span > 姓名：樱岛麻衣 & lt;/span>

      <span > 年龄：16</span>

      <ol>

          <li>freiends: 稚名真白 & lt;/li>

          <li>freiends: lain</li>

      </ol>

    </li>

    <li>

      <span > 姓名：稚名真白 & lt;/span>

      <span > 年龄：17</span>

      <ol>

          <li>freiends: lain</li>

          <li>freiends: saber</li>

      </ol>

    </li>

</ul>

*/

// 1. 定义模板

const templateStr = `

  {{ #m }}

    <h2>Hello World~</h2>

  {{ /m }}

`

// 2. 定义数据

const flag = {

  m: true, // 显示

  //m: false // 隐藏

}

// 3. 返回遍历渲染完的新字符串

const domStr = Mustache.render(templateStr, flag)

// 4. 进行挂载 id 属性可以不用进行获取

container.innerHTML = domStr