什么是模板引擎？

模板引擎是将数据变为视图最优雅的解决方法。

历史上曾经出现过的其它数据变视图的方法

纯 DOM 法
数组 join 法
在 js 里单双引号内的内容是不能换行的，为了提高 dom 结构可读性，利用了数组的 join 方法（将数组变为字符串），注意 join 的参数 '' 不可以省略，否则得到的 str 字符串会是以逗号间隔的：

image (4).png

es6 的模板字符串

mustache 基本语法

mustache 是“胡子”的意思，因为它的嵌入标记 {{ }} 非常像胡子。
{{ }} 的语法也被 vue 沿用。

注意，mustache 的 {{ }} 内不能像 vue 里那样写表达式。使用 mustache 需要引入 mustache 库，可以直接通过 cdn 方式引入，然后通过 Mustache.render(templateStr, data) 方式生成 dom 模板

几组渲染案例

渲染对象数组

<div id="box"></div>

// 数据
const data = {
  arr: [
    {
      name: 'Jay',
      age: 18
    },
    {
      name: 'Bin',
      age: 20
    }
  ]
}
// dom 模板
const templateStr = `
    <ul>
      {{#arr}}
        <li>
          <div>{{name}}的基本信息</div>
          <div>
            <p>{{name}}</p>
            <p>{{age}}</p>
          </div>
        </li>
      {{/arr}}
  </ul>
`
// 通过 cdn 引入 mustache 库就有了 Mustache 对象
const domStr = Mustache.render(templateStr, data)
const box = document.getElementById('box')
box.innerHTML = domStr

其中 {{#arr}} {{/arr}} 代表循环的数据是 arr，# 代表开始， / 代表结束。

渲染简单数组

// 数据
const data = {
  arr: ['红', '橙', '黄']
}
// dom 模板
const templateStr = `
    <ul>
      {{#arr}}
        <li>
          {{.}}
        </li>
      {{/arr}}
  </ul>
`

在模板里就用 . 表示数组的每一项

布尔值

也有像 vue 里 v-if 那样的用法，当 m 值为 true，里面的 div 就会被挂载到 dom 树上，否则不会

// 数据
const data = {
  m: true
}
// dom 模板
const templateStr = `
    <div>
      {{#m}}
        <div>aaa</div>
      {{/m}}
  </div>
`

One More Thing

在 es6 之前，没有模板字符串语法的时候，dom 模板要写在哪呢？

可以把 dom 模板写在 <script> 标签里，然后 type 不要写 text/javascript。这样浏览器不会报错，也不会渲染。type 可以随便写，一般写成 text/template。

本篇为 vue 中用到的 {{}} 背后原理学习笔记，后续笔记见
《mustache 模板引擎 - 02》
《mustache 模板引擎 - 03》

点赞.png

mustache模板引擎 - 01