什么是模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档在原有的HTML页面中来填充数据。最终达到渲染页面的目的。说白了就是将数据变成视图的方法。
有哪些实现方式
1)纯DOM法,直接操作dom,非常笨拙
2)数组的join或者concat方法:将html代码拼接为字符串,通过innerHTML添加到DOM上
3)ES6的模板字符串拼接,ES6新增${a}的语法糖,很好用
4)模板引擎,最优雅的方法
mustache介绍
mustache.js 是一个简单强大的 JavaScript 模板引擎,使用它可以简化在 js 代码中的 html 编写。它比Vue诞生的早多了,它的底层实现机理在当时是非常有创造性的、轰动性的,为后续模板引擎的发展提供了崭新的思路。
官网地址:github.com/janl/mustac…
使用方法:
底层原理
- 将模板字符串转化成一维数组形式的tokens
- 将一维数组形式的tokens转化成嵌套的tokens
- 将tokens和数据结合,解析为dom字符串
tokens
是一个js的嵌套数组,它是抽象语法树,虚拟节点的开山鼻祖。
如果是嵌套数组,会编译成类似下面这种tokens。
代码简单实现
scanner
scanner是扫描的意思,遍历模板字符串。
思路:
- 将遇到'{{'前的字符串单独截取,保存。
- 利用scan方法,跳过'{{'的长度。
- 将'{{'之后,'}}'之前的字符串截取,保存。
- 利用scan方法,跳过'}}'的长度。
Scanner中scan方法主要是跳过tag的长度,并且更新tail字符串。scanUntil方法是扫描字符串,返回遇到stopTag前扫描出的字符串。eos表示指针位置是否已经到最后,返回布尔值
将模板字符串编译为一维数组形式的tokens
将一维数组形式的tokens转化成嵌套的tokens
将tokens与数据结合,解析成dom
lookup函数
分析:keyName有可能是person.xiaoming.name, 需要判断keyName中是否包含'.',遍历分割的keyName返回temp值。如果keyName中不包含'.',判断dataObj是不是对象,是对象返回keyName对应的value。否则将dataObj直接返回
parseArray函数
分析:循环递归的调用renderTemplate函数得到拼接后的dom字符串。
结语
以上就是mustache的简单的代码和思路了,个人感觉主要是学习思维方式,也能提升代码能力。如有错误,感谢不吝赐教。