模板引擎mustache学习之如何使用示例 (一)

最近想深入了解一下vue中的模板引擎方面的东西，光会写v-for并不知道其实现的原理过程！于是想就有了想学一下mustache的想法！ 有想法的朋友一起来交流！！！

1. 先如何使用mustache 肯定先引入 mustache
   • 第一种方式：在浏览器中直接 通过链接引入： https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js
   • 第二种方式：通过node环境中安装 如: npm install mustache

本文章中使用的是浏览器中引入方式或者把线上代码复制放在本地方便后面源码的学习

....省略html结构代码
<script type="module">
      import Mustache from "./jslib/mustache.js";
      console.log(Mustache);
</script>

代码运行结果如下: 出现上述结果 说明引入成功 这里提示一下 <script type="module"> 这里的type一定要写成module不然是不支持的因为源码中使用 export default mustache;

初体验
示例1: 数组中的每个元素是对象

<div id="box"></div>
<script type="module">
  import Mustache from "./jslib/mustache.js";
  const box = document.getElementById("box");
  const domTemp = `
      <ul>
        {{#arr}}
          <li>
            <div class="head">{{name}}宠物的信息如下:</div>
            <div class="content">
              <p>名称:{{name}}</p>
              <p>年龄:{{age}}</p>
            </div>
          </li>
        {{/arr}}
      </ul>
  `;
  const data = {
    arr: [
      { name: "小黑", age: 3 },
      { name: "小黄", age: 5 },
      { name: "小白", age: 2 },
    ],
  };
  const nodeInfo = Mustache.render(domTemp, data); // 参数: 模板，数据
  console.log(nodeInfo);
</script>

是不是有点vue的味道了。 {{}} 写法！

示例2: 数组中的每个元素是普通字符串元素

...其他相同的代码省略
const domTemp = `
  <ul>
    {{#arr}}
      <li>{{.}}</li>
    {{/arr}}
  </ul>
`;
const data = {
   arr: ["css", "html", "css"],
};
...其他相同的代码省略

示例3: 数组中嵌套数组

...其他相同的代码省略
const domTemp = `
  <ul>
    {{#arr}}
      <li>
        <div>{{name}}的爱好是:</div>
        <ul>
          {{#hobbies}}
            <ol>{{.}}</ol>
          {{/hobbies}}
        </ul>
      </li>
    {{/arr}}
  </ul>
`;
  const data = {
    arr: [
      { name: "小黑", age: 3, hobbies: ["睡觉", "跑步"] },
      { name: "小黄", age: 5, hobbies: ["吃骨头", "地上打滚"] },
      { name: "小白", age: 2, hobbies: ["汪汪叫"] },
    ],
  };
  ...其他相同的代码省略