一种网页组件的生成方法和装置制造方法及图纸

本申请实施例公开了一种网页组件的生成方法及应用该方法的生成装置，便于高效生成网页组件。该生成方法包括：获取网页组件的JSX代码；获取JSX代码中HTML标签；判断获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；若是，根据匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。由以上本申请实施例提供的技术方案可见，本申请实施例通过在生成网页组件的过程中，将CSS选择器写入对应的HTML标签的Style属性之中，使得生成的网页组件能够自动具备CSS选择器部分，CSS选择器能够自动实现开发者对网页组件的，自动实现开发者对于网页组件的页面布局、文字排版等设计要求，提高网页组件的生成效率。

【技术实现步骤摘要】

本申请涉及网页开发
，特别涉及一种网页组件的生成方法及装置。
技术介绍
网页组件被誉为网页开发的未来，由于解决了网页表现层在开发过程中难以快速开发和实现复杂交互界面这两大难题，使得开发者能够开发出可在网站上循环利用的功能界面，越来越受到业内重视。现有技术中，一种编译生成网页组件的方法包括如下步骤：首先，直接通过JS的语法来写HTML的代码内容，使得HTML代码和JS代码就可以共存在一个兼容的JSX文件；最后，对该兼容的JSX文件做编译转换，将该兼容的JSX文件中扩展的HTML标签转换为普通的JS对象，从而得到所需要的网页组件。然而，在实现本申请过程中，上述现有技术中至少存在如下问题：现有的网页组件缺少CSS选择器部分，由于缺少了该代码部分，在需调整网页组件的页面布局、文字排版等对网页组件时，只能通过用JS的语法重新写入HTML的代码内容，该编码过程费时费力，造成网页组件生成效率低下。
技术实现思路
本申请实施例的目的是提供一种网页组件的生成方法及装置，能够高效生成网页组件。为解决上述技术问题，本申请实施例提供一种网页组件的生成方法，其包括：获取网页组件的JSX代码；获取所述JSX代码中HTML标签；判断获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；若是，根据匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。为解决上述技术问题，本申请实施例提供一种网页组件的生成装置，其包括：代码获取模块，获取网页组件的JSX代码；标签获取模块，获取JSX代码中HTML标签；匹配判断模块，判断获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；属性调整模块，若是，根据匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。由以上本申请实施例提供的技术方案可见，本申请实施例通过在生成网页组件的过程中，将CSS选择器直接写入对应的HTML标签的Style属性之中，使得生成的网页组件能够自动具备CSS选择器部分，自动实现开发者对于网页组件的页面布局、文字排版等设计要求，提高网页组件的生成效率。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1为本申请实施例中网页组件的生成方法的过程。图2为本申请实施例中网页组件的生成方法内调整动态HTML标签的过程。图3为本申请实施例中网页组件的生成方法内对HTML标签进行双向改进的过程。图4为本申请实施例中网页组件的生成装置的结构示意图。具体实施方式本申请实施例提供一种网页组件的生成方法及装置。为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的其他实施例，都应当属于本申请保护的范围。图1为本申请一个实施例中网页组件的生成方法的过程，该方法的执行主体可能是运行该网页组件的浏览器。本申请实施例中，前述生成方法包括如下步骤。S11、获取网页组件的JSX代码。本申请实施例中，程序员可以通过JS的语法来写HTML的代码内容，代码编辑器会将写好的代码内容生成为JSX文件。这样生成的JSX文件中，即可以包括HTML代码和JS代码。这样，可以获得如上生成的JSX文件。S12、获取JSX代码中HTML标签。本申请实施例中，通过JSX解析器对所得JSX代码进行解析，得到其中HTML树，从而得到其中HTML标签。S13、判断获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签，若是，执行步骤S14，若否，执行步骤S15。本申请实施例中，前述生成方法还包括位于步骤S12和S13之间的如下步骤：首先，将JSX代码转换至基于HTML协议的协议代码；然后，将待用CSS选择器通过协议代码的Link标签引入或Style标签写入。通过上述步骤，将原有基于JS规范的JSX代码运行于HTML协议上，从而得到符合该协议的协议代码，通过该协议代码的Link标签或Style标签，将待用CSS选择器和JSX代码汇总在一起，便于执行后续步骤S13。当然，本申请的其他实施例中，还可采用其他方式将JSX代码和待用CSS选择器汇总，在此不做赘述。在执行步骤S13过程中，针对每个HTML标签，判断是否有相匹配的待用CSS选择器，若有至少一个HTML标签有匹配的待用CSS选择器，则执行步骤S14，若的HTML标签均没有匹配的待用CSS选择器，则执行步骤S15。本申请实施例中，通过如下步骤来判断HTML标签是否具有匹配的待用CSS选择器。首先，获取该HTML标签的规则内容；进而，判断是否有相同规则内容的待用CSS选择器；若是，判定存在具有匹配的待用CSS选择器的HTML标签。以一个定义对话框或窗口的HTML标签<dialog>为例，该标签的规则内容则为dialog，判断是否有规则内容同样为dialog的待用CSS选择器，若有，则表明该CSS选择器同样是用于对话框或窗口，二者可以实现匹配。S14、根据匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。本申请实施例中，在待用CSS选择器为非伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性。前述非伪类选择器可以是类别选择器、标签选择器或ID选择器等，在此不做赘述。在待用CSS选择器为伪类选择器时，根据待用CSS选择器的样式内容的具体种类，对于HTML标签的Style属性的调整也不同，具体如下：在待用CSS选择器为Hover伪类选择器时，对CSS选择器做移入和移出事件监听，在发生移入事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生移出事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在待用CSS选择器为Active伪类选择器时，对CSS选择器做按下和弹起事件监听，在发生按下事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生弹起事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在待用CSS选择器为Focus伪类选择器时，对CSS选择器做聚焦和失焦事件监听，在发生聚焦事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生失焦事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在待用CSS选择器为Link伪类选择器时，跳过对该待用CSS选择器的样式内容写入至所对应的HTML标签的处理；在待用CSS选择器为Target伪类选择器时，判断Location.Hash是否与元素HREF属性相等，若是，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在本文档来自技高网...

