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

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

news 2026/2/7 20:22:23

好 在上文 探究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模板引擎(10) 解决不能用连续点符号找到多层对象问题&#xff0c;为编译循环结构做铺垫 我们解决了js字符串没办法通过 什么点什么拿到对象中的值的问题 这个大家需要记住 因为这个方法的编写之前是当做面试题出现过的 那么 本文 我们就要去写上…...

编程日记 2023/8/8 20:10:50

STM32 CubeMX USB_CDC(USB_转串口)

STM32 CubeMX STM32 CubeMX 定时器&#xff08;普通模式和PWM模式&#xff09; STM32 CubeMX一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择 二、代码部分添加代码实验效果 ![请添加图片描述](https://img-blog.csdnimg.cn/a7333bba478441ab950a66fc63f204fb.png)printf发…...

编程日记 2023/8/8 20:09:48

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

卷积神经网络&#xff08;Convolutional Neural Network&#xff1a;CNN&#xff09; 卷积神经网络是人工神经网络的一种&#xff0c;是一种前馈神经网络。最早提出时的灵感来源于人类的神经元。 通俗来讲&#xff0c;其主要的操作就是&#xff1a;接受输入层的输入信息&…...

编程日记 2023/8/8 20:08:45

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

现在的自动驾驶&#xff0c;大多数还是采用的模块化架构&#xff0c;但这种架构的缺陷十分明显&#xff1a;在一个自动驾驶系统里&#xff0c;可能会包含很多个模型&#xff0c;每个模型都要专门进行训练、优化、迭代&#xff0c;随着模型的不断进化&#xff0c;参数量不断提高…...

编程日记 2023/8/8 20:07:44

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

根据国家统计局和民政部数据公布&#xff0c;2022年中国结婚登记数创造了1980年&#xff08;有数据公布&#xff09;以来的历史新低&#xff0c;共计683.3万对。相较于2013年巅峰时期的数据&#xff0c;2022年全国结婚登记对数已接近“腰斩”。 2023年“520”期间的结婚登记数…...

编程日记 2023/8/8 20:06:43

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

目录 1、环境准备 2、配置lvs服务启动脚本 1、在RS上分别配置服务启动脚本 2、在lvs director上配置服务启动脚本 3、客户端测试 配置LVS-DR模式主要注意的有 1、vip绑定在RS的lo接口&#xff1b; 2、RS做arp抑制&#xff1b; 1、环境准备 VIP192.168.95.10 RS1192.168…...

编程日记 2023/8/8 20:05:42

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

本文将探讨 Flask 的两个高级特性&#xff1a;蓝图&#xff08;Blueprints&#xff09;和 JSON Web Token&#xff08;JWT&#xff09;认证。蓝图让我们可以将应用模块化&#xff0c;以便更好地组织代码&#xff1b;而 JWT 认证是现代 Web 应用中常见的一种安全机制。 一、使用…...

编程日记 2023/8/8 20:04:41

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

比如通过 docker run -d -p 3000:3000 -v /e/code/monitor/grafana/grafana.ini.txt:/etc/grafana/grafana.ini grafana/grafana运行一个容器&#xff08;最新是v10.0.3&#xff09;。 在 /admin/settings 可以看到 users 部分有一个 default_language 配置。 所以在挂载到 …...

编程日记 2023/8/8 20:03:39

web前端html

文章目录 快捷方式一、html5的声明二、html5基本骨架 2.1 html标签 2.2 head标签 2.3 body和head同级 2.4 body标签 2.5 title标签 2.6 meta标签 三、标题标签介绍与应用 3.1 标题的介绍 3.2 标题标签位置摆放 3.3 标签之段落、换行、水平线 3.3 标签之图片 3.3.1 图…...

编程日记 2023/8/8 20:02:38

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

