探究Vue源码:mustache模板引擎(11) 递归处理循环逻辑并收尾算法处理
好 在上文 探究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) 解决不能用连续点符号找到多层对象问题，为编译循环结构做铺垫 我们解决了js字符串没办法通过 什么点什么拿到对象中的值的问题 这个大家需要记住 因为这个方法的编写之前是当做面试题出现过的 那么 本文 我们就要去写上…...
STM32 CubeMX USB_CDC(USB_转串口)
STM32 CubeMX STM32 CubeMX 定时器（普通模式和PWM模式） STM32 CubeMX一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择 二、代码部分添加代码实验效果 printf发…...
机器学习——卷积神经网络基础
卷积神经网络（Convolutional Neural Network：CNN） 卷积神经网络是人工神经网络的一种，是一种前馈神经网络。最早提出时的灵感来源于人类的神经元。 通俗来讲，其主要的操作就是：接受输入层的输入信息&…...
端到端自动驾驶前沿论文盘点（pdf+代码）
现在的自动驾驶，大多数还是采用的模块化架构，但这种架构的缺陷十分明显：在一个自动驾驶系统里，可能会包含很多个模型，每个模型都要专门进行训练、优化、迭代，随着模型的不断进化，参数量不断提高…...
2023年中期奶粉行业分析报告（京东数据开放平台）
根据国家统计局和民政部数据公布，2022年中国结婚登记数创造了1980年（有数据公布）以来的历史新低，共计683.3万对。相较于2013年巅峰时期的数据，2022年全国结婚登记对数已接近“腰斩”。 2023年“520”期间的结婚登记数…...
web集群学习:基于CentOS 7构建 LVS-DR 群集并配置服务启动脚本
目录 1、环境准备 2、配置lvs服务启动脚本 1、在RS上分别配置服务启动脚本 2、在lvs director上配置服务启动脚本 3、客户端测试 配置LVS-DR模式主要注意的有 1、vip绑定在RS的lo接口； 2、RS做arp抑制； 1、环境准备 VIP192.168.95.10 RS1192.168…...
Flask 高级应用：使用蓝图模块化应用和 JWT 实现安全认证
本文将探讨 Flask 的两个高级特性：蓝图（Blueprints）和 JSON Web Token（JWT）认证。蓝图让我们可以将应用模块化，以便更好地组织代码；而 JWT 认证是现代 Web 应用中常见的一种安全机制。 一、使用…...
【Grafana】中文界面配置 v10.0.3
比如通过 docker run -d -p 3000:3000 -v /e/code/monitor/grafana/grafana.ini.txt:/etc/grafana/grafana.ini grafana/grafana运行一个容器（最新是v10.0.3）。 在 /admin/settings 可以看到 users 部分有一个 default_language 配置。 所以在挂载到 …...
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 图…...
Unity 编辑器选择器工具类Selection 常用函数和用法
Unity 编辑器选择器工具类Selection 常用函数和用法 点击封面跳转下载页面 简介 在Unity中，Selection类是一个非常有用的工具类，它提供了许多函数和属性，用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法ÿ…...
ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程
详情点击链接：ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程 一：洪水普查技术规范 1.1 全国水旱灾害风险普查实施方案 1.2 洪水风险区划及防治区划编制技术要求 1.3 山丘区中小河流洪水淹没图编制技术要求 二：ArcGIS及数据管理 …...
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…...
IMV8.0
一、背景内容 经历了多个版本，基础内容在前面，可以使用之前的基础环境： v1： https://blog.csdn.net/wtt234/article/details/132139454 v2： https://blog.csdn.net/wtt234/article/details/132144907 v3： h…...
【Linux 网络】 数据链路层协议
数据链路层协议 数据链路层解决的问题以太网协议认识以太网以太网帧格式 认识MAC地址对比理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响ARP协议ARP协议的作用ARP协议的工作流程ARP数据报的格式 总结 数据链路层解决的问题 IP拥有将数据跨…...
GWJDN-400型2MHZ自动平衡高温介电温谱仪
GWJDN-400型2MHZ自动平衡高温介电温谱仪 GWJDN-400型2MHZ自动平衡高温介电温谱仪 关键词：介电常数，高温介电，自动平衡 主要功能： 材料介电常数测试仪 半导体材料的介电常数、导电率和C-V特性液晶材料:液晶单元的介电常数、弹性…...
第十五次CCF计算机软件能力认证
第一题：小明上学 小明是汉东省政法大学附属中学的一名学生，他每天都要骑自行车往返于家和学校。 为了能尽可能充足地睡眠，他希望能够预计自己上学所需要的时间。 他上学需要经过数段道路，相邻两段道路之间设有至多一盏红绿灯。 京…...
ThreadPoolExecutor线程池详解
ThreadPoolExecutor线程池详解 1. 背景 项目最近的迭代中使用到了ThreadPoolExecutor线程池，之前都只是知道怎么用，没有了解过线程池的底层原理，项目刚上线，有时间整理一下线程池的用法，学习一下线程池的底层实现与工…...
【VB6|第22期】用SQL的方式读取Excel数据
日期：2023年8月7日 作者：Commas 签名：(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方ÿ…...
融云：从「对话框」跳进魔法世界，AIGC 带给社交的新范式
8 月 17 日（周四），融云将带来直播课-《北极星如何协助开发者排查问题与预警风险？》欢迎点击上方报名~ AIGC 与社交结合的应用主要分两种，一是发乎于 AIGC，以大模型为基础提供虚拟伴侣等服务的 Appÿ…...
UWB伪应用场景 - 别再被商家忽悠
近几年UWB技术在网上宣传得如火如荼，与高精度定位几乎或等号，笔者认为这是营销界上的一大成功案例。 UWB超宽带技术凭借着低功耗、高精度，确实在物联网行业混得风生水起，但在无数实际应用案例中，根据客户的反馈情况&a…...
【快应用】list组件属性的运用指导
【关键词】 list、瀑布流、刷新、页面布局 【问题背景】 1、 页面部分内容需要瀑布流格式展示，在使用lsit列表组件设置columns进行多列渲染时，此时在里面加入刷新动画时，动画只占了list组件的一列，并没有完全占据一行宽度&…...
js 面试题总结
js 面试题总结 文章目录 js 面试题总结近百道面试题1、实现 子元素 在父元素中垂直居中的方式2、实现 子元素 在父元素中水平 垂直居中的方式3、描述 Keepealive 的作用，有哪些钩子函数，如何控制组件级存列表?4、请写出判断对象是数组的三个方法5、请说…...
HTML之表单标签
目录 表单标签 Form表单 定义： 基本语法结构： form属性： enctyoe属性 fieldeset标签 fieldeset属性 legend标签 label标签 优势 label属性 input标签 input属性 input标签中的type属性 text text输入框有以下配套属性 searc bu…...
Java经典面试题总结（一）
Java经典面试题总结（一） 题一：Java编译运行原理题二：JDK，JVM，JRE三者之间的关系题三：谈一下对冯诺依曼体系的了解题四：重载与重写的区别题五：拆箱装箱是指什么࿱…...
Android监听设备亮灭屏广播（动态广播代码）
MainActivity中 public class MainActivity extends Activity {private WakeAndLockReceiver wakeAndLockReceiver;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//注册亮屏和息…...
【前端面试手撕题】简易深拷贝、深拷贝、寄生组合式继承、发布订阅模式、观察者模式
FED16 简易深拷贝 描述 请补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。 注意： 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象（{}）、基本数据类型中]无需考虑循环引用问题 <!DO…...
【生物医学】应激（应激反应）全身适应综合征
最近在探索疲劳、负荷、应激方面的底层发生机制，遂整理了一些相关内容，以脑图方式呈现。本文以生物医学向为主。 OK，开始基础介绍：应激 (stress)是指在收到外部或内部、心理社会刺激下的非特异性适应反应。 本文主要收集整理了相…...
浅析基于安防监控EasyCVR视频汇聚融合技术的运输管理系统
一、项目背景 近年来，随着物流行业迅速发展，物流运输费用高、运输过程不透明、货损货差率高、供应链协同能力差等问题不断涌现，严重影响了物流作业效率，市场对于运输管理数字化需求愈发迫切。当前运输行业存在的难题如下…...
VBA技术资料MF41：VBA_将常规数字转换为文本数字
【分享成果，随喜正能量】时有落花至，远随流水香。人生漫长，不攀缘，不强求，按照自己喜欢的方式生活，不必太过在意，顺其自然就好。路再长也有终点，夜再黑也有尽头。 我给VBA的定义&am…...
Wavefront .OBJ文件格式解读【3D】
OBJ（或 .OBJ）是一种几何定义文件格式，最初由 Wavefront Technologies 为其高级可视化器动画包开发。 该文件格式是开放的，已被其他 3D 图形应用程序供应商采用。 OBJ 文件格式是一种简单的数据格式，仅表示 3D 几何体&…...