mustache

简介

mustache 是一个模板引擎，比 Vue 的诞生要早许多。该库是开源的，在node环境可以 npm install 下载，也可以在浏览器端使用，引入外部链接即可。

以浏览器端使用为例：引入文件

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

引入后在全局中多了 mustache 这个对象，该对象的render()方法有2个参数，第一个参数是HTML结构模板，第二个参数是填充的数据对象。

基本用法

以 {{ }} 的形式使用变量，内部不支持JS表达式，会报错。

• 非循环案例

 const domStr = mustache.render(`我是{{name}},今年{{age}}岁了。`, {
        name: "小李",
        age: 22,
  });
 console.log(domStr); // 我是小李，今年22岁了。

• 循环案例

 const demoStr = `<ul>
        {{#arr}}
            <li>我是:{{name}},今年{{age}}岁了。</li>
        {{/arr}}
    </ul>`;
const data = {
    arr: [
      {
        name: "小洪",
        age: 21,
      },
      {
        name: "小蔡",
        age: 22,
      },
      {
        name: "小林",
        age: 22,
      },
    ],
};
const domStr = mustache.render(demoStr, data);
document.querySelector(".box").innerHTML = domStr;

当循环的数组中都是简单的元素时，可以用 . 代替。如

const demoStr = `<ul>
    {{#arr}}
        <li>{{.}}</li>
    {{/arr}}
</ul>`;
const domStr = mustache.render(demoStr, {
arr: ["小陈", "小王", "小徐", "小林"],
});
console.log(domStr);
/*
    <ul>
        <li>小陈</li>
        <li>小王</li>
        <li>小徐</li>
        <li>小林</li>
    </ul>
*/

当循环的是多重数组时，可以 {{#}} {{/}} 嵌套多个数组去循环操作

• 可以使用布尔值控制元素的显示与隐藏，相当于vue中的v-if。

// 当 show 为 false 时，页面中不会显示数据；为true时可以显示
const templateStr = `{{#show}}<p>{{name}}</p>{{/show}}`;
const domStr = mustache.render(templateStr, {
    show: true,
    name: "小李",
});
document.querySelector(".box").innerHTML = domStr;

• 可以使用script标签来存储模板，type不要为text/javascript即可。

// 效果跟上面的是一样的
<script type="text/template" id="template">
     {{#show}}<p>{{name}}</p>{{/show}}
</script>
<script>
  const templateStr = document.getElementById("template").innerHTML;
  const domStr = mustache.render(templateStr, {
    show: true,
    name: "小李",
  });
  document.querySelector(".box").innerHTML = domStr;
</script>

底层原理

最简单的模板引擎是利用字符串的repalce()，replace第一个参数是一个匹配的正则，第二个参数可以是一个函数，该函数可以捕获到正则匹配出来的内容，从而进行替换。