CN106293669B - 一种网页组件的生成方法和装置 - Google Patents

Abstract

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

Description

一种网页组件的生成方法和装置

技术领域

本申请涉及网页开发技术领域，特别涉及一种网页组件的生成方法及装置。

背景技术

网页组件被誉为网页开发的未来，由于解决了网页表现层在开发过程中难以快速开发和实现复杂交互界面这两大难题，使得开发者能够开发出可在网站上循环利用的功能界面，越来越受到业内重视。

现有技术中，一种编译生成网页组件的方法包括如下步骤：首先，直接通过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属性；

在待用CSS选择器为Enable伪类选择器时，对CSS选择器做开启和禁用事件监听，在发生开启事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在待用CSS选择器为Disable伪类选择器时，对CSS选择器做开启和禁用事件监听，在发生开启事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在待用CSS选择器为First Child伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签中第一个HTML标签的Style属性；

在待用CSS选择器为Last Child伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签中最后一个HTML标签的Style属性；

在待用CSS选择器为Before伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签之前一个位置；

在待用CSS选择器为After伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签之后一个位置。

由于Style属性提供了一种改变HTML样式的通用方法，是首选的改变HTML元素样式的方法，在调整对应的HTML标签的Style属性时，使得CSS选择器与JSX代码合并。

在获得兼具HTML代码、JS代码和CSS选择器的组件源代码后，对该组件源代码进行编译，从而得到可在浏览器平台上运行的、符合当前正在草案中的Web Components规范的网页组件。

通过将CSS选择器写入至对应的HTML标签，使得生产的网页组件具备CSS选择器部分，通过预先调整CSS选择器部分来快速调整网页组件的页面布局、文字排版，使得所生成的网页组件自动实现开发者的设计要求，提高网页组件的生成效率。

S15、返回开发者网页组件生成失败。

在开发者明确生成失败后，可核查待用HTML代码、待用JS代码和待用CSS选择器是否均正确。

本申请实施例中，在步骤S14之后，前述生成方法还可以包括如下步骤。

删除协议代码的Link标签引入或Style标签写入。

由于JSX代码和CSS选择器是在预编译过程中进行合并，并且该静态资源与任何外部的CSS选择器被分离，使得整个CSS选择器和JSX部分合并成一个整体的静态资源，该静态资源以一个单独的文件形式存在，能够被独立的导入引用。

当然，前述删除Link标签引入或Style标签写入的步骤可以位于步骤S14之后任意位置，仅需保证在删除协议代码的Link标签引入或Style标签写入之前，已经完成对所对应的HTML标签的Style属性的调整即可。

本申请实施例中，在通过前述步骤S11至S16得到的网页组件的过程中，对于HTML标签的Style属性的调整需建立在该HTML标签是静态的基础上，然而由于JSX代码是基于JS规范的，其中可以内嵌有JS变量，导致有HTML并非静态的，其随着组件的运行，该标签的内容也会随之变化，导致难以即时将其与待用CSS选择器做匹配。

图2为本申请实施例中网页组件的生成方法内调整动态HTML标签的过程，具体如下。

S21、对HTML标签中未与待用CSS选择器匹配的HTML标签做标记。

S22、对未与HTML标签做匹配的待用CSS选择器做标记。

S23、运行网页组件，生成结果HTML代码。

在该网页组件被运行后，所得到的结果HTML代码中HTML标签均为静态的，以便于后续与被标记的CSS选择器做匹配。

S24、获取结果HTML代码中被标记过的HTML标签。

S25、获取与被标记过的HTML标签相匹配的、被标记过的CSS选择器。

此过程中，根据HTML标签的样式内容获取匹配的CSS选择器的过程可参考前述步骤S13，在此不做赘述。

S26、根据匹配的、被标记过的CSS选择器的样式内容调整所对应的、被标记的HTML标签的Style属性，更新网页组件。

此过程中，对于被标记的HTML标签的Style属性的调整可参考前述步骤S14，在此不做赘述。

在对更新后的组件源代码进行编译后，则得到HTML标签的Style属性均被调整的、功能更完善的网页组件。

图3为本申请实施例中网页组件的生成方法内对HTML标签进行双向改进的过程，包括如下步骤。

S31、判断HTML标签中是否有双向HTML标签，若否，执行步骤S32，若是，执行步骤S33。

前述双向HTML标签用于表示在视图层和数据层中做数据交互的HTML标签，例如Input标签、Textarea标签等。

S32、返回开发者双向改进异常。

S33、对双向HTML标签做预设输入事件监听。

本申请实施例中，监听双向HTML标签所对应的视图层，

该预设输入事件表示操作者对视图层所做操作所引发的事件，根据不同类型的双向HTML标签，有不同的预设输入事件。

以Input标签为例，对该Input标签做onInput事件监听，在发生onInput事件时，则表明该双向HTML标签所对应的视图层被操作过。

S34、判断双向HTML标签所对应的视图层是否发生预设输入事件，若是，执行步骤S35，若否，返回步骤S33。

S35、获取双向HTML标签中视图层的更新数据，将更新数据回写至双向HTML标签的数据层。

通过对双向HTML标签进行双向改进，使得网页组件在使用过程中，操作者对双向HTML标签的视图层进行操作时，该操作所带来的数据更新使得数据层也更新。

仍以Input标签为例，在操作者从该标签的视图层录入文字后，数据层也能得到操作者所录入的文字，使得网页组件能够解析操作录入的文字，以明确用户的操作目的。

图4为本申请实施例中网页组件的生成装置的结构示意图，该生成装置是基于以上生成方法，故该装置的具体细节可参照以上生成方法，本文不再予以赘述。

前述生成装置，包括：

代码获取模块11，获取网页组件的JSX代码；

标签获取模块12，获取JSX代码中HTML标签；

匹配判断模块13，判断获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；

属性调整模块14，若获取的HTML标签中具有与待用CSS选择器匹配的HTML标签，根据匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。

本申请实施例中，匹配判断模块13具体用于：

获取HTML标签的规则内容；

判断是否有相同规则内容的待用CSS选择器；

若是，判定获取的HTML标签中具有与待用CSS选择器匹配的HTML标签。

本申请实施例中，生成装置还包括选择器写入模块，具体用于：

将JSX代码转换至基于HTML协议的协议代码；

将待用CSS选择器通过协议代码的Link标签引入或Style标签写入。

本申请实施例中，生成装置还包括写入删除模块，具体用于：

删除协议代码的Link标签引入或Style标签写入。

本申请实施例中，属性调整模块14，至少用于下述一种：

在待用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属性；

在待用CSS选择器为Enable伪类选择器时，对CSS选择器做开启和禁用事件监听，在发生开启事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在待用CSS选择器为Disable伪类选择器时，对CSS选择器做开启和禁用事件监听，在发生开启事件时，将待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在待用CSS选择器为First Child伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签中第一个HTML标签的Style属性；

在待用CSS选择器为Last Child伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签中最后一个HTML标签的Style属性；

在待用CSS选择器为Before伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签之前一个位置；

在待用CSS选择器为After伪类选择器时，将待用CSS选择器的样式内容写入至所对应的HTML标签之后一个位置。

本申请实施例中，生成装置还包括动态标签调整模块，具体用于：

对HTML标签中未与待用CSS选择器匹配的HTML标签做标记；

对未与HTML标签做匹配的待用CSS选择器做标记；

运行网页组件，生成结果HTML代码；

获取结果HTML代码中被标记过的HTML标签；

获取与被标记过的HTML标签相匹配的、被标记过的CSS选择器；

根据匹配的、被标记过的CSS选择器的样式内容调整所对应的、被标记的HTML标签的Style属性，更新网页组件。

本申请实施例中，生成装置还包括双向改进模块，具体用于：

判断HTML标签中是否有双向HTML标签；

若是，对双向HTML标签做预设输入事件监听；

判断双向HTML标签所对应的视图层是否发生预设输入事件；

若是，获取双向HTML标签中视图层的更新数据，将更新数据回写至双向HTML标签的数据层。

由以上本申请实施例提供的技术方案可见，本申请实施例通过在生成网页组件的过程中，将CSS选择器写入对应的HTML标签的Style属性之中，使得生成的网页组件能够自动具备CSS选择器部分，CSS选择器能够自动实现开发者对网页组件的，自动实现开发者对于网页组件的页面布局、文字排版等设计要求，提高网页组件的生成效率。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和硬件中实现。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (14)

1.一种网页组件的生成方法，其特征在于，包括：

获取网页组件的JSX代码；

获取所述JSX代码中HTML标签；

