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

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

news 2026/5/16 13:21:40

好在上文探究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>

运行结果如下
在这里插入图片描述
恭喜大家万里诚征大了尽头

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

相关文章：

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

STM32 CubeMX USB_CDC(USB_转串口)

机器学习——卷积神经网络基础

端到端自动驾驶前沿论文盘点（pdf+代码）

2023年中期奶粉行业分析报告（京东数据开放平台）

web集群学习:基于CentOS 7构建 LVS-DR 群集并配置服务启动脚本

Flask 高级应用：使用蓝图模块化应用和 JWT 实现安全认证

【Grafana】中文界面配置 v10.0.3

web前端html

Unity 编辑器选择器工具类Selection 常用函数和用法

ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程

Oracle日志相关操作

IMV8.0

【Linux 网络】数据链路层协议

GWJDN-400型2MHZ自动平衡高温介电温谱仪

第十五次CCF计算机软件能力认证

ThreadPoolExecutor线程池详解

【VB6|第22期】用SQL的方式读取Excel数据

融云：从「对话框」跳进魔法世界，AIGC 带给社交的新范式

UWB伪应用场景 - 别再被商家忽悠

独立硬件看门狗芯片Air153C：提升嵌入式系统可靠性的终极方案

Node.js连接币安生态：MCP社区工具实战与架构解析

AssetStudio：从Unity游戏资源中提取3D模型、纹理和Lua脚本的完整指南

5个步骤快速上手：空洞骑士Scarab模组管理器完整使用指南

从架构到应用：DNNGP、DeepGS与DLGWAS三大基因预测模型深度剖析

Beyond Compare 5 开源密钥生成器：逆向工程与授权机制的深度解析

MATLAB集成大语言模型：架构设计与工程实践指南

如何在5分钟内用Python获取同花顺问财金融数据？

Git合并翻车现场实录：从命令行到IDEA，详解Merge冲突前后的撤销操作差异

tabtoy性能优化秘籍：多核并发导出与缓存加速技巧