mustache模板引擎

996 阅读2分钟

什么是模板引擎

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档在原有的HTML页面中来填充数据。最终达到渲染页面的目的。说白了就是将数据变成视图的方法。 image.png

有哪些实现方式

image.png

1)纯DOM法,直接操作dom,非常笨拙

image.png

2)数组的join或者concat方法:将html代码拼接为字符串,通过innerHTML添加到DOM上

image.png

3)ES6的模板字符串拼接,ES6新增${a}的语法糖,很好用

image.png

4)模板引擎,最优雅的方法

mustache介绍

mustache.js 是一个简单强大的 JavaScript 模板引擎,使用它可以简化在 js 代码中的 html 编写。它比Vue诞生的早多了,它的底层实现机理在当时是非常有创造性的、轰动性的,为后续模板引擎的发展提供了崭新的思路。
官网地址:github.com/janl/mustac…
使用方法:

image.png

image.png

底层原理

image.png

image.png

  • 将模板字符串转化成一维数组形式的tokens
  • 将一维数组形式的tokens转化成嵌套的tokens
  • 将tokens和数据结合,解析为dom字符串

tokens

是一个js的嵌套数组,它是抽象语法树,虚拟节点的开山鼻祖。
如果是嵌套数组,会编译成类似下面这种tokens。

image.png

代码简单实现

scanner

scanner是扫描的意思,遍历模板字符串。
思路:

  • 将遇到'{{'前的字符串单独截取,保存。
  • 利用scan方法,跳过'{{'的长度。
  • 将'{{'之后,'}}'之前的字符串截取,保存。
  • 利用scan方法,跳过'}}'的长度。
    Scanner中scan方法主要是跳过tag的长度,并且更新tail字符串。scanUntil方法是扫描字符串,返回遇到stopTag前扫描出的字符串。eos表示指针位置是否已经到最后,返回布尔值

image.png

将模板字符串编译为一维数组形式的tokens

image.png

将一维数组形式的tokens转化成嵌套的tokens

image.png

将tokens与数据结合,解析成dom

image.png

lookup函数

分析:keyName有可能是person.xiaoming.name, 需要判断keyName中是否包含'.',遍历分割的keyName返回temp值。如果keyName中不包含'.',判断dataObj是不是对象,是对象返回keyName对应的value。否则将dataObj直接返回 image.png

parseArray函数

分析:循环递归的调用renderTemplate函数得到拼接后的dom字符串。

image.png

结语

以上就是mustache的简单的代码和思路了,个人感觉主要是学习思维方式,也能提升代码能力。如有错误,感谢不吝赐教。