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

最新推荐文章于 2023-07-28 20:37:25 发布

原创最新推荐文章于 2023-07-28 20:37:25 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了Mustache库的创新模板解析原理，特别聚焦于tokens的概念，如何在无循环和循环场景下转换模板，以及mustache库如何编译tokens并结合数据生成DOM。通过实例演示了tokens在复杂模板中的作用，并揭示了其核心的编译与解析过程。

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, {})