Vue源码探秘之 mustache模板引擎

什么是模板引擎

模板引擎是将数据要变为视图最优雅的解决方案

 历史上曾经出现的数据变为视图的方法

• 纯 DOM 法 ：   非常笨拙，没有实战价值

• 数组 join 法 ：   曾几何时非常流行，是曾经的前端必会知识

• ES6 的反引号法 ：   ES6中新增的 `${a}` 语法糖，很好用

• 模板引擎 ：   解决数据变为视图的最优雅的方法

 

mustache的基本使用

• mustache 官方 git ： https://github.com/janl/mustache.js

• mustache 是 “胡子” 的意思，因为它的嵌入标记 {{ }} 非常像胡子

• 没错， {{ }} 的语法也被 Vue 沿用 ，这就是我们学习 mustache 的原因

• mustache 是 最早的模板引擎库 ，比 Vue 诞生的早多了，它的 底层实现机理在当

时是非常有创造性的、轰动性的 ，为后续模板引擎的发展提供了崭新的思路

 

 

• 必须要引入 mustache 库，可以在 bootcdn.com 上找到它

• mustache 的 模板语法 非常简单，比如前述案例的 模板语法 如下：

 

mustache的底层核心机理

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

• 但是当情况复杂时，正则表达式的思路肯定就不行了。比如这样的模板字符串，是不能用正则表达式的思路实现的

 

mustache库的机理 ：

 什么是tokens？

• tokens 是一个 JS 的嵌套数组，说白了，就是 模板字符串的 JS 表示

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

 

• 当模板字符串中有循环存在时，它将被编译为 嵌套更深 的 tokens

• 当循环是双重的，那么 tokens 会更深一层

mustache 库底层重点要做两个事情：

 

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

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

 

 

将模板字符串变为 tokens

生成tokens数组

将零散的 tokens 嵌套起来

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

总结

Mustache 底层太美了 ！ tokens 的意义也不言自明了。如果没有 token ，那 么数组的循环形式，就很难处理。

手写源代码在github： https://github.com/russ-gao/mustache