当前位置: 首页 > wzjs >正文

公司的网站是什么网站推广应该坚持什么策略

公司的网站是什么,网站推广应该坚持什么策略,网站抽奖模块怎么做,网站建设管理成本估计提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…

提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议


由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题,在这里只提供部分原题代码

本题目为: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对象中的childrenstyle属性,因为这些属性已经被处理过了。

   delete config.children, delete config.style

返回这个值,把DOM元素渲染上

config对象中的剩余属性添加到新创建的DOM元素中,并返回这个元素。

   return Object.assign(dom, config)

这样代码就完成啦!!!

这里我们拓展两个知识

outerHTML

outerHTML属性获取描述元素(包括其后代)的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

要仅获取元素内容的 HTML 表示形式或替换元素的内容,请使用 [innerHTML] 属性

Object.assign

Object.assign() 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象,并返回修改后的目标对象。


感谢观看此篇文章,谢谢大家的支持,本片文章只是我自己学习的历程,有些写的不好地方欢迎大家交流改动。

长路漫漫,我们还需努力!

http://www.dtcms.com/wzjs/384357.html

相关文章:

  • wordpress 黑体36优化大师下载安装
  • 企业网站的完整性包括哪些百度百科官网登录
  • 万网做网站怎么样miy188coo免费入口
  • 织梦cms漫画模板衡水网站seo
  • 做网站维护的收入怎么确认百度地图人工客服电话
  • 求人做网站希爱力吃一颗能干多久
  • 做百度网站百度推广费用多少
  • 免费友情链接平台青岛seo软件
  • 华亭网站建设百度seo排名优化是什么
  • 在深圳做网站多少钱广点通广告投放平台
  • 做整个网站静态页面多少钱优化网站排名茂名厂商
  • 计算机专业代做毕设哪个网站靠谱教育培训机构报名
  • 的动态网站开发著名的个人网站
  • 河北做wap网站关键词优化排名用哪些软件比较好
  • 大良网站智能推广价格虞城seo代理地址
  • 我建设的网站打开很慢网站管理系统
  • 徐州做网站多少钱培训学校怎么招生
  • 北海做网站网站建设seo哪家好
  • 形容网站做的好的词语网站优化入门免费教程
  • 教育局门户网站建设目的每日新闻简报
  • 昆明网站建设公司排行合肥网站优化技术
  • 做批发服装的网站网络营销课程学什么
  • 石家庄做外贸网站建设seo搜索引擎优化知乎
  • 大学生婚恋网站策划书培训班有哪些
  • 新网站排名优化怎么做新手怎么学电商运营
  • 网站开发薪水一般多少钱一元友情链接平台
  • 长沙网站推西安百度seo推广电话
  • b2b和b2c的区别关键词优化技巧
  • 哪个网站可以学做馒头网页设计个人主页模板
  • 用jsp做的二手交易网站现在疫情怎么样了最新消息