mustache初探(一) 使用方式及使用正则实现{{}}简单原理

最新推荐文章于 2024-07-23 18:00:00 发布

原创最新推荐文章于 2024-07-23 18:00:00 发布 · 251 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了mustache库的使用方式，包括基础操作，并探讨了如何使用正则表达式实现{{}}模板语法的基本原理。通过阅读，你可以了解到在实际应用中如何有效利用mustache进行数据绑定。

mustache 库，可以在 https://www.bootcdn.cn/ 上找到它

1.使用方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/mustache.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <!-- 模板 -->
    <script type="text/template" id="mytemplate">
      <ul id="list">
        {{#arr}}
        <li>
          <div class="hd">{{name}}的基本信息</div>
          <div class="bd">
            <p>姓名：{{name}}</p>
            <p>年龄：{{age}}</p>
            <p>性别：{{sex}}</p>
          </div>
        </li>
        {{/arr}}
      </ul>
    </script>
    <script>
      //根据id获取模板
      var templateStr = document.getElementById("mytemplate").innerHTML;
      // 数据
      var data = {
        arr: [
          { name: "小明", age: 12, sex: "男" },
          { name: "小红", age: 11, sex: "女" },
          { name: "小强", age: 13, sex: "男" },
        ],
      };
      // render方法将数据填充进模板
      var domStr = Mustache.render(templateStr, data);
      var container = document.getElementById("container");
      container.innerHTML = domStr;
    </script>
  </body>
</html>

2. 使用正则实现{{}}简单原理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/mustache.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script>
      //根据id获取模板
      var templateStr = "<h1>我买了一个{{thing}}，好{{mood}}</h1>";
      // 数据
      var data = {
        thing: "华为手机",
        mood: "开心",
      };
      function render(templateStr, data) {
        //   正则中的{}代表量词的范围，所有需要将{通过\{转义，()中符合条件的的内容将会被捕获
        // replace的第二个参数可以是一个函数,函数的第二个参数$1就是被正则规则捕获的内容
        return templateStr.replace(/\{\{(\w+)\}\}/g, function (findstr, $1) {
          console.log(findstr);
          console.log($1);
          // 结果data对象，进行智能替换 ，$1是变量所有不能直接. 用[]
          return data[$1];
        });
      }
      var domStr = render(templateStr, data);
      var container = document.getElementById("container");
      container.innerHTML = domStr;
    </script>
  </body>
</html>