CN106293669B

CN106293669B - Webpage component generation method and device

Info

Publication number: CN106293669B
Application number: CN201510296308.XA
Authority: CN
Inventors: 郝立鑫
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2015-06-02
Filing date: 2015-06-02
Publication date: 2019-12-24
Anticipated expiration: 2035-06-02
Also published as: CN106293669A

Abstract

The embodiment of the application discloses a method for generating a webpage component and a generating device applying the method, which are convenient for efficiently generating the webpage component. The generation method comprises the following steps: acquiring a JSX code of a webpage component; acquiring an HTML tag in a JSX code; judging whether the acquired HTML tags have HTML tags matched with the to-be-used CSS selector or not; if so, adjusting the Style attribute of the corresponding HTML label according to the matched Style content of the to-be-used CSS selector to obtain the webpage component. According to the technical scheme provided by the embodiment of the application, in the process of generating the webpage component, the CSS selector is written into the Style attribute of the corresponding HTML label, so that the generated webpage component can automatically have the CSS selector part, the CSS selector can automatically realize the design requirements of a developer on the webpage component, the page layout, the character typesetting and the like of the webpage component, and the generation efficiency of the webpage component is improved.

Description

Webpage component generation method and device

Technical Field

The present application relates to the field of web page development technologies, and in particular, to a method and an apparatus for generating a web page component.

Background

The web page component is honored as the future of web page development, and because the two problems that the rapid development of the web page expression layer is difficult and the complex interactive interface is difficult to realize are solved, developers can develop the functional interface which can be recycled on the website, and the industry is more and more paid attention.

In the prior art, a method for generating a web page component by compiling includes the following steps: firstly, code content of HTML is directly written through grammar of JS, so that the HTML code and the JS code can coexist in a compatible JSX file; and finally, performing compiling conversion on the compatible JSX file, and converting the expanded HTML tag in the compatible JSX file into a common JS object so as to obtain the required webpage component.

However, in implementing the present application, there are at least the following problems in the above prior art:

the existing webpage component lacks a CSS selector part, and due to the lack of the code part, when the webpage component needs to be adjusted in page layout, text typesetting and the like, code content of HTML can only be rewritten by using grammar of JS, so that the encoding process is time-consuming and labor-consuming, and the generation efficiency of the webpage component is low.

Disclosure of Invention

The embodiment of the application aims to provide a method and a device for generating a webpage component, which can efficiently generate the webpage component.

In order to solve the foregoing technical problem, an embodiment of the present application provides a method for generating a web page component, including:

acquiring a JSX code of a webpage component;

acquiring an HTML tag in the JSX code;

judging whether the acquired HTML tags have HTML tags matched with the to-be-used CSS selector or not;

if so, adjusting the Style attribute of the corresponding HTML label according to the matched Style content of the to-be-used CSS selector to obtain the webpage component.

In order to solve the foregoing technical problem, an embodiment of the present application provides an apparatus for generating a web page component, including:

the code acquisition module is used for acquiring JSX codes of the webpage components;

the tag acquisition module is used for acquiring HTML tags in JSX codes;

the matching judgment module is used for judging whether the acquired HTML tags have HTML tags matched with the to-be-used CSS selector or not;

and if so, adjusting the Style attribute of the corresponding HTML label according to the matched Style content of the to-be-used CSS selector to obtain the webpage component.

According to the technical scheme provided by the embodiment of the application, the CSS selector is directly written into the Style attribute of the corresponding HTML tag in the process of generating the webpage component, so that the generated webpage component can automatically have the CSS selector part, the design requirements of a developer on the page layout, the character typesetting and the like of the webpage component are automatically met, and the generation efficiency of the webpage component is improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.

Fig. 1 is a process of a method for generating a web page component in an embodiment of the present application.

Fig. 2 is a process of adjusting a dynamic HTML tag in a method for generating a web page component according to an embodiment of the present application.

Fig. 3 is a process of performing bidirectional improvement on an HTML tag in a method for generating a web page component in an embodiment of the present application.

Fig. 4 is a schematic structural diagram of a device for generating a web page component in an embodiment of the present application.

Detailed Description

The embodiment of the application provides a method and a device for generating a webpage component.

In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. Other embodiments, which can be derived by one of ordinary skill in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

Fig. 1 is a process of a method for generating a web page component in one embodiment of the present application, and an execution subject of the method may be a browser running the web page component.

In an embodiment of the present application, the foregoing generation method includes the following steps.

And S11, acquiring the JSX code of the webpage component.

In the embodiment of the application, the programmer can write the code content of the HTML through the grammar of the JS, and the code editor can generate the written code content into the JSX file. The JSX file thus generated may include the HTML code and the JS code.

