备赛蓝桥杯之第十五届职业院校组省赛第六题:简易JSX解析器
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议
由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题,在这里只提供部分原题代码
本题目为:2024年十五届省赛职业院校组真题第六题:简易JSX解析器
题目:
需要考生作答的代码段如下:
const jsx = (type, config) => {/* TODO: 待补充代码 */};
题目要求:
完成元素的 DOM 节点转换,即只转换 `config` 中的 `children`。
完成元素的属性转换,其中元素样式如果是小驼峰写法需要转换成 `-` 连接,如 `fontSize` 需转换成 `font-size`。`js/index.js` 文件中的 `isUpperCase` 函数功能为判断字符是否为大写。**注意:样式必须转换为行内样式。**
完成元素事件正确绑定与触发。
答案:
const jsx = (type, config) => {/* TODO: 待补充代码 */const dom = document.createElement(type)// 将 children 添加到子节点for (const child of config.children)dom.innerHTML += child.outerHTML || child// 将 style 添加到样式Object.assign(dom.style, config.style)// 删除已添加的属性delete config.children, delete config.style// 其余属性放到元素里,并返回return Object.assign(dom, config)
};
拓展学习
本题作者想说
理解题目要求,首先题目给出一个函数参数说明,即对jsx属性传入的两个参数进行说明
既然是解析器,那么就会有类似“翻译”一样的功能,用户输入一种语言,之后经过一种算法,将输入的语言进行翻译,之后输出出去
既然我们了解了基本的操作原理,那么我们就知道了该去找什么
首先我们找输入的语句,示例一个最简单输入
```jsjsx("div", {children: "hello"})```
我们发现输入的语言中存在div
{children: "hello"}
这样我们根据上述的参数说明即可找到之间的关系,div
即为type
,也就是我们要加入的标签属性,{children: "hello"}
即为config
中的其中一个属性,这个children
属性即为我们要加的文本
有了这个最基本的理解,那么其他的比较复杂的传入我们也就懂了,像是
```jsjsx("div", {children: ["hello",jsx("span", {children: "world"})]});```
在其中,不同的就是加入了另一个jsx,其处理的原理一样
像是
```jsjsx("div", {style: {color:'red';fontSize:'12px'}, // 样式,可以有多个id:'id-1', // idchildren: "hello"})```
在其中,不同的是加入了style样式属性
像是
```jsjsx("div", {children: "hello",onclick: () => { // 点击触发的事件alert("div clicked")}})```
在其中,不同的是加入了onclick出发事件
我们来验证一下,是否输入我们需要的东西
在操作之前加入console.log(config)
来输出一下我们输入进去的jsx在后台的类型
这里我们先用下图这个代码
我们可以看到在控制台输出的格式是
这样我们对基本的数据传入就了解了
之后我们就要想,我们做些什么,首先我们要处理这个转换的操作,另外还要输出到页面上
我们首先去想怎么输出,之前在页面上这段文字是在哪显示的?我们去页面中寻找
我们可以看到在页面中输出这个代码块在这个类名为show-box-body,id为app-code的div之中,我们去index.html中找一找
我们可以看到一件奇怪的事情,在代码中没有其他的元素。仅仅只有这一个盒子
这是我们应该想到,在js中我们可以通过createElement来创建一个DOM元素,这样我们的思路一下就明确了
创建DOM元素->对DOM元素进行添加一系列操作->返回这个值,把DOM元素渲染上
创建DOM元素
使用document.createElement
方法创建了一个新的DOM元素,其类型由type
参数指定。
document.createElement(type)
对DOM元素进行添加一系列操作
遍历config.children
数组,将每个子节点添加到新创建的DOM元素中。如果子节点有outerHTML
属性,则使用该属性;否则,直接使用子节点本身。
for (const child of config.children)dom.innerHTML += child.outerHTML || child
使用Object.assign
方法将config.style
对象中的样式属性复制到新创建的DOM元素的style
属性中。
Object.assign(dom.style, config.style)
删除了config
对象中的children
和style
属性,因为这些属性已经被处理过了。
delete config.children, delete config.style
返回这个值,把DOM元素渲染上
将config
对象中的剩余属性添加到新创建的DOM元素中,并返回这个元素。
return Object.assign(dom, config)
这样代码就完成啦!!!
这里我们拓展两个知识
outerHTML
outerHTML
属性获取描述元素(包括其后代)的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。
要仅获取元素内容的 HTML 表示形式或替换元素的内容,请使用 [innerHTML
] 属性
Object.assign
Object.assign()
静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象,并返回修改后的目标对象。
感谢观看此篇文章,谢谢大家的支持,本片文章只是我自己学习的历程,有些写的不好地方欢迎大家交流改动。
长路漫漫,我们还需努力!
相关文章:
备赛蓝桥杯之第十五届职业院校组省赛第六题:简易JSX解析器
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题࿰…...
深入解析ECDSA与RSA公钥算法:原理、对比及AWS最佳实践
一、公钥加密算法概述 在HTTPS通信和数字证书领域,ECDSA(椭圆曲线数字签名算法)和RSA(Rivest-Shamir-Adleman)是最主流的两种非对称加密算法。它们共同构成了现代网络安全的基础,但设计理念和技术实现存在显著差异。 © ivwdcwso (ID: u012172506) 二、RSA算法详解…...
单例设计模式---懒汉式--线程安全和不安全、枚举类
单例设计模式—懒汉式–线程安全和不安全 优点 资源利用率高:只有在真正需要使用单例实例时才进行创建,避免了在应用启动时就占用不必要的资源。 缺点 线程安全问题:在多线程环境下,如果多个线程同时调用获取实例的方法ÿ…...
c++: 容器vector
文章目录 介绍initializer_list与string的不同底层总代码 介绍 C 中的 vector 是一种序列容器,它允许你在运行时动态地插入和删除元素。 vector 是基于数组的数据结构,但它可以自动管理内存,这意味着你不需要手动分配和释放内存。 与 C 数组相…...
肖恩的n次根
1.肖恩的n次根 - 蓝桥云课 问题描述 喜欢研究数学问题的肖恩注意到,在编程语言中通常内置函数只有开平方根和开立方根,但是肖思想知道开高次方根(大于3次方称为高次方),应该怎么做。请你设计一个程序来帮帮肖恩。 输…...
Java直通车系列15【Spring MVC】(ModelAndView 使用)
目录 1. ModelAndView 概述 2. ModelAndView 的主要属性和方法 主要属性 主要方法 3. 场景示例 示例 1:简单的 ModelAndView 使用 示例 2:使用 ModelAndView 处理列表数据 示例 3:使用 ModelAndView 处理异常情况 1. ModelAndView 概…...
LeetCode和为k的字数组(560题)
题目展示 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入:nums …...
消息队列为什么会有消费组的概念,什么作用,以订单系统为例说明
消息队列中的消费组(Consumer Group)概念是为了实现消息的并行处理和负载均衡。在分布式系统中,消费组允许多个消费者实例共同消费同一个主题(Topic)中的消息,从而提高消息处理的速度和系统的吞吐量。 消费…...
数据结构--AVL树
一、二叉搜索树(Binary Search Tree, BST) 基本性质 对于树中的每个节点,其左子树中的所有节点值均小于该节点值。其右子树中的所有节点值均大于该节点值。左右子树也分别是二叉搜索树。 极端场景 在极端情况下,如插入节点顺序…...
OpenManus 的提示词
OpenManus 的提示词 引言英文提示词的详细内容工具集的详细说明中文翻译的详细内容GitHub 仓库信息背景分析总结 引言 OpenManus 是一个全能 AI 助手,旨在通过多种工具高效地完成用户提出的各种任务,包括编程、信息检索、文件处理和网页浏览等。其系统提…...
达梦数据库在Linux,信创云 安装,备份,还原
(一)系统环境检查 1操作系统:确认使用的是国产麒麟操作系统,检查系统版本是否兼容达梦数据库 V8。可以通过以下命令查看系统版本: cat /etc/os-release 2硬件资源:确保服务器具备足够的硬件资源࿰…...
怎么使用Sam Helper修改手机屏幕分辨率,使得游戏视野变广?
1.准备Shizuku 和Sam Helper软件 2.打开设置,找到关于本机,连续点击版本号五次打开开发者选项 3.找到开发者选项,打开USB调试和无线调试 4.返回桌面,我们接着打开shizuku,点击配对,这里打开开发者选项,找…...
Unity DOTS 从入门到精通之 创建实体
文章目录 前言安装 DOTS 包创建实体1.手动创建空实体(适用于运行时动态创建)2.克隆 预制体(主线程同步操作)3.克隆 预制体(兼容Job System)4.通过 GameObject 转换(Baker方式) 其他E…...
【OA角色数据权限】自定数据权限(自定义部门)、本部门数据权限、本部门及以下数据权限、仅本人数据权限
文章目录 引言I 表设计部门表设计角色表设计II 数据过滤处理注解参数说明数据权限使用数据过滤处理切面 DataScopeAspectQuery 基类知识扩展引言 I 表设计 部门表设计 部门表采用部门路径反应祖先层级关系(包含自己部门的ID) 查询用户所在的本部门及其对应的下级部门:采用…...
记录小白使用 Cursor 开发第一个微信小程序(一):注册账号及下载工具(250308)
文章目录 记录小白使用 Cursor 开发第一个微信小程序(一):注册账号及下载工具(250308)一、微信小程序注册摘要1.1 注册流程要点 二、小程序发布流程三、下载工具 记录小白使用 Cursor 开发第一个微信小程序(…...
STM32旋转编码器驱动详解:方向判断、卡死处理与代码分析 | 零基础入门STM32第四十八步
主题内容教学目的/扩展视频旋转编码器电路原理,跳线设置,结构分析。驱动程序与调用。熟悉电路和驱动程序。 师从洋桃电子,杜洋老师 📑文章目录 一、旋转编码器原理与驱动结构1.1 旋转编码器工作原理1.2 驱动程序结构 二、方向判断…...
海思Hi3516DV00移植yolov5-7.0的模型转化流程说明
一、YOLOv5 YOLOv5作为单阶段检测框架的集大成者,凭借其卓越的实时性、高精度和易用性,已成为工业界实际部署的首选方案。yolov5的最新版本是7.0,该版本是官方最后更新的一个版本。yolov5-7.0 工程化实现卓越:基于PyTorch框架构…...
C++ string类(前)
目录 一、前言 二、正文 1.1什么是string类 1.2为什么学习string类 1.3string使用注意 1.4 string 类常用接口说明 1.4.1string类对象的常见构造 1.4.2string类对象的容量操作 1.4.3 string 类对象的访问以及遍历操作 1.4.4 string 类对象的修改操作 三、结言 一、前…...
MySQL---INSERT语句、UPDATE语句、DELETE语句
目录 INSERT语句-插入 1.格式 2.操作 UPDATE语句-修改 1.格式 2.操作 DELETE语句-删除 1.格式 2.操作 INSERT语句-插入 1.格式 格式: insert into 表名 values (value1,value2,.....) 1. value后的内容:与表字段匹配的数据,如果字段为主键&…...
vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定
创建vue项目之后我们就可以开始写代码了,我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。 我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。 我们通过vue建立的项目,它的结构是在一个vue文件内集成了HTML…...
Mysql中的常用函数
1、datediff(date1,date2) date1减去date2,返回两个日期之间的天数。 SELECT DATEDIFF(2008-11-30,2008-11-29) AS DiffDate -- 返回1 SELECT DATEDIFF(2008-11-29,2008-11-30) AS DiffDate -- 返回-1 2、char_length(s) 返回字符串 s 的字符数 3、round(x,d)…...
使用JMeter(组件详细介绍+使用方式及步骤)
JSON操作符 在我们使用请求时,经常会遇到JSON格式的请求体,所以在介绍组件之前我会将介绍部分操作符,在进行操作时是很重要的 Operator Description $ 表示根元素 当前元素 * 通配符,所有节点 .. 选择所有符合条件的节点 .name 子元素,name是子元素名称 [start:e…...
【大模型聊天】实时交互技术选型
在Python开发中,实现RAG问答或大模型聊天功能无需强制使用WebSocket,技术选型需结合实时性需求与交互场景。以下是技术分析及示例: 技术方案对比 技术适用场景优缺点WebSocket双向高频交互(如实时对话)优点࿱…...
计算机网络:计算机网络的概念
1.计算机网络:由若干个结点和链接这些的链路组成。 2.集线器(Hub):可以把多个结点连接起来,组成一个计算机网络。 不能避免数据冲突的情况 3.交换机(Switch):可以把多个结点连接起来&#x…...
Trae:引领未来的 AI 编程新时代
目录 Trae:引领未来的 AI 编程新时代 更快、更好、更准确的 AI IDE 无缝协作,AI 赋能开发者 Builder 模式:从 0 到 1 的智能助力 深度上下文理解,精准满足开发需求 实时代码补全,极致提升开发效率 智能 AI 协作…...
Vue _总结
文章目录 一 Vue介绍1 什么是Vue.js2 MVVM二 第一个例子1 引入vue2 html中用法3 创建vue实例对象三 Vue基本语法1 v-text2 v-bind3 v-on4 v-model5 v-if6 v-for7 计算属性8 组件化全局注册本地注册9 生命周期10 员工程序使用vue.js重构list.htmladd.htmlupdate.html四 使用vue-…...
Refreshtoken 前端 安全 前端安全方面
网络安全 前端不需要过硬的网络安全方面的知识,但是能够了解大多数的网络安全,并且可以进行简单的防御前两三个是需要的 介绍一下常见的安全问题,解决方式,和小的Demo,希望大家喜欢 网络安全汇总 XSSCSRF点击劫持SQL注入OS注入请求劫持DDOS 在我看来,前端可以了解并且防御前…...
基于深度学习的医学图像分割算法研究——结合MRI/CT图像的肿瘤区域自动分割与三维重建
针对课题《基于深度学习的医学图像分割算法研究——结合MRI/CT图像的肿瘤区域自动分割与三维重建》,以下是详细的研究框架与技术实现方案: 1. 核心研究要点 主要目标:构建端到端的深度学习模型,实现MRI/CT肿瘤区域的精准分割,并通过三维可视化支持临床诊断。核心挑战: 医…...
企业如何选择研发项目进度管理软件?盘点15款实用工具
这篇文章介绍了以下工具: 1. PingCode; 2. Worktile; 3. 腾讯 TAPD; 4. 华为 DevCloud; 5. 亿方云; 6. 阿里云效; 7. CODING 码云; 8. 明道云; 9. 进度猫; 10. 轻流等。 …...
【2024_CUMCM】图论模型
基本概念 注:以下叙述大多是自话,夹杂多数不专业表述 点集、边集 图论中图是由点和边组成的 G(V,E) V--点集 E--边集 权 G(V,E,W) W--权 一般都有权,构成赋权图 赋权图 在图中每条边都赋予一个非负实数权重的图,就是给每一条…...
Unity UGUI下优化需要射线检测类的UI元素的一种方式
直接上脚本 - 原理探究 先看MaskableGraphic 可以看到继承了Graphic,继续深入 在构造函数中找到了useLegacyMeshGeneration 而useLegacyMeshGeneration用来判断是否使用旧的网格生成系统,这里我们使用新的 在这个方法中,Graphic默认通过…...
unity3d 背景是桌面3d数字人,前面是web的表单
是可以实现的,但涉及多个技术栈的结合,包括 Unity3D、Web 技术(HTML、JavaScript)、以及可能的 WebGL 或 WebRTC 技术。大致有以下几种实现方案: 方案 1:Unity 作为独立应用(桌面端࿰…...
一周热点-Claude 3.7 Sonnet-在响应和思考模型之间切换
Anthropic 最近发布了 Claude 3.7 Sonnet,这是一款具有混合推理能力的模型,允许用户在即时响应和扩展思考模式之间切换,以适应不同类型的任务需求。以下是关于 Claude 3.7 Sonnet 的详细介绍: 1 混合推理模式 标准模式:快速生成响应,适合日常对话和简单任务,能在短时间内…...
【大模型安全】安全解决方案
【大模型安全】安全解决方案 1.技术层面2.数据层面数据收集阶段训练阶段模型推理阶段 1.技术层面 在使用大语言模型时,通常有几种选择:一种是采用封装好的大语言模型SaaS云服务;另一种是在公有云上部署自有的大语言模型,并通过权…...
Clion快捷键、修改字体
文章目录 一、Clion快捷键1.撤销:crtl Z2.重做:crtl shift Z3.删除该行:crtl Y4.多行后退:选中多行 Tab5.多行缩进:选中多行 shift Tab 二、修改注释的斜体 一、Clion快捷键 1.撤销:crtl Z 2.重做…...
软件工程笔记下
从程序到软件☆ 章节 知识点 概论☆ 软件的定义,特点,生存周期。软件工程的概论。软件危机。 1.☆软件:软件程序数据文档 (1)软件:是指在计算机系统的支持下,能够完成特定功能与性能的包括…...
探索DeepSeek:牛仔技术的未来在哪里?
引言 在当今快速发展的科技世界中,DeepSeek作为一种前沿技术,正逐渐改变我们对信息搜索和数据处理的认知。本文将深入探讨DeepSeek技术的核心优势、应用场景以及未来发展趋势,带您全面了解这一技术的魅力所在。 一、DeepSeek技术简介 1.1 什…...
Wireshark抓包标准化流程
1. 软件安装与验证 安装路径规范 按企业要求部署至指定目录: xxxx/xxxx/xxxx/xxxx验证安装完整性: 检查是否勾选 Install TShark(默认已选)确认安装后生成 Wireshark.exe 和 tshark.exe 可执行文件 权限配置 右键点击安装目录下…...
3月8日星期六今日早报简报微语报早读
3月8日星期六,农历二月初九,早报#微语早读。 1、国家卫健委主任:正会同有关部门起草育儿补贴的操作方案; 2、中国代表团出征第12届世界冬季特奥会,共48名运动员; 3、研究显示:2035年中国女性…...
计算机视觉之dlib人脸关键点绘制及微笑测试
dlib人脸关键点绘制及微笑测试 目录 dlib人脸关键点绘制及微笑测试1 dlib人脸关键点1.1 dlib1.2 人脸关键点检测1.3 检测模型1.4 凸包1.5 笑容检测1.6 函数 2 人脸检测代码2.1 关键点绘制2.2 关键点连线2.3 微笑检测 1 dlib人脸关键点 1.1 dlib dlib 是一个强大的机器学习库&a…...
周末总结(2024/03/08)
工作 人际关系核心实践: 要学会随时回应别人的善意,执行时间控制在5分钟以内 坚持每天早会打招呼 遇到接不住的话题时拉低自己,抬高别人(无阴阳气息) 朋友圈点赞控制在5min以内,职场社交不要放在5min以外 职场的人际关系在面对利…...
Linux第一课
一、Linux背景与发展 1. 发展史 1968年,研究人员开发了Multics操作系统,为后续发展奠定了基础。 1969−1970年,Ken Thompson和Dennis Ritchie在Multics基础上开发了UNIX系统。 1991年,Linus Torvalds发布了Linux操作系统&#…...
【Java基础】Java中new一个对象时,JVM到底做了什么?
Java中new一个对象时,JVM到底做了什么? 在Java编程中,new关键字是我们创建对象的最常用方式。但你是否想过,当你写下new MyClass()时,Java虚拟机(JVM)到底在背后做了哪些工作?今天&…...
《白帽子讲 Web 安全》之身份认证
目录 引言 一、概述 二、密码安全性 三、认证方式 (一)HTTP 认证 (二)表单登录 (三)客户端证书 (四)一次性密码(OTP) (五)多因…...
发行基础:宣传片
转载自官方文件 --------------- 宣传片 概览 作为 Steam 发行流程的一部分,您需要上传自己产品的宣传片。 宣传片将会显示在您的产品商店页的顶端,通常是您的潜在客户第一眼会看见的内容。 最佳实践 在 Steam 平台上,宣传片是产品营销中…...
PAT线上考试注意细节(甲/乙级)
闲谈 从此以后!参加竞赛! 都要为自己留够足够的时间练习! 都要为自己留够足够的时间练习! 都要为自己留够足够的时间练习! 重要的事情说三遍,毕竟这只是我参加各种竞赛的开始! \(ÿ…...
测试用大模型组词
已经把hanzi-writer的js的调用、hanzi-writer调用的数千个汉字的json文件,全都放在本地了。虽然用的办法还是比较笨的。我注意到 大模型也可以部署本地,虽然使用频率低的情况下不划算。 尝试直接通过html的javascript通过api key调用大语言模型&#x…...
【算法 C/C++】一维差分
2025 - 03 - 08 - 第 69 篇 Author: 郑龙浩 / 仟濹 【一维差分】 文章目录 前缀和与差分 - 我的博客差分(一维)1 大体介绍(1)**1 原数组 2 差分数组 3 差分数组的前缀和数组**(2)记录区间操作的边界 2 差分原理是什么??ÿ…...
前后端数据加密传输【最佳方案】
AES和RSA区别 算法类型安全性密钥长度/输出长度速度应用场景AES对称加密高128位、192位、256位快适用于大规模数据加密,入HTTPS协议的数据传输RSA非对称加密高1024位、2048位、4096位较慢适用于数据安全传输、数字签名和身份验证 综上:兼顾安全性和性能…...
爬虫案例七Python协程爬取视频
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Python协程爬取视频 前言 提示:这里可以添加本文要记录的大概内容: 爬虫案例七协程爬取视频 提示:以下是本篇文章正文…...