CN106293669A - A kind of generation method and apparatus of web pages component - Google Patents
A kind of generation method and apparatus of web pages component Download PDFInfo
- Publication number
- CN106293669A CN106293669A CN201510296308.XA CN201510296308A CN106293669A CN 106293669 A CN106293669 A CN 106293669A CN 201510296308 A CN201510296308 A CN 201510296308A CN 106293669 A CN106293669 A CN 106293669A
- Authority
- CN
- China
- Prior art keywords
- html tag
- selector
- stand
- css
- style
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the present application discloses generation method and the generating means of application the method for a kind of web pages component, it is simple to efficiently produce web pages component.This generation method includes: obtain the JSX code of web pages component；Obtain html tag in JSX code；Judge whether the html tag obtained has the html tag mated with stand-by CSS selector；If so, according to the Style attribute of the html tag corresponding to the style content adjustment of the stand-by CSS selector of coupling, web pages component is obtained.The technical scheme provided from above the embodiment of the present application, the embodiment of the present application is by during generating web pages component, among the Style attribute of html tag corresponding for CSS selector write, the web pages component generated is made can automatically to possess CSS selector part, CSS selector can be automatically obtained developer to web pages component, it is automatically obtained developer for design requirements such as the page layout of web pages component, text compositions, improves the formation efficiency of web pages component.
Description
Technical field
The application relates to web development technologies field, particularly to generation method and the dress of a kind of web pages component
Put.
Background technology
Web pages component is described as the future of webpage development, the most difficult owing to solving webpage presentation layer
Quickly to develop and to realize this two hang-up of complex interaction interface so that developer can develop can be in website
On the function interface that recycles, paid attention to the most in the industry.
In prior art, a kind of method compiling generation web pages component comprises the steps: first, directly to lead to
Cross the grammer of JS to write the code content of HTML so that HTML code and JS code just can coexist
At a compatible JSX file；Finally, the JSX file of this compatibility is done compiling conversion, by this compatibility
JSX file in the html tag of extension be converted to common JS object, thus obtain required net
Page assembly.
But, during realizing the application, in above-mentioned prior art, at least there are the following problems:
Existing web pages component lacks CSS selector part, owing to having lacked this code section, is needing adjustment
When the page layout of web pages component, text composition etc. are to web pages component, can only be by with the grammer of JS again
The code content of write HTML, this cataloged procedure is wasted time and energy, and causes web pages component formation efficiency low.
Summary of the invention
The purpose of the embodiment of the present application is to provide the generation method and device of a kind of web pages component, it is possible to efficiently give birth to
Become web pages component.
For solving above-mentioned technical problem, the embodiment of the present application provides a kind of generation method of web pages component, its bag
Include:
Obtain the JSX code of web pages component；
Obtain html tag in described JSX code；
Judge whether the html tag obtained has the html tag mated with stand-by CSS selector；
If so, according to the html tag corresponding to the style content adjustment of the stand-by CSS selector of coupling
Style attribute, obtain web pages component.
For solving above-mentioned technical problem, the embodiment of the present application provides the generating means of a kind of web pages component, its bag
Include:
Code obtaining module, obtains the JSX code of web pages component；
Label acquisition module, obtains html tag in JSX code；
Matching judgment module, it is judged that whether have in the html tag of acquisition and stand-by CSS selector
The html tag joined；
Attribute tuning module, if so, adjusts corresponding according to the style content of the stand-by CSS selector of coupling
The Style attribute of html tag, obtain web pages component.
The technical scheme provided from above the embodiment of the present application, the embodiment of the present application is by generating webpage
During assembly, among the Style attribute of the html tag of correspondence that CSS selector is write direct,
Make the web pages component generated can automatically possess CSS selector part, be automatically obtained developer for webpage
The design requirement such as the page layout of assembly, text composition, improves the formation efficiency of web pages component.
Accompanying drawing explanation
In order to be illustrated more clearly that the embodiment of the present application or technical scheme of the prior art, below will be to enforcement
In example or description of the prior art, the required accompanying drawing used is briefly described, it should be apparent that, describe below
In accompanying drawing be only some embodiments described in the application, for those of ordinary skill in the art,
On the premise of not paying creative work, it is also possible to obtain other accompanying drawing according to these accompanying drawings.
Fig. 1 is the process of the generation method of web pages component in the embodiment of the present application.
Fig. 2 is the interior mistake adjusting dynamic HTML label of generation method of web pages component in the embodiment of the present application
Journey.
Fig. 3 be web pages component in the embodiment of the present application generation method in html tag is carried out two-way changing
The process entered.
Fig. 4 is the structural representation of the generating means of web pages component in the embodiment of the present application.
Detailed description of the invention
The embodiment of the present application provides the generation method and device of a kind of web pages component.
For the technical scheme making those skilled in the art be more fully understood that in the application, below in conjunction with this
Accompanying drawing in application embodiment, is clearly and completely described the technical scheme in the embodiment of the present application,
Obviously, described embodiment is only some embodiments of the present application rather than whole embodiments.Base
Embodiment in the application, those of ordinary skill in the art are obtained under not making creative work premise
Other embodiments obtained, all should belong to the scope of the application protection.
Fig. 1 is the process of the generation method of web pages component, the execution master of the method in one embodiment of the application
Body is probably the browser running this web pages component.
In the embodiment of the present application, aforementioned generation method comprises the steps.
S11, the JSX code of acquisition web pages component.
In the embodiment of the present application, programmer can write the code content of HTML, generation by the grammer of JS
The code content finished writing can be generated as JSX file by code editing machine.In the JSX file so generated, i.e.
HTML code and JS code can be included.
As such, it is possible to obtain the JSX file as above generated.
Html tag in S12, acquisition JSX code.
In the embodiment of the present application, by JSX resolver, gained JSX code is resolved, obtain wherein
HTML tree, thus obtain wherein html tag.
S13, judge obtain html tag in whether there is the HTML mated with stand-by CSS selector
Label, if so, performs step S14, if it is not, perform step S15.
In the embodiment of the present application, aforementioned generation method also includes the following step between step S12 and S13
Rapid:
First, by the conversion of JSX code to protocol code based on HTML agreement；
Then, stand-by CSS selector is introduced by the Link label of protocol code or Style label writes.
By above-mentioned steps, original JSX code based on JS specification is run in HTML agreement, from
And obtain meeting the protocol code of this agreement, and by Link label or the Style label of this protocol code, will
Together with stand-by CSS selector is summarised in JSX code, it is simple to perform subsequent step S13.
Certainly, in other embodiments of the application, also can adopt in other ways by JSX code and stand-by CSS
Selector collects, and does not repeats at this.
During performing step S13, for each html tag, it may be judged whether have match to treat
With CSS selector, if there being at least one html tag to have the stand-by CSS selector of coupling, then perform
Step S14, if the stand-by CSS selector that the most do not mates of html tag, then perform step S15.
In the embodiment of the present application, judge whether html tag has the stand-by of coupling as follows
CSS selector.
First, the Rule content of this html tag is obtained；
And then, it may be judged whether there is the stand-by CSS selector of same rule content；
If so, it is determined that the presence of the html tag of the stand-by CSS selector with coupling.
As a example by the html tag<dialog>of a definition dialog box or window, the Rule content of this label
It is then dialog, it may be judged whether regular content is similarly the stand-by CSS selector of dialog, if having, then
Showing that this CSS selector is for dialog box or window equally, the two can realize coupling.
S14, style content according to the stand-by CSS selector of coupling adjust corresponding to html tag
Style attribute, obtains web pages component.
In the embodiment of the present application, when stand-by CSS selector is non-pseudo-class selector, stand-by CSS is selected
Select the style content write Style attribute to corresponding html tag of device.
Aforementioned non-pseudo-class selector can be class selector, label selector or ID selector etc., at this
Do not repeat.
When stand-by CSS selector is pseudo-class selector, according to the style content of stand-by CSS selector
Concrete kind, the adjustment for the Style attribute of html tag is the most different, specific as follows:
When stand-by CSS selector is Hover puppet class selector, CSS selector is movable into and out
Action listener, when there is immigration event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is removal event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Active puppet class selector, CSS selector is pressed and upsprings
Action listener, when pressing event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When upspringing event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Focus puppet class selector, CSS selector is done focusing with out of focus
Action listener, when there is focus event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is event out of focus, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Link puppet class selector, skip the sample to this stand-by CSS selector
The process of the html tag that the write of formula content is the most corresponding；
When stand-by CSS selector is Target puppet class selector, it is judged that Location.Hash whether with unit
Element HREF attribute is equal, if so, writes the style content of stand-by CSS selector to corresponding HTML
The Style attribute of label；
When stand-by CSS selector is Enable puppet class selector, CSS selector is opened and disables
Action listener, when there is unlatching event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is disabling event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Disable puppet class selector, CSS selector is opened and disables
Action listener, when there is unlatching event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is disabling event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is First Child puppet class selector, by the sample of stand-by CSS selector
The write of formula content is to the Style attribute of first html tag in corresponding html tag；
When stand-by CSS selector is Last Child puppet class selector, by the pattern of stand-by CSS selector
Content write is to the Style attribute of last html tag in corresponding html tag；
When stand-by CSS selector is Before puppet class selector, by the pattern of stand-by CSS selector
Hold the previous position of the most corresponding html tag of write；
When stand-by CSS selector is After puppet class selector, by the style content of stand-by CSS selector
The later position of the html tag that write is the most corresponding.
Owing to Style attribute provides a kind of universal method changing HTML style, it it is first-selected change
The method of HTML element pattern, when adjusting the Style attribute of corresponding html tag so that CSS
Selector merges with JSX code.
After obtaining the component source code having HTML code, JS code and CSS selector concurrently, to this group
Part source code is compiled, thus obtain can running in browser platform, meet current just in draft
The web pages component of Web Components specification.
By the html tag by CSS selector write to correspondence so that the web pages component of production possesses
CSS selector part, quickly adjusts the page cloth of web pages component by pre-adjusting CSS selector part
Office, text composition so that the web pages component generated is automatically obtained the design requirement of developer, improve webpage
The formation efficiency of assembly.
S15, return developer's web pages component failed regeneration.
After the clear and definite failed regeneration of developer, verifiable stand-by HTML code, stand-by JS code and stand-by
CSS selector is the most correct.
In the embodiment of the present application, after step s 14, aforementioned generation method can also comprise the steps.
The Link label deleting protocol code introduces or the write of Style label.
Owing to JSX code and CSS selector are to merge during precompile, and this static state money
Source is separated with the CSS selector of any outside so that whole CSS selector and JSX part are merged into
One overall static resource, this static resource exists with a single document form, it is possible to by independent
Importing is quoted.
Certainly, aforementioned deletion Link label introduces or the step of Style label write may be located at step S14
Optional position afterwards, it is only necessary to ensure that the introducing of Link label or Style label deleting protocol code write it
Before, it is complete the adjustment of the Style attribute to corresponding html tag.
In the embodiment of the present application, during the web pages component obtained by abovementioned steps S11 to S16,
Adjustment for the Style attribute of html tag need to be set up on the basis of this html tag is static state,
Yet with JSX code based on JS specification, wherein can be embedded with JS variable, cause there is HTML
And non-static, it also can change therewith along with the operation of assembly, the content of this label, causes being difficult to immediately
It is done with stand-by CSS selector and mates.
Fig. 2 is the interior mistake adjusting dynamic HTML label of generation method of web pages component in the embodiment of the present application
Journey, specific as follows.
S21, the html tag not mated with stand-by CSS selector in html tag is made marks.
S22, make marks to not doing the stand-by CSS selector mated with html tag.
S23, operation web pages component, generate result HTML code.
After this web pages component is run, in obtained result HTML code, html tag is quiet
State, in order to follow-up and labeled CSS selector does and mates.
Html tag marked in S24, acquisition result HTML code.
That S25, acquisition match with marked html tag, marked CSS selector.
During this, the process obtaining the CSS selector mated according to the style content of html tag can
With reference to abovementioned steps S13, do not repeat at this.
S26, according to style content coupling, marked CSS selector adjust corresponding to, quilt
The Style attribute of the html tag of labelling, updates web pages component.
During this, the adjustment for the Style attribute of labeled html tag refers to abovementioned steps
S14, does not repeats at this.
After being compiled the component source code after updating, then the Style attribute obtaining html tag is equal
The web pages component that controlled, function is more perfect.
Fig. 3 be web pages component in the embodiment of the present application generation method in html tag is carried out two-way changing
The process entered, comprises the steps.
S31, judge whether html tag has two-way html tag, if it is not, perform step S32,
If so, step S33 is performed.
Aforementioned two-way html tag is the HTML of data interaction in view layer and data Layer for representing
Label, such as Input label, Textarea label etc..
S32, the return two-way improvement of developer are extremely.
S33, two-way html tag is done default incoming event monitor.
In the embodiment of the present application, monitor the view layer corresponding to two-way html tag,
This default incoming event represents that operator operates caused event to view layer, according to inhomogeneity
The two-way html tag of type, has different default incoming events.
As a example by Input label, this Input label is done onInput action listener, onInput is occurring
During event, then show that this view layer corresponding to two-way html tag was operated.
S34, judge the view layer corresponding to two-way html tag whether occur preset incoming event, if so,
Perform step S35, if it is not, return step S33.
S35, obtain the more new data of view layer in two-way html tag, write back data will be updated to the most two-way
The data Layer of html tag.
By two-way html tag is carried out two-way improvement so that web pages component in use, is grasped
When the view layer of two-way html tag is operated by author, the data that this operation is brought update and make
Data Layer also updates.
Still as a example by Input label, operator after the view layer typing word of this label, data Layer is also
The word of operator institute typing can be obtained so that web pages component can resolve the word of operation typing, with clearly
The operation purpose of user.
Fig. 4 is the structural representation of the generating means of web pages component in the embodiment of the present application, and this generating means is
Based on generating method above, therefore the detail of this device can refer to above generation method, the most no longer gives
Repeat.
Aforementioned generating means, including:
Code obtaining module 11, obtains the JSX code of web pages component；
Label acquisition module 12, obtains html tag in JSX code；
Matching judgment module 13, it is judged that whether have in the html tag of acquisition and stand-by CSS selector
The html tag of coupling；
Attribute tuning module 14, mates with stand-by CSS selector if having in the html tag obtained
Html tag, according to the HTML mark corresponding to the style content adjustment of the stand-by CSS selector of coupling
The Style attribute signed, obtains web pages component.
In the embodiment of the present application, matching judgment module 13 specifically for:
Obtain the Rule content of html tag；
Determine whether the stand-by CSS selector of same rule content；
If so, judge that the html tag obtained has the HTML mark mated with stand-by CSS selector
Sign.
In the embodiment of the present application, generating means also includes selector writing module, specifically for:
By the conversion of JSX code to protocol code based on HTML agreement；
Stand-by CSS selector is introduced by the Link label of protocol code or Style label writes.
In the embodiment of the present application, generating means also includes writing removing module, specifically for:
The Link label deleting protocol code introduces or the write of Style label.
In the embodiment of the present application, Attribute tuning module 14, at least for following one:
When stand-by CSS selector is non-pseudo-class selector, the style content of stand-by CSS selector is write
Enter the Style attribute to corresponding html tag；
When stand-by CSS selector is Hover puppet class selector, CSS selector is movable into and out
Action listener, when there is immigration event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is removal event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Active puppet class selector, CSS selector is pressed and upsprings
Action listener, when pressing event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When upspringing event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Focus puppet class selector, CSS selector is done focusing with out of focus
Action listener, when there is focus event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is event out of focus, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Link puppet class selector, skip the sample to this stand-by CSS selector
The process of the html tag that the write of formula content is the most corresponding；
When stand-by CSS selector is Target puppet class selector, it is judged that Location.Hash whether with unit
Element HREF attribute is equal, if so, writes the style content of stand-by CSS selector to corresponding HTML
The Style attribute of label；
When stand-by CSS selector is Enable puppet class selector, CSS selector is opened and disables
Action listener, when there is unlatching event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is disabling event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is Disable puppet class selector, CSS selector is opened and disables
Action listener, when there is unlatching event, writes the style content of stand-by CSS selector to corresponding
The Style attribute of html tag；When there is disabling event, by the style content of stand-by CSS selector
Remove from the Style attribute of corresponding html tag；
When stand-by CSS selector is First Child puppet class selector, by the sample of stand-by CSS selector
The write of formula content is to the Style attribute of first html tag in corresponding html tag；
When stand-by CSS selector is Last Child puppet class selector, by the pattern of stand-by CSS selector
Content write is to the Style attribute of last html tag in corresponding html tag；
When stand-by CSS selector is Before puppet class selector, by the pattern of stand-by CSS selector
Hold the previous position of the most corresponding html tag of write；
When stand-by CSS selector is After puppet class selector, by the style content of stand-by CSS selector
The later position of the html tag that write is the most corresponding.
In the embodiment of the present application, generating means also includes dynamic labels adjusting module, specifically for:
The html tag not mated with stand-by CSS selector in html tag is made marks；
Make marks to not doing the stand-by CSS selector mated with html tag；
Run web pages component, generate result HTML code；
Obtain html tag marked in result HTML code；
Obtain that match, marked CSS selector with marked html tag；
Corresponding to style content adjustment according to coupling, marked CSS selector, labeled
The Style attribute of html tag, updates web pages component.
In the embodiment of the present application, generating means also includes two-way improvement module, specifically for:
Judge whether html tag has two-way html tag；
If so, two-way html tag does default incoming event monitor；
Judge whether the view layer corresponding to two-way html tag occurs to preset incoming event；
If so, obtain the more new data of view layer in two-way html tag, write back data will be updated to double
To the data Layer of html tag.
The technical scheme provided from above the embodiment of the present application, the embodiment of the present application is by generating webpage
During assembly, among the Style attribute of html tag corresponding for CSS selector write so that
The web pages component generated can possess CSS selector part automatically, and CSS selector can be automatically obtained exploitation
Person to web pages component, is automatically obtained developer for designs such as the page layout of web pages component, text compositions
Requirement, improves the formation efficiency of web pages component.
In the nineties in 20th century, can clearly distinguish for the improvement of a technology is changing on hardware
Enter the improvement on (such as, the improvement to circuit structures such as diode, transistor, switches) or software (right
Improvement in method flow).But, along with the development of technology, the improvement of current a lot of method flows is
Through directly improving of hardware circuit can be considered as.Designer is nearly all by the method flow that will improve
It is programmed in hardware circuit and obtains corresponding hardware circuit.Therefore, it cannot be said that a method flow
Improvement cannot realize by hardware entities module.Such as, PLD (Programmable
Logic Device, PLD) (such as field programmable gate array (Field Programmable Gate Array,
FPGA)) being exactly such a integrated circuit, device programming is determined by its logic function by user.By setting
Meter personnel program voluntarily a digital display circuit " integrated " on a piece of PLD, without the chip system of asking
Make manufacturer and design and make special IC chip.And, nowadays, replacement manually makes integrated
Circuit chip, this programming the most mostly uses " logic compiler (logic compiler) " software instead and realizes,
Software compiler used when it is write with program development is similar, and the source code before compiling also obtains
Writing with specific programming language, this is referred to as hardware description language (Hardware Description
Language, HDL), and HDL the most not only has one, but have many kinds, such as ABEL (Advanced
Boolean Expression Language)、AHDL(Altera Hardware Description Language)、
Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL
(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL
(Ruby Hardware Description Language) etc., that commonly use most is VHDL
(Very-High-Speed Integrated Circuit Hardware Description Language) with
Verilog.Those skilled in the art also it should also be apparent that, it is only necessary to by method flow by above-mentioned several hardware descriptions
Language is slightly made programming in logic and is programmed in integrated circuit, it is possible to is readily available and realizes this logical method stream
The hardware circuit of journey.
Controller can be implemented in any suitable manner, and such as, controller can take such as microprocessor
Or computer readable program code (the such as software that processor and storage can be performed by this (micro-) processor
Or firmware) computer-readable medium, gate, switch, special IC (Application Specific
Integrated Circuit, ASIC), programmable logic controller (PLC) and the form of embedding microcontroller, controller
Example include but not limited to following microcontroller: ARC 625D, Atmel AT91SAM, Microchip
PIC18F26K20 and Silicone Labs C8051F320, Memory Controller is also implemented as depositing
A part for the control logic of reservoir.It is also known in the art that except with pure computer-readable program
Code means realizes beyond controller, completely can make to control by method step carries out programming in logic
Device is with the shape of gate, switch, special IC, programmable logic controller (PLC) and embedding microcontroller etc.
Formula realizes identical function.The most this controller is considered a kind of hardware component, and wraps in it
Include can also be considered as the structure in hardware component for the device realizing various function.Or it is even, permissible
It is considered as not only can being the software module of implementation method but also can be hardware by the device being used for realizing various function
Structure in parts.
System, device, module or the unit that above-described embodiment illustrates, specifically can be by computer chip or reality
Body realizes, or is realized by the product with certain function.
For convenience of description, it is divided into various unit to be respectively described with function when describing apparatus above.Certainly,
The function of each unit can be realized in same or multiple software and hardwares when implementing the application.
Those skilled in the art are it should be appreciated that embodiments of the invention can be provided as method, system or meter
Calculation machine program product.Therefore, the present invention can use complete hardware embodiment, complete software implementation or knot
The form of the embodiment in terms of conjunction software and hardware.And, the present invention can use and wherein wrap one or more
Computer-usable storage medium containing computer usable program code (include but not limited to disk memory,
CD-ROM, optical memory etc.) form of the upper computer program implemented.
The present invention is with reference to method, equipment (system) and computer program product according to embodiments of the present invention
The flow chart of product and/or block diagram describe.It should be understood that can by computer program instructions flowchart and
/ or block diagram in each flow process and/or flow process in square frame and flow chart and/or block diagram and/
Or the combination of square frame.These computer program instructions can be provided to general purpose computer, special-purpose computer, embedding
The processor of formula datatron or other programmable data processing device is to produce a machine so that by calculating
The instruction that the processor of machine or other programmable data processing device performs produces for realizing at flow chart one
The device of the function specified in individual flow process or multiple flow process and/or one square frame of block diagram or multiple square frame.
These computer program instructions may be alternatively stored in and computer or the process of other programmable datas can be guided to set
In the standby computer-readable memory worked in a specific way so that be stored in this computer-readable memory
Instruction produce and include the manufacture of command device, this command device realizes in one flow process or multiple of flow chart
The function specified in flow process and/or one square frame of block diagram or multiple square frame.
These computer program instructions also can be loaded in computer or other programmable data processing device, makes
Sequence of operations step must be performed to produce computer implemented place on computer or other programmable devices
Reason, thus the instruction performed on computer or other programmable devices provides for realizing flow chart one
The step of the function specified in flow process or multiple flow process and/or one square frame of block diagram or multiple square frame.
In a typical configuration, calculating equipment includes one or more processor (CPU), input/defeated
Outgoing interface, network interface and internal memory.
Internal memory potentially includes the volatile memory in computer-readable medium, random access memory
(RAM) and the form such as Nonvolatile memory, such as read only memory (ROM) or flash memory (flash RAM).
Internal memory is the example of computer-readable medium.
Computer-readable medium includes that removable media permanent and non-permanent, removable and non-can be by appointing
Where method or technology realize information storage.Information can be computer-readable instruction, data structure, program
Module or other data.The example of the storage medium of computer includes, but are not limited to phase transition internal memory
(PRAM), static RAM (SRAM), dynamic random access memory (DRAM), its
The random access memory (RAM) of his type, read only memory (ROM), electrically erasable are read-only
Memorizer (EEPROM), fast flash memory bank or other memory techniques, read-only optical disc read only memory
(CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tape, tape magnetic
Disk storage or other magnetic storage apparatus or any other non-transmission medium, can be used for storage can be calculated
The information that equipment accesses.According to defining herein, computer-readable medium does not include temporary computer-readable matchmaker
Body (transitory media), such as data signal and the carrier wave of modulation.
Also, it should be noted term " includes ", " comprising " or its any other variant are intended to non-row
Comprising, so that include that the process of a series of key element, method, commodity or equipment not only include of his property
Those key elements, but also include other key elements being not expressly set out, or also include for this process,
The key element that method, commodity or equipment are intrinsic.In the case of there is no more restriction, statement " include
One ... " key element that limits, it is not excluded that including the process of described key element, method, commodity or setting
Other identical element is there is also in Bei.
It will be understood by those skilled in the art that embodiments herein can be provided as method, system or computer journey
Sequence product.Therefore, the application can use complete hardware embodiment, complete software implementation or combine software and
The form of the embodiment of hardware aspect.And, the application can use and wherein include calculating one or more
The computer-usable storage medium of machine usable program code (include but not limited to disk memory, CD-ROM,
Optical memory etc.) form of the upper computer program implemented.
The application can be described in the general context of computer executable instructions, example
Such as program module.Usually, program module includes performing particular task or realizing particular abstract data type
Routine, program, object, assembly, data structure etc..Can also be put into practice this in a distributed computing environment
Application, in these distributed computing environment, is come by the remote processing devices connected by communication network
Execution task.In a distributed computing environment, program module may be located at this locality including storage device
With in remote computer storage medium.
Each embodiment in this specification all uses the mode gone forward one by one to describe, phase homophase between each embodiment
As part see mutually, what each embodiment stressed is different from other embodiments it
Place.For system embodiment, owing to it is substantially similar to embodiment of the method, so describe
Fairly simple, relevant part sees the part of embodiment of the method and illustrates.
The foregoing is only embodiments herein, be not limited to the application.For this area skill
For art personnel, the application can have various modifications and variations.All institutes within spirit herein and principle
Any modification, equivalent substitution and improvement etc. made, within the scope of should be included in claims hereof.
Claims (14)
1. the generation method of a web pages component, it is characterised in that including:
Obtain the JSX code of web pages component；
Obtain html tag in described JSX code；
Judge whether the html tag of described acquisition has the HTML mated with stand-by CSS selector
Label；
If so, according to the HTML corresponding to the style content adjustment of the stand-by CSS selector of described coupling
The Style attribute of label, obtains web pages component.
Generate method the most as claimed in claim 1, it is characterised in that judge the HTML of described acquisition
Whether label has the html tag mated with stand-by CSS selector, specifically includes:
Obtain the Rule content of described html tag；
Determine whether the stand-by CSS selector of same rule content；
If so, judge that the html tag of described acquisition has the HTML mated with stand-by CSS selector
Label.
Generate method the most as claimed in claim 1, it is characterised in that sentence in the described JSX code of acquisition
After html tag, it is judged that whether the html tag of described acquisition has and stand-by CSS selector
Before the html tag of coupling, described generation method also includes:
By the conversion of described JSX code to protocol code based on HTML agreement；
Stand-by CSS selector is introduced by the Link label of described protocol code or Style label writes.
Generate method the most as claimed in claim 3, it is characterised in that after generating web pages component,
Described generation method also includes:
The Link label deleting described protocol code introduces or the write of Style label.
Generate method the most as claimed in claim 1, it is characterised in that according to the stand-by CSS of described coupling
The style content of selector adjust corresponding to the Style attribute of html tag, specifically include following at least
A kind of:
When described stand-by CSS selector is non-pseudo-class selector, by the sample of described stand-by CSS selector
The Style attribute of the html tag that the write of formula content is the most corresponding；
When described stand-by CSS selector is Hover puppet class selector, described CSS selector is moved
Entering and remove action listener, when there is immigration event, the style content of described stand-by CSS selector being write
Enter the Style attribute to corresponding html tag；When there is removal event, by described stand-by CSS
The style content of selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Active puppet class selector, to described stand-by CSS selector
Press and upspring action listener, when pressing event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When upspringing event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Focus puppet class selector, to described stand-by CSS selector
Do focusing and action listener out of focus, when there is focus event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is event out of focus, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Link puppet class selector, skip this stand-by CSS selector
Style content write to the process of the most corresponding html tag；
When described stand-by CSS selector is Target puppet class selector, it is judged that whether Location.Hash
Equal with element HREF attribute, if so, the style content of described stand-by CSS selector is write to institute
The Style attribute of corresponding html tag；
When described stand-by CSS selector is Enable puppet class selector, to described stand-by CSS selector
Open and disable action listener, when there is unlatching event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is disabling event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Disable puppet class selector, to described stand-by CSS selector
Open and disable action listener, when there is unlatching event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is disabling event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is First Child puppet class selector, described stand-by CSS is selected
The style content write selecting device belongs to the Style of first html tag in corresponding html tag
Property；
When described stand-by CSS selector is Last Child puppet class selector, described stand-by CSS is selected
The style content write of device belongs to the Style of last html tag in corresponding html tag
Property；
When described stand-by CSS selector is Before puppet class selector, by described stand-by CSS selector
Style content write to the previous position of the most corresponding html tag；
When described stand-by CSS selector is After puppet class selector, by described stand-by CSS selector
The later position of the html tag that style content write is the most corresponding.
Generate method the most as claimed in claim 1, it is characterised in that described generation method also includes:
The html tag not mated with stand-by CSS selector in described html tag is made marks；
Make marks to not doing the stand-by CSS selector mated with described html tag；
Run described web pages component, generate result HTML code；
Obtain html tag marked in described result HTML code；
Obtain that match, marked CSS selector with marked html tag；
Style content according to described coupling, marked CSS selector adjust corresponding to, marked
The Style attribute of the html tag of note, updates described web pages component.
Generate method the most as claimed in claim 1, it is characterised in that obtain HTML in described JSX code
After label, described generation method also includes:
Judge whether html tag has two-way html tag；
If so, two-way html tag does default incoming event monitor；
Judge whether the view layer corresponding to described two-way html tag occurs to preset incoming event；
If so, the more new data of view layer in described two-way html tag is obtained, by described more new data
It is written back to the data Layer of described two-way html tag.
8. the generating means of a web pages component, it is characterised in that including:
Code obtaining module, obtains the JSX code of web pages component；
Label acquisition module, obtains html tag in described JSX code；
Matching judgment module, it is judged that whether have in the html tag of described acquisition and select with stand-by CSS
The html tag of device coupling；
Attribute tuning module, mates with stand-by CSS selector if having in the html tag of described acquisition
Html tag, adjust according to the style content of the stand-by CSS selector of described coupling corresponding to
The Style attribute of html tag, obtains web pages component.
9. generating means as claimed in claim 8, it is characterised in that matching judgment module specifically for:
Obtain the Rule content of described html tag；
Determine whether the stand-by CSS selector of same rule content；
If so, judge that the html tag of described acquisition has the HTML mated with stand-by CSS selector
Label.
10. generating means as claimed in claim 8, it is characterised in that described generating means also includes choosing
Select device writing module, specifically for:
By the conversion of described JSX code to protocol code based on HTML agreement；
Stand-by CSS selector is introduced by the Link label of described protocol code or Style label writes.
11. generating means as claimed in claim 10, it is characterised in that described generating means also includes
Write removing module, specifically for:
The Link label deleting described protocol code introduces or the write of Style label.
12. generating means as claimed in claim 8, it is characterised in that described Attribute tuning module, extremely
Less for following one:
When described stand-by CSS selector is non-pseudo-class selector, by the sample of described stand-by CSS selector
The Style attribute of the html tag that the write of formula content is the most corresponding；
When described stand-by CSS selector is Hover puppet class selector, described CSS selector is moved
Entering and remove action listener, when there is immigration event, the style content of described stand-by CSS selector being write
Enter the Style attribute to corresponding html tag；When there is removal event, by described stand-by CSS
The style content of selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Active puppet class selector, to described stand-by CSS selector
Press and upspring action listener, when pressing event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When upspringing event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Focus puppet class selector, to described stand-by CSS selector
Do focusing and action listener out of focus, when there is focus event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is event out of focus, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Link puppet class selector, skip this stand-by CSS selector
Style content write to the process of the most corresponding html tag；
When described stand-by CSS selector is Target puppet class selector, it is judged that whether Location.Hash
Equal with element HREF attribute, if so, the style content of described stand-by CSS selector is write to institute
The Style attribute of corresponding html tag；
When described stand-by CSS selector is Enable puppet class selector, to described stand-by CSS selector
Open and disable action listener, when there is unlatching event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is disabling event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is Disable puppet class selector, to described stand-by CSS selector
Open and disable action listener, when there is unlatching event, by the pattern of described stand-by CSS selector
Hold the Style attribute of the most corresponding html tag of write；When there is disabling event, by described stand-by
The style content of CSS selector removes from the Style attribute of corresponding html tag；
When described stand-by CSS selector is First Child puppet class selector, described stand-by CSS is selected
The style content write selecting device belongs to the Style of first html tag in corresponding html tag
Property；
When described stand-by CSS selector is Last Child puppet class selector, described stand-by CSS is selected
The style content write of device belongs to the Style of last html tag in corresponding html tag
Property；
When described stand-by CSS selector is Before puppet class selector, by described stand-by CSS selector
Style content write to the previous position of the most corresponding html tag；
When described stand-by CSS selector is After puppet class selector, by described stand-by CSS selector
The later position of the html tag that style content write is the most corresponding.
13. generating means as claimed in claim 8, it is characterised in that described generating means also includes moving
State label adjusting module, specifically for:
The html tag not mated with stand-by CSS selector in described html tag is made marks；
Make marks to not doing the stand-by CSS selector mated with described html tag；
Run described web pages component, generate result HTML code；
Obtain html tag marked in described result HTML code；
Obtain that match, marked CSS selector with marked html tag；
Style content according to described coupling, marked CSS selector adjust corresponding to, marked
The Style attribute of the html tag of note, updates described web pages component.
14. generating means as claimed in claim 8, it is characterised in that described generating means also includes double
To improving module, specifically for:
Judge whether html tag has two-way html tag；
If so, two-way html tag does default incoming event monitor；
Judge whether the view layer corresponding to described two-way html tag occurs to preset incoming event；
If so, the more new data of view layer in described two-way html tag is obtained, by described more new data
It is written back to the data Layer of described two-way html tag.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510296308.XA CN106293669B (en) | 2015-06-02 | 2015-06-02 | Webpage component generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510296308.XA CN106293669B (en) | 2015-06-02 | 2015-06-02 | Webpage component generation method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106293669A true CN106293669A (en) | 2017-01-04 |
| CN106293669B CN106293669B (en) | 2019-12-24 |
Family
ID=57655501
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510296308.XA Active CN106293669B (en) | 2015-06-02 | 2015-06-02 | Webpage component generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106293669B (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108255485A (en) * | 2017-09-22 | 2018-07-06 | 优视科技有限公司 | Page building method, equipment and electronic equipment |
| WO2019052143A1 (en) * | 2017-09-13 | 2019-03-21 | 深圳壹账通智能科技有限公司 | Jsx file generation method and apparatus, storage medium and computer device |
| CN110389810A (en) * | 2019-07-31 | 2019-10-29 | 阿里巴巴集团控股有限公司 | A kind of method, device and equipment for quickly putting UI control on virtual canvas |
| CN112558964A (en) * | 2020-11-27 | 2021-03-26 | 华帝股份有限公司 | Webpage generation method, computer equipment and storage medium |
| CN113342416A (en) * | 2021-06-09 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | Method and equipment for displaying H5 graphic data in applet |
| CN114138159A (en) * | 2021-11-25 | 2022-03-04 | 海南车智易通信息技术有限公司 | Method and device for switching tabs, computing equipment and storage medium |
| CN114968204A (en) * | 2020-11-16 | 2022-08-30 | 华为技术有限公司 | Method and device for converting front-end component and back-end component |
| CN116340685A (en) * | 2023-03-28 | 2023-06-27 | 广东保伦电子股份有限公司 | Webpage generating method and system based on voice |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110292433A1 (en) * | 2010-05-25 | 2011-12-01 | Hewlett-Packard Development Company, L.P. | Print workflow management |
| CN103064849A (en) * | 2011-10-19 | 2013-04-24 | 腾讯科技（深圳）有限公司 | Treatment method and device for cascading style sheet (CSS) |
-
2015
- 2015-06-02 CN CN201510296308.XA patent/CN106293669B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110292433A1 (en) * | 2010-05-25 | 2011-12-01 | Hewlett-Packard Development Company, L.P. | Print workflow management |
| CN103064849A (en) * | 2011-10-19 | 2013-04-24 | 腾讯科技（深圳）有限公司 | Treatment method and device for cascading style sheet (CSS) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2019052143A1 (en) * | 2017-09-13 | 2019-03-21 | 深圳壹账通智能科技有限公司 | Jsx file generation method and apparatus, storage medium and computer device |
| CN108255485A (en) * | 2017-09-22 | 2018-07-06 | 优视科技有限公司 | Page building method, equipment and electronic equipment |
| CN108255485B (en) * | 2017-09-22 | 2021-10-29 | 阿里巴巴（中国）有限公司 | Page construction method and equipment and electronic equipment |
| CN110389810A (en) * | 2019-07-31 | 2019-10-29 | 阿里巴巴集团控股有限公司 | A kind of method, device and equipment for quickly putting UI control on virtual canvas |
| CN110389810B (en) * | 2019-07-31 | 2023-03-31 | 创新先进技术有限公司 | Method, device and equipment for quickly placing UI (user interface) control on virtual canvas |
| CN114968204A (en) * | 2020-11-16 | 2022-08-30 | 华为技术有限公司 | Method and device for converting front-end component and back-end component |
| CN114968204B (en) * | 2020-11-16 | 2023-05-09 | 华为技术有限公司 | Method and device for converting front end component and back end component |
| CN112558964A (en) * | 2020-11-27 | 2021-03-26 | 华帝股份有限公司 | Webpage generation method, computer equipment and storage medium |
| CN113342416A (en) * | 2021-06-09 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | Method and equipment for displaying H5 graphic data in applet |
| CN114138159A (en) * | 2021-11-25 | 2022-03-04 | 海南车智易通信息技术有限公司 | Method and device for switching tabs, computing equipment and storage medium |
| CN116340685A (en) * | 2023-03-28 | 2023-06-27 | 广东保伦电子股份有限公司 | Webpage generating method and system based on voice |
| CN116340685B (en) * | 2023-03-28 | 2024-01-30 | 广东保伦电子股份有限公司 | Webpage generating method and system based on voice |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106293669B (en) | 2019-12-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106293669A (en) | A kind of generation method and apparatus of web pages component | |
| CN104714788B (en) | A kind of method and device that software installation packet automatically generates | |
| CN109690426A (en) | The edit methods of trapezoid figure program editor auxiliary device and trapezoid figure program | |
| CN103309667B (en) | The method of UI control and picture location revision is located in Android system | |
| CN105468797B (en) | A kind of information processing method and device | |
| CN109657177A (en) | The generation method of the page, device, storage medium and computer equipment after upgrading | |
| CN107368292A (en) | A kind of resource Compilation Method and device | |
| CN107678777A (en) | A kind of management method of software document, device and terminal | |
| CN102455931A (en) | Method and system for developing Android platform engineering | |
| CN112650966A (en) | Method, generator and medium for generating dynamic list page of online design | |
| CN107330028A (en) | Expansion application methods and system of a kind of Apache NiFi in terms of source data input database | |
| CN114327776A (en) | Debugging method, debugging equipment and debugging system for intelligent contract | |
| CN107133502A (en) | A kind of processing method and processing device of application program | |
| CN108846069B (en) | Document execution method and device based on markup language | |
| CN113268227A (en) | Zero-code visualization software development platform and development method | |
| CN107038058A (en) | A kind of code process method and device | |
| CN107391529B (en) | Method and device for realizing Object Relation Mapping (ORM) | |
| CN103984554B (en) | The generation method and device of Software for Design document | |
| CN107291600A (en) | A kind of recording method and device of daily record | |
| US9454382B2 (en) | Verification of UML state machines | |
| CN109753273A (en) | Internet of Things application and development method, apparatus and its equipment based on MVVM frame | |
| CN103955368B (en) | A kind of adaptive support system of software obfuscation and development approach | |
| CN109409037A (en) | A kind of generation method, device and the equipment of data obfuscation rule | |
| CN107203707A (en) | It is a kind of to realize the method and system that program code is obscured | |
| CN107369192B (en) | Connection relation processing method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20200923 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Patentee after: Innovative advanced technology Co.,Ltd. Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Patentee before: Advanced innovation technology Co.,Ltd. Effective date of registration: 20200923 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Patentee after: Advanced innovation technology Co.,Ltd. Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands Patentee before: Alibaba Group Holding Ltd. |