Unity 编辑器选择器工具类Selection 常用函数和用法 点击封面跳转下载页面 简介 在Unity中&#xff0c;Selection类是一个非常有用的工具类&#xff0c;它提供了许多函数和属性&#xff0c;用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法&#xff…...

编程日记 2023/8/8 20:01:37

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

详情点击链接&#xff1a;ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程 一&#xff1a;洪水普查技术规范 1.1 全国水旱灾害风险普查实施方案 1.2 洪水风险区划及防治区划编制技术要求 1.3 山丘区中小河流洪水淹没图编制技术要求 二&#xff1a;ArcGIS及数据管理 …...

编程日记 2023/8/8 20:00:36

Oracle日志相关操作

1.归档日志设置 # 切换账号 $ su - oracle# 登录oracle的sys账户 $ sqlplus / as sysdbasql> archive log list; #查看是不是归档方式 SQL> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive destin…...

编程日记 2023/8/8 19:59:35

IMV8.0

一、背景内容 经历了多个版本&#xff0c;基础内容在前面&#xff0c;可以使用之前的基础环境&#xff1a; v1&#xff1a; https://blog.csdn.net/wtt234/article/details/132139454 v2&#xff1a; https://blog.csdn.net/wtt234/article/details/132144907 v3&#xff1a; h…...

编程日记 2023/8/8 19:58:33

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

数据链路层协议 数据链路层解决的问题以太网协议认识以太网以太网帧格式 认识MAC地址对比理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响ARP协议ARP协议的作用ARP协议的工作流程ARP数据报的格式 总结 数据链路层解决的问题 IP拥有将数据跨…...

编程日记 2023/8/8 19:57:32

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

GWJDN-400型2MHZ自动平衡高温介电温谱仪 GWJDN-400型2MHZ自动平衡高温介电温谱仪 关键词&#xff1a;介电常数&#xff0c;高温介电&#xff0c;自动平衡 主要功能&#xff1a; 材料介电常数测试仪 半导体材料的介电常数、导电率和C-V特性液晶材料:液晶单元的介电常数、弹性…...

编程日记 2023/8/8 19:56:30

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

第一题&#xff1a;小明上学 小明是汉东省政法大学附属中学的一名学生&#xff0c;他每天都要骑自行车往返于家和学校。 为了能尽可能充足地睡眠&#xff0c;他希望能够预计自己上学所需要的时间。 他上学需要经过数段道路&#xff0c;相邻两段道路之间设有至多一盏红绿灯。 京…...

编程日记 2023/8/8 19:55:29

ThreadPoolExecutor线程池详解

ThreadPoolExecutor线程池详解 1. 背景 项目最近的迭代中使用到了ThreadPoolExecutor线程池&#xff0c;之前都只是知道怎么用&#xff0c;没有了解过线程池的底层原理&#xff0c;项目刚上线&#xff0c;有时间整理一下线程池的用法&#xff0c;学习一下线程池的底层实现与工…...

编程日记 2023/8/8 19:54:28

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

日期&#xff1a;2023年8月7日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xff…...

编程日记 2023/8/8 19:53:27

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

8 月 17 日&#xff08;周四&#xff09;&#xff0c;融云将带来直播课-《北极星如何协助开发者排查问题与预警风险&#xff1f;》欢迎点击上方报名~ AIGC 与社交结合的应用主要分两种&#xff0c;一是发乎于 AIGC&#xff0c;以大模型为基础提供虚拟伴侣等服务的 App&#xff…...

编程日记 2023/8/8 19:52:25

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

近几年UWB技术在网上宣传得如火如荼&#xff0c;与高精度定位几乎或等号&#xff0c;笔者认为这是营销界上的一大成功案例。 UWB超宽带技术凭借着低功耗、高精度&#xff0c;确实在物联网行业混得风生水起&#xff0c;但在无数实际应用案例中&#xff0c;根据客户的反馈情况&a…...

编程日记 2023/8/8 19:51:22

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/5 4:49:43

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/1/25 11:46:42

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46