【技术保护点】
一种网页组件的生成方法，其特征在于，包括：获取网页组件的JSX代码；获取所述JSX代码中HTML标签；判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；若是，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。

【技术特征摘要】
1.一种网页组件的生成方法，其特征在于，包括：获取网页组件的JSX代码；获取所述JSX代码中HTML标签；判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；若是，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。2.如权利要求1所述的生成方法，其特征在于，判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签，具体包括：获取所述HTML标签的规则内容；判断是否有相同规则内容的待用CSS选择器；若是，判定所述获取的HTML标签中具有与待用CSS选择器匹配的HTML标签。3.如权利要求1所述的生成方法，其特征在于，判获取所述JSX代码中HTML标签之后，判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签之前，所述生成方法还包括：将所述JSX代码转换至基于HTML协议的协议代码；将待用CSS选择器通过所述协议代码的Link标签引入或Style标签写入。4.如权利要求3所述的生成方法，其特征在于，在生成网页组件之后，所述生成方法还包括：删除所述协议代码的Link标签引入或Style标签写入。5.如权利要求1所述的生成方法，其特征在于，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，具体包括下述至少一种：在所述待用CSS选择器为非伪类选择器时，将所述待用CSS选择器的样
\t式内容写入至所对应的HTML标签的Style属性；在所述待用CSS选择器为Hover伪类选择器时，对所述CSS选择器做移入和移出事件监听，在发生移入事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生移出事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在所述待用CSS选择器为Active伪类选择器时，对所述待用CSS选择器做按下和弹起事件监听，在发生按下事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生弹起事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在所述待用CSS选择器为Focus伪类选择器时，对所述待用CSS选择器做聚焦和失焦事件监听，在发生聚焦事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生失焦事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在所述待用CSS选择器为Link伪类选择器时，跳过对该待用CSS选择器的样式内容写入至所对应的HTML标签的处理；在所述待用CSS选择器为Target伪类选择器时，判断Location.Hash是否与元素HREF属性相等，若是，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在所述待用CSS选择器为Enable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在所述待用CSS选择器为Disable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；在所述待用CSS选择器为FirstChild伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签中第一个HTML标签的Style属性；在所述待用CSS选择器为LastChild伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签中最后一个HTML标签的Style属性；在所述待用CSS选择器为Before伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签之前一个位置；在所述待用CSS选择器为After伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签之后一个位置。6.如权利要求1所述的生成方法，其特征在于，所述生成方法还包括：对所述HTML标签中未与待用CSS选择器匹配的HTML标签做标记；对未与所述HTML标签做匹配的待用CSS选择器做标记；运行所述网页组件，生成结果HTML代码；获取所述结果HTML代码中被标记过的HTML标签；获取与被标记过的HTML标签相匹配的、被标记过的CSS选择器；根据所述匹配的、被标记过的CSS选择器的样式内容调整所对应的、被标记的HTML标签的Style属性，更新所述网页组件。7.如权利要求1所述的生成方法，其特征在于，获取所述JSX代码中HTML标签之后，所述生成方法还包括：判断HTML标签中是否有双向HTML标签；若是，对双向HTML标签做预设输入事件监听；判断所述双向HTML标签所对应的视图层是否发生预设输入事件；若是，获取所述双向HTML标签中视图层的更新数据，将所述更新数据...

【专利技术属性】
技术研发人员：郝立鑫，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY