vue源码-mustache模板引擎分析(三)-mustache的底层核心机理

最新推荐文章于 2024-04-20 09:21:31 发布

豆浆油条_煎bingo子

最新推荐文章于 2024-04-20 09:21:31 发布

阅读量124

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45679015/article/details/119865201

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Mustache库的核心工作原理，包括如何将模板字符串转化为tokens，以及tokens如何结合数据生成DOM字符串。tokens实际上是一个JS嵌套数组，是抽象语法树和虚拟节点的起点。举例展示了简单模板和循环嵌套模板的tokens结构，并提示后续会进一步分析源码中的parseTemplate()函数来揭示其实现细节。

摘要由CSDN通过智能技术生成

一.mustache库的核心机理

mustache库主要做了两件事：

（1）将模版字符串编译为tokens形式

（2）将tokens结合数据，解析为dom字符串

二.什么是tokens？

实际上是一个js嵌套的数组，同时它也是“抽象语法数”，“虚拟节点”的起源~

-比如是一个简单的模板字符串编译为tokens【二维数组】

-比如是一个循环嵌套的模板字符串编译为tokens

我们跑去源码看看这部分是怎么实现的（下节）：

先在parseTemplate()打印tokens看看

var template2 = `
      <ul>
        {{#arr}}
        <li>
            <div class='hd'>{{name}}的信息</div>
            <div class='bd'>
                <p>姓名：{{name}}</p>    
                <p>年龄：{{age}}</p> 
                {{#hobbies}}   
                <p>{{.}}</p>
                {{/hobbies}}    
            </div>
        </li>
        {{/arr}}
      </ul>
     `