将所述JSX代码转换至基于HTML协议的协议代码，将待用CSS选择器通过与所述协议代码关联的指定标签引入或写入；

判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；

若是，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。

2.如权利要求1所述的生成方法，其特征在于，判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签，具体包括：

获取所述HTML标签的规则内容；

判断是否有相同规则内容的待用CSS选择器；

若是，判定所述获取的HTML标签中具有与待用CSS选择器匹配的HTML标签。

3.如权利要求1所述的生成方法，其特征在于，

将待用CSS选择器通过与所述协议代码关联的指定标签引入或写入，包括：

将待用CSS选择器通过所述协议代码的Link标签引入或Style标签写入。

4.如权利要求3所述的生成方法，其特征在于，在生成网页组件之后，所述生成方法还包括：

删除所述协议代码的Link标签引入或Style标签写入。

5.如权利要求1所述的生成方法，其特征在于，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，具体包括下述至少一种：

在所述待用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属性；

在所述待用CSS选择器为Enable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在所述待用CSS选择器为Disable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在所述待用CSS选择器为First Child伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签中第一个HTML标签的Style属性；

在所述待用CSS选择器为Last Child伪类选择器时，将所述待用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标签中视图层的更新数据，将所述更新数据回写至所述双向HTML标签的数据层。

8.一种网页组件的生成装置，其特征在于，包括：

代码获取模块，获取网页组件的JSX代码；

标签获取模块，获取所述JSX代码中HTML标签；

择器写入模块，将所述JSX代码转换至基于HTML协议的协议代码，将待用CSS选择器通过与所述协议代码关联的指定标签引入或写入；

匹配判断模块，判断所述获取的HTML标签中是否具有与待用CSS选择器匹配的HTML标签；

属性调整模块，若所述获取的HTML标签中具有与待用CSS选择器匹配的HTML标签，根据所述匹配的待用CSS选择器的样式内容调整所对应的HTML标签的Style属性，得到网页组件。

9.如权利要求8所述的生成装置，其特征在于，匹配判断模块具体用于：

获取所述HTML标签的规则内容；

判断是否有相同规则内容的待用CSS选择器；

若是，判定所述获取的HTML标签中具有与待用CSS选择器匹配的HTML标签。

10.如权利要求8所述的生成装置，其特征在于，所述选择器写入模块具体用于：

将待用CSS选择器通过所述协议代码的Link标签引入或Style标签写入。

11.如权利要求10所述的生成装置，其特征在于，所述生成装置还包括写入删除模块，具体用于：

删除所述协议代码的Link标签引入或Style标签写入。

12.如权利要求8所述的生成装置，其特征在于，所述属性调整模块，至少用于下述一种：

在所述待用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属性；

在所述待用CSS选择器为Enable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在所述待用CSS选择器为Disable伪类选择器时，对所述待用CSS选择器做开启和禁用事件监听，在发生开启事件时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签的Style属性；在发生禁用事件时，将所述待用CSS选择器的样式内容从所对应的HTML标签的Style属性中移出；

在所述待用CSS选择器为First Child伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签中第一个HTML标签的Style属性；

在所述待用CSS选择器为Last Child伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签中最后一个HTML标签的Style属性；

在所述待用CSS选择器为Before伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签之前一个位置；

在所述待用CSS选择器为After伪类选择器时，将所述待用CSS选择器的样式内容写入至所对应的HTML标签之后一个位置。

13.如权利要求8所述的生成装置，其特征在于，所述生成装置还包括动态标签调整模块，具体用于：

对所述HTML标签中未与待用CSS选择器匹配的HTML标签做标记；

对未与所述HTML标签做匹配的待用CSS选择器做标记；

运行所述网页组件，生成结果HTML代码；

获取所述结果HTML代码中被标记过的HTML标签；

获取与被标记过的HTML标签相匹配的、被标记过的CSS选择器；

根据所述匹配的、被标记过的CSS选择器的样式内容调整所对应的、被标记的HTML标签的Style属性，更新所述网页组件。

14.如权利要求8所述的生成装置，其特征在于，所述生成装置还包括双向改进模块，具体用于：

判断HTML标签中是否有双向HTML标签；

若是，对双向HTML标签做预设输入事件监听；

判断所述双向HTML标签所对应的视图层是否发生预设输入事件；

若是，获取所述双向HTML标签中视图层的更新数据，将所述更新数据回写至所述双向HTML标签的数据层。