In this way, the JSX file generated as above can be obtained.

And S12, acquiring an HTML tag in the JSX code.

In the embodiment of the application, the JSX code is analyzed through a JSX analyzer to obtain an HTML tree, and therefore an HTML tag is obtained.

S13, judging whether the acquired HTML tags have HTML tags matched with the to-be-used CSS selector, if so, executing step S14, otherwise, executing step S15.

In an embodiment of the present application, the foregoing generation method further includes the following steps between steps S12 and S13:

firstly, converting JSX codes into protocol codes based on an HTML protocol;

then, the inactive CSS selector is written in by the Link tag lead-in or Style tag of the protocol code.

Through the steps, the original JSX code based on the JS specification is operated on the HTML protocol, so that the protocol code conforming to the protocol is obtained, and the Link tag or the Style tag of the protocol code is used for gathering the to-be-used CSS selector and the JSX code together, so that the subsequent step S13 is conveniently executed.

Of course, in other embodiments of the present application, the JSX code and the to-be-used CSS selector may also be summarized in other manners, which is not described herein again.

In the process of executing step S13, it is determined whether there is a matched inactive CSS selector for each HTML tag, if there is at least one HTML tag with a matched inactive CSS selector, step S14 is executed, and if there is no matched inactive CSS selector for any HTML tag, step S15 is executed.

In the embodiment of the application, whether the HTML tag has a matched standby CSS selector is judged through the following steps.

Firstly, acquiring the rule content of the HTML label;

further, judging whether the standby CSS selectors with the same rule content exist or not;

if so, it is determined that there is an HTML tag with a matching inactive CSS selector.

Taking an HTML tag < dialog > defining a dialog box or window as an example, the rule content of the tag is dialog, whether the rule content is also dialog is judged, if so, the CSS selector is also used for the dialog box or window, and the two can be matched.

S14, adjusting the Style attribute of the corresponding HTML label according to the matched Style content of the to-be-used CSS selector to obtain the webpage component.

In the embodiment of the application, when the to-be-used CSS selector is a non-pseudo class selector, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML tag.

The non-dummy class selector may be a class selector, a tag selector, or an ID selector, which is not described herein.

When the to-be-used CSS selector is a pseudo class selector, the Style attribute of the HTML tag is adjusted differently according to the specific type of Style content of the to-be-used CSS selector, which is specifically as follows:

when the to-be-used CSS selector is the Hover pseudo class selector, carrying out in-in and out-of event monitoring on the CSS selector, and when the in-in event occurs, writing the Style content of the to-be-used CSS selector into the Style attribute of the corresponding HTML label; when a removal event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is an Active pseudo-class selector, pressing and bouncing event monitoring is carried out on the CSS selector, and when a pressing event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a bounce event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Focus pseudo-class selector, focusing and defocusing event monitoring is carried out on the CSS selector, and when a focusing event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when the out-of-focus event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

skipping the process of writing the style content of the to-be-used CSS selector into the corresponding HTML label when the to-be-used CSS selector is the Link pseudo class selector;

when the to-be-used CSS selector is the Target pseudo-class selector, judging whether the location.Hash is equal to the attribute of the element HREF, if so, writing the Style content of the to-be-used CSS selector into the Style attribute of the corresponding HTML label;

when the to-be-used CSS selector is an Enable pseudo class selector, opening and disabling event monitoring is carried out on the CSS selector, and when an opening event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a forbidden event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Disable pseudo class selector, opening and disabling event monitoring is carried out on the CSS selector, and when an opening event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a forbidden event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a First Child pseudo class selector, writing Style content of the to-be-used CSS selector into a Style attribute of a First HTML label in corresponding HTML labels;

when the to-be-used CSS selector is a Last Child pseudo class selector, writing the Style content of the to-be-used CSS selector into the Style attribute of the Last HTML tag in the corresponding HTML tags;

when the to-be-used CSS selector is a Beform pseudo class selector, writing the style content of the to-be-used CSS selector into a position Before the corresponding HTML label;

and when the to-be-used CSS selector is the After pseudo class selector, writing the style content of the to-be-used CSS selector to a position behind the corresponding HTML label.

Since the Style attribute provides a common way to change the Style of HTML, it is the preferred way to change the Style of HTML elements, so that the CSS selector is merged with the JSX code when the Style attribute of the corresponding HTML tag is adjusted.

After the component source code with the HTML code, the JS code and the CSS selector is obtained, the component source code is compiled, and therefore the webpage component which can run on a browser platform and accords with the Web Components specification currently in draft is obtained.

