备赛蓝桥杯之第十五届职业院校组省赛第六题：简易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属性传入的两个参数进行说明
既然是解析器，那么就会有类似“翻译”一样的功能，用户输入一种语言，之后经过一种算法，将输入的语言进行翻译，之后输出出去
既然我们了解了基本的操作原理，那么我们就知道了该去找什么
首先我们找输入的语句，示例一个最简单输入
```js
jsx("div", {
children: "hello"
})
```我们发现输入的语言中存在div {children: "hello"} 这样我们根据上述的参数说明即可找到之间的关系，div 即为type ,也就是我们要加入的标签属性，{children: "hello"} 即为config 中的其中一个属性，这个children 属性即为我们要加的文本
有了这个最基本的理解，那么其他的比较复杂的传入我们也就懂了，像是
```js
jsx("div", {
children: [
"hello",
jsx("span", {
children: "world"
})
]
});
```在其中，不同的就是加入了另一个jsx，其处理的原理一样
像是
```js
jsx("div", {
style: {color:'red';fontSize:'12px'}, // 样式，可以有多个
id:'id-1', // id
children: "hello"
})
```在其中，不同的是加入了style样式属性
像是
```js
jsx("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() 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！