当前位置：首页 > news >正文

探究Vue源码:mustache模板引擎(11) 递归处理循环逻辑并收尾算法处理

news 2025/8/25 15:47:10

好在上文探究Vue源码:mustache模板引擎(10) 解决不能用连续点符号找到多层对象问题，为编译循环结构做铺垫我们解决了js字符串没办法通过什么点什么拿到对象中的值的问题
这个大家需要记住因为这个方法的编写之前是当做面试题出现过的

那么本文我们就要去写上文提到的递归了找到 renderTemplate.js
在这里的判断下面再加一个条件
判断如果当前第一个下标是个井号则新开一份逻辑
在这里插入图片描述
就是我们之前说的它能处理 text和name类型的但井号循环的方式他没有处理能力

我们将 www下的 index.html 代码改成这样

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src = "/xuni/bundle.js"></script><script>let templateStr = `<div>{{#students}}<ul><li>{{ name }}</li>{{#list}}<li>{{ . }}</li>{{/list}}</ul>{{/students}}</div>`;let data = {name: "小猫猫",age: 2,students: [{id: 0,name: "小明",list: ["篮球","唱","跳"]},{id: 1,name: "小红",list: ["电子游戏","计算机编程"]}]}GrManagData.render(templateStr,data);</script>
</body>
</html>

我们在src下创建一个 parseArray.js文件先写暴露一个函数出去吧

/*处理数组逻辑
*/
export default function parseArray(token,data) {console.log(token,data);
}

这里我们函数接收两个参数 token 就是 tokens的单个下标然后 data 就是总体的数据
这个没什么好说的
这个函数就用来处理数组循环的逻辑

这里我们 renderTemplate.js 引入并调用它
这里我们判断循环井号直接扔给它处理
在这里插入图片描述
运行项目之后我们发现 token 和我们data整体数据都打印出来了

那说明 parseArray 的数据依旧拿到了
然后 parseArray 需要循环调用 renderTemplate 调用次数取决于遍历数组的长度
但首先我们需要从data中取出这个数组
这样我们就需要lookup
我们可以引入然后这样写
在这里插入图片描述
运行结果如下

可以看到语法成功输出了我们data中的students内容

然后这里我们写个简单版的
将www下的 index.html代码更改如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src = "/xuni/bundle.js"></script><script>let templateStr = `<div>{{#students}}<ul><li>{{name}}</li></ul>{{/students}}</div>`;let data = {name: "小猫猫",age: 2,students: [{id: 0,name: "小明",list: ["篮球","唱","跳"]},{id: 1,name: "小红",list: ["电子游戏","计算机编程"]}]}GrManagData.render(templateStr,data);</script>
</body>
</html>

这里我们不搞多级嵌套了我们就要一级循环
然后我们将renderTemplate 最后的输出改为返回出去
在这里插入图片描述
这里我们改成处理好就不输出了直接返回回去
然后 parseArray.js 代码编写如下

import lookup from "./lookup";
import renderTemplate from "./renderTemplate";/*处理数组逻辑
*/
export default function parseArray(token,data) {let view = lookup(data,token[1]);let resultStr = "";for(let i = 0; i < view.length; i++) {resultStr += renderTemplate(token[2],view[i]);}return resultStr;
}

这里我们取到被遍历数组后循环遍历view
然后定义了一个resultStr来存循环遍历生成的内容
然后每次循环调用renderTemplate 接受返回结果这里 token[2] 是因为之前我们写nestTokens.js时
将循环内的tokens结构存在了井号token的2下标下了不知道大家是否还记得
在这里插入图片描述
然后 view[i] 就是当前被循环的下标例如数组结构是

[{id: 1,name:"你好"},{id: 2,name:"小猫猫"}
]

那么第一次循环 i是 0 view[i] 就是 view[0] 对应的值就是{id: 1,name:“你好”}
以此类推
用当前循环的下标当做数据源然后用第二个下标的token就是循环内部的页面结构
运行结果如下
在这里插入图片描述
我们一个简单版的就完成了

但是目前还有一个问题就是如果我们数组结构再简单一点还是会出问题
我们将www下的index.html代码更改如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src = "/xuni/bundle.js"></script><script>let templateStr = `<div>{{#students}}<ul><li>{{.}}</li></ul>{{/students}}</div>`;let data = {name: "小猫猫",age: 2,students: ["小明","小芳"]}GrManagData.render(templateStr,data);</script>
</body>
</html>

运行结果如下
在这里插入图片描述
直接变成了undefined
因为我们的程度现在没办法识别这个小点的含义在mustache中小点代表直接取当前数字的下标

我们可以直接将 parseArray 改成

export default function parseArray(token,data) {let view = lookup(data,token[1]);let resultStr = "";for(let i = 0; i < view.length; i++) {resultStr += renderTemplate(token[2],{".": view[i]});}return resultStr;
}

相当于我们在外面又自己写了一个对象键是 “.” 一个小点然后值是数组当前项本身
运行结果如下
在这里插入图片描述
这样写确实能解决问题但是之前那个数组对象的格式放上去他就又废了
我们将 www下的index.html还原成我们之前的样子

运行之后他就有都是undefined了

因为你那个对象传过去就是data 我们这样一设置他只有一个字段就是那个小点

这里我们将这句话改成这样

resultStr += renderTemplate(token[2],{".": view[i],...view[i]});

在这里插入图片描述
这里我们就通过三个小点这个ES特性将当前对象的所有字段都赋值给这个对象

这样我们将 www 下的index.html改回去
在这里插入图片描述
这下这种模式也能适应了

不但他们都可以了多层嵌套的一个结构现在也可以了
我们将www下的 index.html 代码改成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src = "/xuni/bundle.js"></script><script>let templateStr = `<div>{{#students}}<ul><li>{{name}}</li>{{#list}}<li>{{.}}</li>{{/list}}</ul>{{/students}}</div>`;let data = {name: "小猫猫",age: 2,students: [{id: 0,name: "小明",list: ["篮球","唱","跳"]},{id: 1,name: "小红",list: ["电子游戏","计算机编程"]}]}GrManagData.render(templateStr,data);</script>
</body>
</html>

然后我们将 lookup.js 的判断改一下
在这里插入图片描述
简单说我们的name 可以包含点但他不能是点本身就是就是一个点
最终运行结果如下

非常完美

然后我们将 index.js 中的函数最后改一下
在这里插入图片描述
我们不输出了直接 return 回去

然后我们将 www下的index.html代码修改如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id = "container"></div><script src = "/xuni/bundle.js"></script><script>let templateStr = `<div>{{#students}}<ul><li>{{name}}</li>{{#list}}<li>{{.}}</li>{{/list}}</ul>{{/students}}</div>`;let data = {name: "小猫猫",age: 2,students: [{id: 0,name: "小明",list: ["篮球","唱","跳"]},{id: 1,name: "小红",list: ["电子游戏","计算机编程"]}]}let templateDom = GrManagData.render(templateStr,data);var container = document.getElementById('container');container.innerHTML = templateDom;</script>
</body>
</html>