The CSS selector is written into the corresponding HTML tag, so that the produced webpage component is provided with the CSS selector part, the page layout and the character typesetting of the webpage component are quickly adjusted by pre-adjusting the CSS selector part, the design requirements of developers are automatically met by the generated webpage component, and the generation efficiency of the webpage component is improved.

And S15, returning the generation failure of the developer webpage component.

After the developer explicitly fails the generation, it can be checked whether the dormant HTML code, the dormant JS code, and the dormant CSS selector are all correct.

In the embodiment of the present application, after step S14, the foregoing generation method may further include the following steps.

Link tag introduction or Style tag writing of the delete protocol code.

Since the JSX code and the CSS selector are merged in the pre-compiling process, and the static resource is separated from any external CSS selector, the whole CSS selector and the JSX part are merged into a whole static resource which exists in a single file and can be independently imported and referenced.

Of course, the foregoing step of deleting the Link tag introduction or the Style tag writing may be located at any position after step S14, and it is only necessary to ensure that the adjustment of the Style attribute of the corresponding HTML tag is completed before the Link tag introduction or the Style tag writing of the protocol code is deleted.

In the embodiment of the present application, in the process of the web page component obtained through the foregoing steps S11 to S16, the adjustment of the Style attribute of the HTML tag needs to be based on that the HTML tag is static, however, since the JSX code is based on the JS specification, a JS variable may be embedded therein, resulting in that HTML is not static, and as the component runs, the content of the tag changes, which makes it difficult to match the target CSS selector immediately.

Fig. 2 is a process of adjusting a dynamic HTML tag in a method for generating a web page component in the embodiment of the present application, which is described in detail below.

And S21, marking the HTML tags which are not matched with the to-be-used CSS selector in the HTML tags.

And S22, marking the to-be-used CSS selector which is not matched with the HTML label.

And S23, operating the webpage component and generating a result HTML code.

After the web page component is run, the HTML tags in the resulting HTML code are all static for subsequent matching with the CSS selector being tagged.

And S24, acquiring the marked HTML tags in the HTML codes of the results.

S25, obtaining the marked CSS selector matched with the marked HTML label.

In this process, the step S13 may be referred to in the process of obtaining the matched CSS selector according to the style content of the HTML tag, which is not described herein again.

S26, according to the matched and marked Style content of the CSS selector, the Style attribute of the corresponding marked HTML label is adjusted, and the webpage component is updated.

In this process, the step S14 is referred to for adjusting the Style attribute of the marked HTML tag, which is not described herein again.

After the updated component source code is compiled, the webpage components with more complete functions and with the Style attributes of the HTML tags adjusted are obtained.

Fig. 3 is a process of performing bidirectional improvement on an HTML tag in a method for generating a web page component in an embodiment of the present application, and includes the following steps.

S31, judging whether the HTML label has a two-way HTML label, if not, executing step S32, and if so, executing step S33.

The bidirectional HTML tag is used to represent an HTML tag for data interaction in the view layer and the data layer, such as an Input tag, a Textarea tag, and the like.

S32, returning to the developer to improve the exception bidirectionally.

And S33, performing preset input event monitoring on the two-way HTML tag.

In the embodiment of the application, the viewing layer corresponding to the two-way HTML tag is monitored,

the preset input event represents an event caused by operation of an operator on the view layer, and different preset input events exist according to different types of bidirectional HTML tags.

Taking the Input tag as an example, performing onInput event monitoring on the Input tag, and when an onInput event occurs, indicating that the view layer corresponding to the bidirectional HTML tag is operated.

And S34, judging whether the view layer corresponding to the two-way HTML label has a preset input event, if so, executing a step S35, otherwise, returning to the step S33.

S35, obtaining the updating data of the view layer in the two-way HTML label, and writing the updating data back to the data layer of the two-way HTML label.

By performing bidirectional improvement on the bidirectional HTML tag, when an operator operates the view layer of the bidirectional HTML tag in the use process of the webpage component, the data layer is updated due to data updating caused by the operation.

Still taking the Input label as an example, after the operator inputs the characters from the view layer of the label, the data layer can also obtain the characters Input by the operator, so that the webpage component can analyze and operate the Input characters to clarify the operation purpose of the user.

Fig. 4 is a schematic structural diagram of a device for generating a web page component in an embodiment of the present application, where the device is based on the above generation method, and thus specific details of the device may refer to the above generation method, which is not described herein again.

The aforementioned generation device includes:

the code acquisition module 11 is used for acquiring JSX codes of the webpage components;

the tag obtaining module 12 obtains an HTML tag in the JSX code;

the matching judgment module 13 is used for judging whether the acquired HTML tags have HTML tags matched with the to-be-used CSS selector;

