mustache 语法探析

1： mutache 语法解析：

// 但是在ES6 之前没有反引号, 但 但是有神人存在把模板抽离出来
// 写在<script> 标签中
// 模板区域
{{# arr}} 和 {{/arr}}  一定要有开始和结束标签
<sctipt type="text/ template" id="mytemplate">
    <ul>
       {{#arr}}
         <li>
           <div class="hd">{{name}}</div>
           <div class="bd"></div>
             <p>姓名: {{name}} </p>
             <p>年龄：{{age}} </p>
             <p>性别：{{sex}} </p>
           </div>
          </li>
       {{/arr}}
     </ul>
</script>
<script src="./jslib/mustache.js"> </script>

<script>
  var templateStr = document.getElementById('mytemplate').innerHTML;
  var data = {
    arr: [
      {"name": "小明"， "age": 12, "sex": "男"},
      {"name": "小红"， "age": 11, "sex": "女"},
      {"name": "小强"， "age": 13, "sex": "男"},
   ]
  }

 var domStr = Mustache.render(templateStr, data);
 var conrtainer = document.getElementById('container');
 container.innerHTML =domStr;
</script>

2： mustache 库：的底层核心机理：  mustache 库不能简单使用正则表达式的实现思路。

在较为简单的情况下， 可以使用正则表达式实现，  简单的模板字符串， 但是在复杂的情况下，正则表达式的情况就不可以了。

mustache: 库设计思想， 底层设计风格都被vue 所借鉴。 

<script>
  // 正则表达式的机理就是replace 方法
  var templateStr = '<h1>我买了一个{{thing}}, 好{{mood}}</h1>';

  var data = {   // 数据源
    thing: '华为手机'，
    mood: '开心'
  }

  // 最简单模板引擎的实现机理,  就是利用正则表达式中的replace 方法。
  // replace() 方法第二个参数可以是一个函数,  这个函数提供捕获东西的参数,  就是$1
  // 结合data对象,  可以进行智能替换

  使用正则表达式, 只会替换一个,  并不会全局替换。 必须加上 // 全局匹配。
  replace 方法:  第一个参数使用正则表达式,  第二个参数可以是一个函数
  mustache 底层不是使用正则表达式实现。
  -----------------------------------------------------------------------
  实例:
   a: 参数寻找到的部分
   b: 擦拭就是捕获到的部分
   c: 参数 出现的位置 (下标);
   d: 参数 就是 出现完整的字符串
   templateStr.replace(/\{\{(\w+)\}\}/g, function(a, b, c d) {
     consoler.log(a, b, c, d)
   }
  ------------------------------------------------------------------------
  function render(templateStr, data) {
     return templateStr.replace(/\{\{(\w+)\}\}/g, function(findaStr, $1) {
      return data[$1];
    })
  }

  var result = render(templateStr, data);
  console.log(result)
</script>

最简单的模板引擎实现机理:  利用的是正则表达式中replace()  方法;

replace()  第二个参数可以是一个函数， 这个函数提供捕获东西参数，就是 $1

结合data 对象，进行只能替换操作。

mustache 库机理： 模板字符串  ===>(编译) tokens  ===> 数据 (结合) + 解析  ===> Dom字符串