vue模板引擎mustache02__机理(笔记)

mustache的底层实现机理**mushache库不能用简单正则表达式思路实现**mustache库的机理什么是tokens?tokens的两种情况mustache库底层重点做的两件事tokens观察

mustache的底层实现机理

**mushache库不能用简单正则表达式思路实现**

• 在较为简单的示例情况下可以使用这个则表达式实现

  //模板字符串
  <h1>我买了一个{{thing}},好{{mod}}阿</h1>
  //数据
  {
      thing: '华为手机',
      mod: '开心'
  }

• 但当情况较为复杂时正则表达式的思路肯定时不行了。

  //例如
  <ul>
      {{#arr}}
          <li>{{.}}</li>
      {{/arr}}
  </ul>

• 正则表达式简单实现

  var template = '<h1>买了个{{thing}}，好{{mod}}阿</h1>'
  var data = {
      thing: '手机',
      mod: '开心'
  }
      // 最简单的模板引擎实现函数，利用正则replace()方法
      // replace()的第二个参数可以是一个函数，这个函数提供捕获的东西的参数，就是$1
      // 结合data对象进行智能替换
      function render(templateStr,data){
        return templateStr.replace(/\{\{(\w+)}}/g, function(findStr,$1){
          return data[$1]
        })
      }
      var result = render(template,data);
      console.log(result);//<h1>买了个手机，好开心阿</h1>

mustache库的机理

什么是tokens?

• token时**JS的嵌套数组，即为模板字符**串的JS表示

• 它是“抽象语法树”、“虚拟节点”等等的开山鼻祖

• 示例

  //模板字符串
  <h1>我买了一个{{thing}},好{{mod}}阿</h1>
  //tokens
  [
      ["text","<h1>我买了一个"],//token
      ["name","thing"],//token
      ["text","好"],//token
      ["name","mod"],//token
      ["text","阿</h1>"],//token
  ]

非常具有创造性的，轰动性的模板解析原理

tokens的两种情况

• 无循环时

  模板字符串编译为数组的形式即为tokens,然后结合数据解析为所需要的形式，

• 循环情况下的tokens，多重循环时继续嵌套

  //模板字符串
  <div>
    <ul>
      {{#arr}}
      <li>{{.}}</li>
      {{/arr}}
    </ul>
  </div>
  //编译后
  [
      ["text","<div><ul>"],
      ["#","arr",[
          ["text","<li>"],
          ["name","."],
          ["text","</li>"]
      ]],
      ["text","</ul></div>"]
  ]

mustache库底层重点做的两件事

• 将模板字符串编译为tokens形式

• 将tokens结合数据，解析为dom字符串

tokens观察

• 操作源码

  源码种在返回结果之前打印值

  

   

• 示例

 var template = `
        <ul>
          {{#arr}}
            <li>
              {{name}}的爱好
             <ol>
                {{#hobbies}}
                  <li>{{.}}</li>
                {{/hobbies}}
              </ol>
            </li>
          {{/arr}}
        </ul>
    `
    
 Mustache.render(template, {})