and if the acquired HTML tags have HTML tags matched with the to-be-used CSS selector, the attribute adjusting module 14 adjusts Style attributes of the corresponding HTML tags according to the Style content of the matched to-be-used CSS selector to obtain the webpage component.

In this embodiment of the application, the matching judgment module 13 is specifically configured to:

acquiring the rule content of the HTML label;

judging whether a standby CSS selector with the same rule content exists or not;

if yes, the HTML tags matched with the standby CSS selector are determined to be in the acquired HTML tags.

In an embodiment of the present application, the generating apparatus further includes a selector write module, specifically configured to:

converting the JSX code into a protocol code based on an HTML protocol;

the to-be-used CSS selector is written by a Link tag lead-in or Style tag of the protocol code.

In this embodiment, the generating apparatus further includes a write deletion module, which is specifically configured to:

link tag introduction or Style tag writing of the delete protocol code.

In this embodiment, the attribute adjusting module 14 is at least configured to:

when the to-be-used CSS selector is a non-pseudo class selector, writing the Style content of the to-be-used CSS selector into the Style attribute of the corresponding HTML label;

In this embodiment of the application, the generating apparatus further includes a dynamic tag adjustment module, specifically configured to:

marking HTML tags which are not matched with the to-be-used CSS selector in the HTML tags;

marking the standby CSS selector which is not matched with the HTML label;

operating the webpage component to generate a result HTML code;

acquiring a marked HTML label in a result HTML code;

acquiring a marked CSS selector matched with the marked HTML label;

and adjusting the Style attribute of the corresponding marked HTML label according to the Style content of the matched marked CSS selector, and updating the webpage component.

In an embodiment of the present application, the generating apparatus further includes a bidirectional improving module, specifically configured to:

judging whether the HTML tag has a bidirectional HTML tag or not;

if yes, performing preset input event monitoring on the bidirectional HTML tag;

judging whether a preset input event occurs in a view layer corresponding to the bidirectional HTML label;

and if so, acquiring the updating data of the view layer in the bidirectional HTML label, and writing the updating data back to the data layer of the bidirectional HTML label.

According to the technical scheme provided by the embodiment of the application, in the process of generating the webpage component, the CSS selector is written into the Style attribute of the corresponding HTML label, so that the generated webpage component can automatically have the CSS selector part, the CSS selector can automatically realize the design requirements of a developer on the webpage component, the page layout, the character typesetting and the like of the webpage component, and the generation efficiency of the webpage component is improved.

In the 90 s of the 20 th century, improvements in a technology could clearly distinguish between improvements in hardware (e.g., improvements in circuit structures such as diodes, transistors, switches, etc.) and improvements in software (improvements in process flow). However, as technology advances, many of today's process flow improvements have been seen as direct improvements in hardware circuit architecture. Designers almost always obtain the corresponding hardware circuit structure by programming an improved method flow into the hardware circuit. Thus, it cannot be said that an improvement in the process flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (PLD), such as a Field Programmable Gate Array (FPGA), is an integrated circuit whose Logic functions are determined by programming the Device by a user. A digital system is "integrated" on a PLD by the designer's own programming without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Furthermore, nowadays, instead of manually making an integrated Circuit chip, such Programming is often implemented by "logic compiler" software, which is similar to a software compiler used in program development and writing, but the original code before compiling is also written by a specific Programming Language, which is called Hardware Description Language (HDL), and HDL is not only one but many, such as abel (advanced Boolean Expression Language), ahdl (alternate Language Description Language), traffic, pl (core unified Programming Language), HDCal, JHDL (Java Hardware Description Language), langue, Lola, HDL, laspam, hardsradware (Hardware Description Language), vhjhd (Hardware Description Language), and vhigh-Language, which are currently used in most common. It will also be apparent to those skilled in the art that hardware circuitry that implements the logical method flows can be readily obtained by merely slightly programming the method flows into an integrated circuit using the hardware description languages described above.

The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, an Application Specific Integrated Circuit (ASIC), a programmable logic controller, and an embedded microcontroller, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic for the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may thus be considered a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions.

For convenience of description, the above devices are described as being divided into various units by function, and are described separately. Of course, the functions of the various elements may be implemented in the same one or more of software and hardware in practicing the present application.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

Memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM), and non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for generating a web page component, comprising:

acquiring a JSX code of a webpage component;

acquiring an HTML tag in the JSX code;

converting the JSX code into a protocol code based on an HTML protocol, and introducing or writing a standby CSS selector into a designated tag associated with the protocol code;

judging whether the acquired HTML tags have HTML tags matched with a to-be-used CSS selector or not;

