什么是模板引擎
模板引擎是将数据要变为视图最优雅的解决方案
历史上曾经出现的数据变为视图的方法
•
纯
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