Vue源码学习之mustache模板引擎
该博文是在学习尚硅谷的vue源码教程同时做的笔记。课程都可以在b站搜到的哦。
mustache模板引擎
什么是模板引擎
模板引擎是将数据要变为视图最优雅的解决方案。
历史上出现的数据变为视图的方法：
- 纯DOM法：非常笨拙，没有实战的价值
- 数组join法：曾几何时非常流行
- ES6的反引号法：
${a} - 模板引擎：解决数据变为视图的最优雅的方法
纯DOM法：
const arr = [
{"name":xxx,"age":12},
{"name":xxx,"age":12},
{"name":xxx,"age":12},
]
let list = docunment.getElementById('list')
for(let i = 0;i<arr.length; i++){
let oLi = document.createElement('li')
oLi.innerText = arr[i].name
list.appendChild(oLi)
}
数组join法:
const arr = [
{"name":xxx,"age":12},
{"name":xxx,"age":12},
{"name":xxx,"age":12},
]
let list = docunment.getElementById('list')
for(let i = 0;i<arr.length; i++){
list.innerHTML += [
'<li>'
' <p>'+arr[i].name+'/p>'
'</li>'
].join('')
}
ES6的反引号法:
const arr = [
{"name":xxx,"age":12},
{"name":xxx,"age":12},
{"name":xxx,"age":12},
]
let list = docunment.getElementById('list')
for(let i = 0;i<arr.length; i++){
list.innerHTML += `
<li>
<p>${arr[i].name}</p>
</li>
`
}
mustache的基本使用
- 官方
github:https://github.com/janl/mustache.js - mutache是最早的模板引擎库，比vue诞生的早的多，他的底层实现机理在当时是非常有创造性的、轰动性的，为后续模板引擎的发展提供了崭新的思路
必须引入mustance库，可以在bootcdn.com找到他
循环对象数组
Mustache.render(templateStr,data)负责循环对象数组并填充好
let str = `
{{#arr}}
<li>{{name}}/li>
{{/arr}}
<p>{{time}}</p>
`
const data= {
arr = [
{"name":xxx,"age":12},
{"name":xxx,"age":12},
{"name":xxx,"age":12},
],
time:'2022'
}
Mustache.render(str,data)
也可以循环简单数组
let str = `
{{#arr}}
<li>{{.}}/li>
{{/arr}}
`
const data = {
arr=['x','y','z']
}
Mustache.render(str,data)
也可以数组嵌套循环
const data = {
arr:[
{name:'xxx',hobbies:['x','y','z']},
{name:'xxx',hobbies:['x','y','z']},
{name:'xxx',hobbies:['x','y','z']}
]
}
let str = `
{{#arr}}
<li>{{name}}/li>
{{#hobbies}}
{{.}}
{{/hobbies}}
{{/arr}}
`
Mustache.render(str,data)
data也可以传入布尔值，效果类似v-if
const data = {
boolean:false
}
let str = `
<div>
{{#bollean}}
<p>xxx</p>
{{/bollean}}
</div>
`
Mustache.render(str,data)
解决反引号繁杂的问题
<script type="text/template" id="first">
<div>
{{#bollean}}
<p>xxx</p>
{{/bollean}}
</div>
</script>
<script>
let str = document.getElementById('first')
const data = {
boolean:false
}
Mustache.render(str,data)
</script>
mustache的底层核心机理
mustache不能用简单的正则表达式思路实现
较为简单的时候可以用正则实现
let templateStr = `<h1>我买了一个{{thing}}，好{{mood}}</h1>`
var data = {
thing:'华为',
mood:'开心'
}
function render(templateStr,data){
//利用正则找到{{}}内的值 和 replace函数进行替换
return templateStr.replace(/\{\{\(\w+)\}/g,function(findStr,$1){
return data[$1]
})
}
var result = render(templateStr,data)
当较为复杂时不能使用，较为复杂时采用以下机制
)]
- tokens是一个js的嵌套数组，说白了就是模板字符串的js表示
- 它是“抽象语法树”、“虚拟节点”等等的开山鼻祖
//模板字符串
let str = `<h1>我买了一个{{thing}}，好{{mood}}</h1>`
//经过编译
//tokens
let token = [
["text","<h1>我买了一个"],
["name","thing"],
["text","好"]，
["name","mood"]
["text","啊</h1>"]
]
当模板字符串中有循环存在时，他会被编译为嵌套更深的tokens
如
[
["text","<ul>"],
["#","arr",[
["text","<li>"]
["name","."]
["text","</li>"]
]],
["text","</ul>"]
]
mustache库底层重点要做两个事情
- 将模板字符串编译为tokens形式
- 将tokens结合数据，解析为dom字符串
手写实现mustache库
使用webpack和webpack-dev-serve构建
- 手写Scanner类
- 手写html=>tokens
- 手写将tokens=>注入数据
<script>
let tempalteStr = `<h1>我买了一个{{thing}}，好{{mood}}</h1>`
var data = {
thing:'华为',
mood:'开心'
}
TemplateEngine.render()
</script>
import parseTemplateToTokens from './parseTemplateToTokens.js'
import renderTemplate from './renderTemplate.js'
window.TemplateEngine = {
render(templateStr,data){
//调用parseTemplateToTokens函数，让模板字符串能够变为tokens数组
let tokens = parseTemplateToTokens(templateStr)
//调用renderTemplate函数，让token变为DOM字符串
let domStr = renderTemplate(tokens,data)
return domStr
}
}
新建一个Scanner类
export default class Scanner{
constructor(templateStr){
this.templateStr = templateStr
//定义指针
this.pos = 0
//尾巴，一开始模板字符串的原文
this.tail = templateStr
}
//功能弱，就是走过指定内容，没有返回值
scan(tag){
if(this.tail.indexOf(tag) == 0){
//tag有多长，比如{{是2，就让他指针后移多少位
this.pos += tag.length
//也要改变尾巴，位当前移动后指针的后面的字符串
this.templateStr.substring(this.pos)
}
}
//让指针进行扫描，直到遇见指定内容结束，并且能够返回结束之前路过的文字
scanUtil(stopTag){
//记录一下执行本方法时候pos的值
const pos_backup = this.pos
//当尾巴不是stopTag的时候，就说明还没有扫描到stopTag
//&& 为了防止因为找不到且到头了而导致死循环
while(this.tail.indexOf(stopTag)!=0 && this.post<this.templateStr.length>){
this.pos++
//改变尾巴从当前指针到这个字符开始的字符
this.tail = this.templateStr.substring(this.pos)
}
return this.tempalteStr.substring(pos_backup,this.pos)
}
}
新建一个html和token转化的js
import Scanner from './Scanner.js'
import nestTokens from './nestTokens.js'
export default function parseTemplateToTokens(templateStr){
var tokens = []
let words;
//扫描器
let scanner = new Scanner(templateStr)
//循环到指针遍历到尾巴
while(scanner.pos != templateStr.length){
//寻找{{并收集指针走过的text
words = scanner.scanUtil('{{')
if(words != ''){
//去掉空格
let isInJJH = false//不在标签内
//空白字符串
let _words = ''
for(let i = 0;i<words.length;i++){
//先判断是否在标签内
if(words[i]) == '<'){
isInJJH = true
}else if(words[i] == '>'){
isInJJH = false
}
if(words[i] != ''){
//如果不是空格
_words += words[i]
}else{
//如果是空格
if(isInJJH){
//在标签内
_words += words[i]
}
}
}
tokens.push(['text'],words)
}
//跳过{{
scanner.scan('{{')
//寻找}}
words = scanner.scanUtil('}}')
if(words != ''){
//遇见# || / 存储出去# 和/ 的字符
//其余直接存入
if(words[0] == '#'){
tokens.push(['#',words.substring(1)])
}else if(words[0] == '/'){
tokens.push(['/',words.substring(1)])
}else {
tokens.push(["name",words])
}
}
//跳过}}
scanner.scan('}}')
}
//返回折叠收集的tokens
return nestTokens(tokens)
}
新建一个nestTokens.js用于折叠tokens,将#和/之间的tokens能够整合起来，解决嵌套问题
十分精妙及重要
sections栈是展示层级的关系，collector是根据层级移动的指针窗口，nestedTokens是具体的层级内容展示
export default function nestTokens(tokens){
let nestedTokens = []
//栈结构，存放小tokens，栈顶（靠近端口的，最新进入的）的tokens数组当前操作的这个tokens小数组
let sections = []
//定义一个收集器,天生指向nestedTokens
//收集器的指向会不断的变化
let collector = nestedTokens
//遇见#入栈，遇见/出栈
for(let i = 0;i<tokens.length;i++){
//遍历传入的tokens并获取每一个token
let token = tokens[i]
//对每一个token的类型进行判断
switch(token[0]){
case '#':
//收集器放入这个token
collector.push(token)
//入栈
sections.push(token)
//收集器要换人了
//给这个token下标为2的项创建一个数组用于收集子元素,并由收集器指向
collector = token[2] = []
break;
case '/':
//出栈，回到上一级
sections.pop()
//改变收集器为栈队尾
collector = secitons.length > 0?sections[sections.length-1][2]:nestedTokens
break;
default:
collector.push(token)
}
}
return nestedTokens
}
新建一个renderTemplate.js，让tokens变为DOM字符串
import lookup from './lookup.js'
import parseArray from './parseArray.js'
export default function renderTemplate(tokens,data){
//结果字符串
let resStr = ''
//遍历tokens
for(let i = 0; i < tokens.length; i++){
let token = tokens[i]
//判断类型
if(token[0] == 'text'){
//text类型直接拼起来
resStr += token[1]
}else if(token[0] == 'name'){
//name要调用lookup函数找到对象中的数据
//lookup可以防止a.b.c的情况
resStr += lookup(data,token[1])
}else if(token[0] == '#'){
resStr += parseArray(token,data)
}
}
}
当toke为name时我们要在data中寻找这个数据，当data数据结构比较复杂时，无法用object.name的方法访问数据
新建一个lookup.js解决上面的问题
//可以在dataObj对象中，寻找用连续点符号的keyName属性
export default function lookup(dataObj,keyName){
//看看keyName中有没有点符号，但不能是.本身
if(keyName.indexOf('.') != -1 && keyName != '.'){
//如果有.则拆开
let keys = keyName.split('.')
//设置临时变量，一层一层找下去
let temp = dataObj;
for(let i = 0;i<keys.length;i++){
temp = temp[keys[i]]
}
return temp
}
//如果没有点
return dataObj[keyName]
}
这个方法还是面试算法题之一哦
新建一个parseArray.js处理数组，结合renderTemplate实现递归。注意这个函数接收的是token，不是tokens
//token ['#',`xxx`,[]]
//递归调用的次数由数组‘xxx’的长度决定
import renderTemplate from './renderTemplate.js'
import lookup from './lookup.js'
export default function parseArray(token,data){
//先得到整体data中要使用的数组
let v = lookup(data,token[1])
//结果字符串
let resStr = ''
//遍历v数组，v一定是数组
//下面的循环十分重要
for(let i = 0;i<v.length;i++){
/****这里也很关键*****/
resStr += renderTemplate(token[2],{
//现在在v[i]的基础上补充一个.属性，完美的解决了{{.}}的情况
'.':v[i],
...v[i]
})
}
return resStr
}
import lookup from './lookup.js'
export default function parseArray(token,data){
//先得到整体data中要使用的数组
let v = lookup(data,token[1])
//结果字符串
let resStr = ''
//遍历v数组，v一定是数组
//下面的循环十分重要
for(let i = 0;i<v.length;i++){
/****这里也很关键*****/
resStr += renderTemplate(token[2],{
//现在在v[i]的基础上补充一个.属性，完美的解决了{{.}}的情况
'.':v[i],
...v[i]
})
}
return resStr
}
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