2. The method according to claim 1, wherein determining whether the obtained HTML tag has an HTML tag matching a to-be-used CSS selector includes:

acquiring the rule content of the HTML label;

if yes, the obtained HTML tags are judged to have HTML tags matched with the to-be-used CSS selector.

3. The generation method of claim 1,

introducing or writing a to-be-used CSS selector through a specified tag associated with the protocol code, including:

and leading in or writing in a Style tag of the protocol code by the to-be-used CSS selector.

4. The generation method of claim 3, wherein after generating the web page component, the generation method further comprises:

deleting the Link tag introduction or the Style tag writing of the protocol code.

5. The generation method of claim 1, wherein the Style property of the corresponding HTML tag is adjusted according to the Style content of the matched inactive CSS selector, and specifically includes at least one of:

when the to-be-used CSS selector is a non-pseudo class selector, writing Style content of the to-be-used CSS selector into a Style attribute of a corresponding HTML label;

when the to-be-used CSS selector is a Hover pseudo class selector, carrying out in-in and out-of event monitoring on the CSS selector, and when a in-out event occurs, writing the Style content of the to-be-used CSS selector into the Style attribute of the corresponding HTML label; when a removal event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is an Active pseudo class selector, pressing and bouncing event monitoring is carried out on the to-be-used CSS selector, and when a pressing event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a bounce event occurs, removing the Style content of the to-be-used CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Focus pseudo class selector, focusing and defocusing event monitoring is carried out on the to-be-used CSS selector, and when a focusing event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a defocusing event occurs, removing the Style content of the standby CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Target pseudo class selector, judging whether the location.Hash is equal to the attribute of an element HREF, if so, writing the Style content of the to-be-used CSS selector into the Style attribute of the corresponding HTML label;

when the to-be-used CSS selector is an Enable pseudo class selector, opening and disabling event monitoring is carried out on the to-be-used CSS selector, and when an opening event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a forbidden event occurs, removing the Style content of the inactive CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Disable pseudo class selector, opening and disabling event monitoring is carried out on the to-be-used CSS selector, and when an opening event occurs, the Style content of the to-be-used CSS selector is written into the Style attribute of the corresponding HTML label; when a forbidden event occurs, removing the Style content of the inactive CSS selector from the Style attribute of the corresponding HTML tag;

when the to-be-used CSS selector is a Beforee pseudo class selector, writing the style content of the to-be-used CSS selector to a position Before the corresponding HTML label;

when the to-be-used CSS selector is the After pseudo class selector, writing the style content of the to-be-used CSS selector to a position behind the corresponding HTML label.

6. The generation method of claim 1, further comprising:

marking a to-be-used CSS selector which is not matched with the HTML tag;

operating the webpage component to generate a result HTML code;

acquiring an HTML label marked in the result HTML code;

acquiring a marked CSS selector matched with the marked HTML label;

7. The generation method of claim 1, wherein after obtaining an HTML tag in the JSX code, the generation method further comprises:

judging whether the HTML tag has a bidirectional HTML tag or not;

if yes, performing preset input event monitoring on the bidirectional HTML tag;

8. An apparatus for generating a web page component, comprising:

the tag acquisition module is used for acquiring HTML tags in the JSX codes;

a selector writing module, which converts the JSX code into a protocol code based on an HTML protocol, and introduces or writes a standby CSS selector into a designated tag associated with the protocol code;

and the attribute adjusting module is used for adjusting the Style attribute of the corresponding HTML tag according to the matched Style content of the to-be-used CSS selector to obtain the webpage component if the acquired HTML tag has the HTML tag matched with the to-be-used CSS selector.

9. The generation apparatus of claim 8, wherein the match determination module is specifically configured to:

acquiring the rule content of the HTML label;

10. The generation apparatus of claim 8, wherein the selector write module is specifically configured to:

11. The generation apparatus according to claim 10, wherein the generation apparatus further includes a write deletion module, specifically configured to:

12. The generation apparatus of claim 8, wherein the attribute adjustment module is to at least one of:

13. The generation apparatus of claim 8, wherein the generation apparatus further comprises a dynamic tag adjustment module, specifically configured to:

marking a to-be-used CSS selector which is not matched with the HTML tag;

operating the webpage component to generate a result HTML code;

acquiring an HTML label marked in the result HTML code;

acquiring a marked CSS selector matched with the marked HTML label;

14. The generation apparatus of claim 8, wherein the generation apparatus further comprises a bidirectional improvement module, specifically configured to:

judging whether the HTML tag has a bidirectional HTML tag or not;

if yes, performing preset input event monitoring on the bidirectional HTML tag;