CN108304179A - The method and device of pattern is introduced in a kind of Web Components components - Google Patents
The method and device of pattern is introduced in a kind of Web Components components Download PDFInfo
- Publication number
- CN108304179A CN108304179A CN201610879438.0A CN201610879438A CN108304179A CN 108304179 A CN108304179 A CN 108304179A CN 201610879438 A CN201610879438 A CN 201610879438A CN 108304179 A CN108304179 A CN 108304179A
- Authority
- CN
- China
- Prior art keywords
- components
- pattern
- component
- web
- styling
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Abstract
Introduce this application discloses a kind of method for introducing pattern in Web Components components and in a kind of Web Components components the device of pattern.The method of introducing pattern includes in the Web Components components：Obtain one or more pattern module；Each pattern module compiling is generated into corresponding CSS results；Each CSS results are subjected to Groupware encapsulation, are respectively converted into corresponding styling component；According to default condition, the suitable styling component is introduced into the Web Components components for needing this kind or those styling components.Using the above method, solve the problems, such as that the pattern of the component external caused by Web Components pattern isolation characteristics in the prior art can not be introduced into component internal.
Description
Technical field
The present invention relates to web front end fields, and in particular to a kind of method that pattern is introduced in Web Components components
And device.
Background technology
A kind of emerging modularization specifications of the Web Components as web front end field, represents development side from now on
To the component based on this establishment is externally to hide to realize details, including pattern isolation and event redirect.Using this technology
Be conducive to create reusable, standardized component.Its benefit in action scope and pattern encapsulation so that component is in CSS samples
Safer in formula coverage, the isolation of pattern is for preventing extraneous factor interference highly useful, but this also results in Web
The pattern of Components component externals can not influence the problem of component internal, and the style for hindering whole website is unified.
In the draft of new edition CSS, once occurred it is a kind of by symbol "/deep/ " or "::Shadow " is indicated under it
Pattern allow from outside to be penetrated into component internal, influence the representation of component internal pattern.It therefore, can be in component external
Global style is defined by the representation, to achieve the purpose that pattern is penetrated into component internal.For example, defining " hyperlink "
The global style of label is blue, and CSS is described as：html/deep/a{color:blue；, above description can make
In the page and " hyperlink " label of component internal<a>Color pattern become blue.
By symbol "/deep/ " or "::Shadow " come indicate the pattern under it permission be penetrated into Web from outside
Components component internals influence the representation of the pattern of component internal, and this method comes across in the draft of new edition CSS,
But the current representation is not recommended, and is gradually discarded, and disadvantage mainly has the following：
1. performance is bad, global style using the representation to be penetrated into component internal, then CSS selector can only compare
It is wide in range, it is similar to the way of " shotgun ", in the practical rendering of browser, can be done on the original element without effect excessive
Useless traversal matching detection, leads to the problem that performance is bad.
2. pattern division two inside and outside the component at since " pattern is penetrated into component internal from outside ", there have been one
The pattern of component belongs to the problem inside and outside component, is not inconsistent the requirement of seaming element cohesion, and pattern maintenance cost will also be got higher.
3. deviate standard original intention, for the original intention by Web Components, for the purpose for externally hiding realization details,
Pattern isolation is realized by Shadow DOM, and the representation has broken this design original intention, and one has been opened for pattern pollution
A openning, this be also why the representation occur in draft after one of the reason discarded again.
It can be seen that the method that the pattern of Web Components component externals in the prior art is penetrated into component internal
There are problems that performance is bad, maintenance cost is high and there are pattern pollutions.
Invention content
The present invention, which provides, introduces the method for pattern and a kind of Web in a kind of Web Components components
The device of pattern is introduced in Components components；To solve in the prior art since spy is isolated in Web Components patterns
The problem of pattern of component external caused by property can not be introduced into component internal.
The embodiment of the present application provides a kind of method that pattern is introduced in Web Components components, the method packet
It includes：
Obtain one or more pattern module；
Each pattern module compiling is generated into corresponding CSS results；
Each CSS results are subjected to Groupware encapsulation, are respectively converted into corresponding styling component；
According to default condition, the suitable styling component is introduced into and needs this kind or those styling components
In Web Components components.
Optionally, the pattern module, including:
The pattern module for the fine granularity pattern module or direct editing that global style is split out.
Optionally, the pattern module of the direct editing, including:
Pass through CSS preprocesor language editors.
Optionally, the default condition, including：
The demand of the New Parent leaved for development.
Optionally, described that each CSS results are subjected to Groupware encapsulation, it is respectively converted into corresponding styling component,
Including：
The component definition structure of packet last layer Web Components outside the CSS results, and according to the sample
Formula module path determines the unique name of the styling component.
Optionally, it is described by each pattern module compiling generate corresponding CSS results with by each CSS results
The step of carrying out Groupware encapsulation, being respectively converted into corresponding styling component is realized by compiler engine.
Optionally, the compiler engine, including：
The compiler engine is fitted to local server, compiling service is provided with the card format of server.
Optionally, the card format with server provides compiling service, including：
In the development phase, the pattern module is subjected to on-the-flier compiler and exports the styling component.
Optionally, the compiler engine, including：
The compiler engine is fitted in the file stream of the build tool, file stream is provided with the card format of the build tool
Processing service.
Optionally, the card format with the build tool provides file stream process service and is used for, including：
In the structure stage, the entity file that solidification compiling generates the styling component is carried out to the pattern module.
Optionally, the Web Components components, including one or more described styling component and one or
The multiple common components of person, and above-mentioned styling component, common component are combined as required for a Web Components component
Web Components component logics.
Optionally, described that the suitable styling component is introduced into the Web for needing this kind or those styling components
In Components components, introduced using HTML Import.
Optionally, the method includes:
It is realized using Polymer frames.
The embodiment of the present application also provides the device that pattern is introduced in a kind of Web Components components, described device packets
It includes：
Acquiring unit, for obtaining one or more pattern module；
Compilation unit, for each pattern module file compiling in acquiring unit to be generated corresponding CSS results；
Encapsulation unit is respectively converted into correspondence for each CSS results of compilation unit to be carried out Groupware encapsulation
Styling component；
Unit is introduced, for according to default condition, the suitable styling component in encapsulation unit to be introduced into
In the Web Components components for needing this kind or those styling components.
Compared with prior art, the present invention has the following advantages:
The pattern for the component external that the prior art provides is penetrated into the method for component internal due to doing excessive useless traversal
Matching detection causes performance bad；The requirement of seaming element cohesion is not inconsistent it, pattern maintenance cost is also high；Web is broken
Components externally realizes the design original intention for hiding details, and there are pattern pollutions.
The present invention provides a kind of method that pattern is introduced in Web Components components, including：Acquisition one is more
A pattern module；Each pattern module compiling is generated into corresponding CSS results；Each CSS results are subjected to component
Change encapsulation, is respectively converted into corresponding styling component；According to default condition, the suitable styling component, which is introduced into, to be needed
It will be in the Web Components components of this kind or those styling components.
The method that pattern is introduced in Web Components components provided by the invention, by first compiling pattern module
Corresponding CSS is generated as a result, then carrying out Groupware encapsulation to the CSS results, pattern module is realized and arrives styling component
Styling component is finally introduced Web Components component internals by conversion.The technical program, by by Web Components
The pattern module of component external is converted to styling component, and styling component has been introduced into Web Components components
Portion, the component incorporation way to which Web Components component specifications itself be utilized is realized is introduced into Web by pattern
In Components components, avoid allows pattern to be penetrated into Web from outside under the prior art by additional character
Performance caused by Components component internals is bad, the problem of destroying component cohesion and pattern may being caused to pollute.
The present invention also provides Webs corresponding with the method for pattern is introduced in above-mentioned Web Components components
The device of pattern is introduced in Components components.
Description of the drawings
Fig. 1 is the flow for the method that pattern is introduced in the Web Components components that the application first embodiment provides
Figure；
Fig. 2 is the signal for the device that pattern is introduced in the Web Components components that the application second embodiment provides
Figure；
Fig. 3 is the global sample for the method that pattern is introduced in the Web Components components that the application first embodiment provides
Formula is split as the schematic diagram of fine granularity module.
Fig. 4 is the pattern mould for the method that pattern is introduced in the Web Components components that the application first embodiment provides
Block is converted to the schematic diagram of styling component.
Fig. 5 is the pattern group for the method that pattern is introduced in the Web Components components that the application first embodiment provides
Part introduces the schematic diagram of New Parent.
Fig. 6 is the method compiler engine that pattern is introduced in the Web Components components that the application first embodiment provides
The schematic diagram of adaptation.
Specific implementation mode
It is below in conjunction with the accompanying drawings and specific real in order to be more clearly understood that the above objects, features, and advantages of the application
Mode is applied the application is further described in detail.It should be noted that in the absence of conflict, the implementation of the application
Feature in example and embodiment can be combined with each other.
Many details are elaborated in the following description in order to fully understand the application.But the application can
Much to implement different from other manner described here, those skilled in the art can be in the feelings without prejudice to the application intension
Similar popularization is done under condition, therefore, the application is not limited by following public specific implementation.
Embodiments herein provides a kind of method that pattern is introduced in Web Components components, and with it is above-mentioned
The device of pattern is introduced in the corresponding Web Components components of method.
Before introducing specific embodiment, some relevant technical terms used herein arrived are first explained.
Web Components, are a kind of component standard, Web Components standardization, by way of non-intruding,
HTML structure, CSS style, JavaScript logics are encapsulated as reusable component (module), realize component and same one page
The isolation of other codes on face.It is by tetra- kinds of Template, Custom Element, Shadow DOM, HTML Import technologies
Specification forms.Generally meet the component of the component standard in the application using Web Components components address.
DOM, DOM, that is, DOM Document Object Model, by document (page) resolve to one by node and object (comprising attribute and
The object of method) composition structured set, provide a kind of structural representation document, and the side for the operation that accesses to the structure
Formula.
Shadow DOM, Shadow DOM are a kind of sub- DOM depending on original DOM node in document, main document stream
It is not interfere with each other between the stand-alone assembly created based on Shadow DOM, therefore it can hide internal realization with encapsulation
Pattern, redirection events etc. are isolated in details.
HTML Import, HTML Import are used to load external html document into current document.For Web
For Components, an important application of HTML Import is the relied on component of load.
CSS, CSS full name are Cascading Style Sheets, mean cascading style sheets, are a kind of style flag languages
Speech, is used to describe the presentation style of the documents such as HTML, XML." stacking " refers to browser and is overlapped to multiple style sources, most
The process of whole definitive result.
Less, Less are a CSS pretreatment language (file suffixes .less), it has expanded CSS language, increases all
Such as variable, mixing (mixin), function function, allow CSS more easy cares, facilitate make theme, expand.
The application first embodiment provides a kind of method that pattern is introduced in Components components to Web.It please refers to
Fig. 1, it illustrates the flows for the method that pattern is introduced in the Web Components components provided according to an embodiment of the present application
Figure.It is described in detail below in conjunction with Fig. 1.
Step S101 obtains one or more pattern module.
This step is that the pattern module is converted to styling component to get ready work, is to turn the pattern module
It is changed to the precondition of styling component.
Pattern is exactly to summarize the entirety of element (font, paragraph, image, list etc.) attribute in webpage, that is, describes institute
The display format (for example, the size of word, font, color, the size etc. of background and image are all patterns) of web object；It is logical
A kind of style flag language CSS (table is laminated in Cascading Style Sheets, pattern) is often used for describing HTML, XML
The presentation style of equal documents.For the ease of recording style flag language CSS, and a kind of CSS pretreatments language LESS is used, with
Just programmer easily records the language.
For example, use the pattern of LESS language record buttons for:
button{border:none；cursor:pointer；font-size:12px；background-color:
transparent；}
The button for then quoting this pattern, the effect shown are:Boundary:No；The mouse pointer being put on button becomes
At the shape of hand；Font size:12px；Background colour：It is transparent.
The extension name of the pattern module is determined according to CSS preprocesor languages.For example, CSS preprocesor languages are
LESS, then the pattern module of element button is button.less；CSS preprocesor languages are SASS, then element button
Pattern module is button.sass.
The source of the pattern module can be the fine granularity pattern module that global style is split out.
The meaning of fine granularity pattern module that global style is split out as the pattern module is described below.
Global style is positioned in the page, is come into force to the common element in the page.For Web Components components, then
Due to the characteristic of its pattern isolation, global style can't come into force to the element of component internal.Global style is put into a file
In, the file to extend entitled CSS exists, such as:style.css.Obviously, the CSS Documents Comparisons of whole element patterns are defined
It is huge, and some specific Web Components component does not need to generally comprising the definition to whole element patterns.For example,
Some Web Components component only only used button element, then only needs to introduce the relevant pattern of button.For this purpose,
It may be used and global style is split as to the mode of fine granularity pattern module realizes and be more directed to Web Components components
The introducing related style of property.
If by the way that global style is split into fine granularity pattern module according to page structure level, the performance of element function,
Fine granularity pattern module can be converted into styling component by the scheme of the application, be introduced into Web Components,
Realize the unification of website style.
Each global style is segmented into multiple fine granularity pattern modules, and all fine granularity pattern block combiners get up,
It is then complete global style.As shown in figure 3, according to page structure level, element function show, by global style split by
The fine granularities pattern modules such as button pattern module, list pattern module, table style module, tab style module, each module pair
It is button pattern file, the entitled button.less of file to answer a file, the corresponding file of button pattern module；List pattern
The corresponding file of module is list pattern file, and the entitled form.less of file, table style module are corresponding for table style text
Part, the entitled table.less of file；Corresponding tab style module is tab style file, the entitled lable.less of file.Carefully
The file of granularity pattern module, can also be with other CSS preprocesor languages in addition to the file presence with the LESS language in Fig. 3
File exist.
The process that global style is split into pattern module is as follows：The pattern of element with the same function is filtered out
Come, then pattern module will be combined into the relevant style definitions of these elements.By splitting, global style has just split out multiple
Pattern module.It should be noted that a variety of patterns of identical function element may be included in one style module file.When
So, may include only a kind of pattern in some pattern module files.For example, if having in global style CSS files multiple
Button patterns, then the button.less files in Fig. 3 button include multiple button patterns.
The source of the pattern module can also be the pattern module of programmer oneself editor.It can be pre- by CSS
Processor language editor's pattern module.More commonly used CSS preprocesor languages include：LESS、SASS、Stylus.For example, journey
Sequence person can use less language editors to extend source of the pattern module of entitled .less as pattern module according to demand, and one
Can include the multiple patterns sorted out according to some dividing mode in a pattern module.
Each pattern module compiling is generated corresponding CSS results by step S102.
This step is that the pattern module is converted to the intermediate steps of styling component, the pattern obtained due to previous step
Module is recorded using CSS preprocesor languages, and while really using needs to record using the pattern of CSS formats；Therefore, it needs
The pattern module compiling of original CSS preprocesor languages record is generated to the pattern module of CSS language record；It is adopted to each
The pattern module recorded with CSS preprocesor languages, which is required to compile respectively, generates corresponding CSS results.
It is described that each pattern module compiling is generated into corresponding CSS as a result, being realized by corresponding compilation tool.
The compilation tool that CSS preprocesor languages are compiled as to CSS results is that those skilled in the art are commonly used, not detailed herein
It states.
Each CSS results are carried out Groupware encapsulation, are respectively converted into corresponding styling component by step S103.
This step purpose is that step S102 compilings are generated corresponding CSS results to be encapsulated as styling component so that it can draw
Enter to Web Components component internals.For Web Components components, the global sample of external definition is not received
The pattern module of aforementioned acquisition is only converted to the internal component of composition Web Components components, can just acted on by formula
The element of component internal；Transformed styling component can be used as common component, as the new Web of establishment
When Components components, styling component only need to be introduced to new Web Components components.
It is described that CSS results progress Groupware encapsulation is converted into styling component, it refers specifically to through compiler engine to institute
It states CSS results and carries out Groupware encapsulation, the component definition structure of packet last layer Web Components outside the CSS results
Body, and determine according to the pattern module path unique name (id) of the styling component.
Each styling component forms an individual styling component file, and styling component filename can be according to pattern
Module file name determines.For example, the file of the corresponding button styling components of button pattern module button.less is entitled
The file of the corresponding list styling component of button.less.html, list pattern module form.less is entitled
form.less.html。
There are many definition modes of the unique name (id) of styling component, as long as ensureing that the uniqueness of styling component id can
With.Fig. 4 shows a kind of method for the unique name (id) determining the styling component according to the pattern module path：1st
Capable id=" path/*.less.html ", " path/*.less.html " is the title of component here, the title of component be with
File path has correspondence, because the conversion from pattern module to styling component is the compilation process of an automation, group
As soon as part needs a name, and the determination of this name relies on path, for example there are one pattern module is button.less,
Its file path is~/works/project/assets/button.less, compiler engine will passage path analysis, sample
The title (id) of formula component is set to " assets/button.less.html ", and this definition is set in a program, relies on road
It is a kind of means for ensureing uniqueness that diameter, which obtains id,.
Component definition further includes some standards " end to end ", in addition this " end to end " can be packaged into CSS one component
.For example, Fig. 4 is added respectively on CSS results head and tail portion<dom-module>、<template>、<style>, just
The CSS results component has been packaged into.
HTML<template>Element represents a template in label.It includes " template content "；Substantially it is one big
The reproducible DOM of inertia of block.Template can be imagined as the part of a scaffold, you are in the whole life cycle of application
Can use (and reuse) it.The content for wanting drawing template establishment, needs to state that some are marked to be used in combination<template>Element by they
It wraps up.
The style attributes of HTML provide a kind of universal method changing HTML style.Style is in HTML4 versions
Reference, it is a kind of method of preferred change HTML element pattern.Directly pattern can be added to using style
In HTML element, or indirectly defined in style sheet using independent style files.
The process that pattern module is converted to styling component is exemplified below.By file path~/works/project/
The process that button.less under assets is converted to button.less.html is：First, by file path~/works/
Button.less under project/assets is converted to CSS by compilation tool, then carries out Groupware encapsulation to CSS,
Packet last layer Web Components definition structure bodies outside CSS results after compiling, by using template template and
CSS results after compiling are packaged by pattern style, obtain the pattern file of button.less, and according to file path
~/works/project/assets determines the unique name id=" assets/button.less.html " of styling component.
The compiling that file corresponding to each pattern module can first pass through compilation tool is converted to CSS, then right
CSS carries out Groupware encapsulation, packet last layer Web Components definition structure bodies outside the CSS results after compiling, and root
The unique name id of styling component is determined according to file path path.
Step S104, according to default condition, the suitable styling component is introduced into need this kind or those
In the Web Components components of styling component.
This step purpose is to need this kind or those styling components by the way that the suitable styling component to be introduced into
In Web Components components, after introducing, Web Components components is enable to use the pattern being introduced into.
According to the needs of exploitation, when the suitable styling component is introduced into the Web Components components,
It only needs the styling component needed for the Web Components components being introduced into the component, other unwanted institutes
Styling component is stated then to be not required to be introduced into the component.It, can for the styling component for the pattern module conversion drawn by fine granularity
With the apparent redundancy for reducing introducing pattern.
The Web Components components, including one or more described styling component and one or more
Common component, and above-mentioned styling component, common component are combined as a required Web of Web Components components
Components component logics.
It should be noted that styling component and common component are equality, they may be considered widgets, several are small
Component constitutes Web Components components, however realizes a Web Components component, is not only several " groups
Part ", which is simply enumerated, can complete task, it is desired nonetheless to have some Web Components component logics.How several
Widgets string together to be done a certain work and can be described as Web Components component logics jointly；In Web Components components
How each widgets and so-called New Parent logic are laid out.
Be described below the process styling component being introduced into Web Components components.
The styling component file is added to the head of New Parent file leaved for development by HTML Import, is just realized
Reference inside New Parent to global style.
As shown in figure 5, the Web Components components are New Parent new, including：Styling component A, file are entitled
A.less.html, styling component B, file entitled b.less.html, common component C, file entitled c.html, common group
Part D, the entitled d.html of file further include New Parent logic.
Such as the id of styling component A is " path/a.less.html ", and styling component A is introduced into the side of New Parent new
Method is,<Style include=" path/a.less.html "></style>；The id of styling component B is " path/
The styling component B methods for being introduced into New Parent new are by b.less.html ",<Style include=" path/
b.less.html"></style>；The id of common component C is " path/c.html ", and common component C is introduced into New Parent new
Method be,<Style include=" path/c.html "></style>；The id of common component D is " path/d.html ",
It is by the common component D methods for being introduced into New Parent new,<Style include=" path/d.html "></style>.
By the way that the styling component to be introduced into Web Components components, the pattern of component external is no longer to Web
Components components are isolated, and have achieved the purpose that pattern is penetrated into component internal, are conducive to the unified of pattern and are safeguarded.Exist later
When needing to change the pattern of element, it need to only be changed in external pattern, the element of Web Components component internals
Pattern has also carried out corresponding variation, realizes the unification of web page style.
Two steps of step S102 and step S103 described above may be used a compiler engine executed automatically and realize.
The compiler engine is that " pattern module " is converted to " pattern group in " compiling ", that is, corresponding diagram 4 in a more global sense
The whole process of part ".Work made by compiler engine for:Each pattern module compiling is generated in step s 102 and is corresponded to
CSS as a result, using existing compilation tool；Each CSS results are subjected to Groupware encapsulation in step S103, point
Corresponding styling component is not converted to, this step is realized by the code of bespoke.
The solution of the present invention is additionally contemplates that component ensures problem in the consistency for developing and building two stages.Development phase
Component is referred to when locally developing, needs frequently modification, developer that can initiate to ask using browser due to being not yet molded
With check modification as a result, at this time in the development environment of local boot, receive after request can to the pattern module that is accessed into
Mobile state compiling response exports styling component, that is, the compiling of " request driving ".The structure stage refers to that component is completed out
Hair the operations such as is packaged, is compressed before formal publication, before these operations, it is also desirable to all pattern modules into
Row solidification compiling is unified to generate the entity file of styling component, and is at this time the compiling of " driving of file stream ".
Due to the difference for the type of drive for developing and building the compiling of two stages, need compiler engine being fitted to respectively each
From process flow in, by share the same compiler engine in bottom reach consistency guarantee requirement.
Shown in Fig. 6, in the development phase, compiler engine is fitted in local server environment, with the plug-in unit shape of server
Formula provides compiling service, handling result is returned to browser by server response, so that exploitation is debugged.
The work that the server plug-ins are done is to handle it and respond upon receiving a request, and whole process is not raw
At true styling component file (such as * .less.html), the request of styling component file is only had identified, is then moved
State builds a correctly response body (" virtual responsive " in Fig. 6).
Why server plug-ins do not generate true styling component file (such as * .less.html), are because at it
In the development phase, during pattern module source file (such as * .less) itself is in constantly modification variation, frequent basis
The variation of pattern module source file goes generation styling component file to will produce a large amount of hard disk I/O operation.
In the structure stage, compiler engine is fitted in the file stream of the build tool, is carried with the card format of the build tool
For file stream process service, handling result is ultimately generated into an entity file by file stream and is cured, for publication.
File stream plug-in unit is true to generate styling component file (example according to pattern module source file (such as * .less)
Such as * .less.html) (" entity file " in Fig. 6).
The calling scene of file stream plug-in unit is the structure stage, that is, after exploitation, needs to cure done exploitation work
Make, the operation of true styling component file (such as * .less.html) at this moment can be once generated by file stream plug-in unit.
In addition, present invention application Polymer frames can reach best implementation result.
Polymer is the new Web UI frame issued in Google I/O 2013.The core principles of Polymer
It is " Everything is an element ".It is a practical, strong based on event-driven, encapsulation and interoperability
Web UI Development Frameworks.Polymer possesses many foundation forms and very strong component model.
It should be noted that other than application Polymer frames, others Web Module Development Method frames can also be applied.
Corresponding with the introducing method of pattern in above-mentioned Web Components components, present invention also provides one kind
The device of pattern is introduced in Web Components components.Since the embodiment of described device is substantially similar to the implementation of method
Example, so describing fairly simple, the relevent part can refer to the partial explaination of embodiments of method.Device described below is implemented
Example is only schematical.
Referring to FIG. 2, introducing sample in the Web Components components provided it illustrates the second embodiment of the application
The schematic diagram of the device of formula.
The device of pattern is introduced in the Components components using Web, including：Acquiring unit 201, compilation unit
202, encapsulation unit 203, introducing unit 204.
Acquiring unit 201, for obtaining one or more pattern module；
Compilation unit 202 is tied for each pattern module file compiling in acquiring unit to be generated corresponding CSS
Fruit；
Encapsulation unit 203 is respectively converted into for each CSS results of compilation unit to be carried out Groupware encapsulation
Corresponding styling component；
Unit 204 is introduced, for according to default condition, the suitable styling component in encapsulation unit to be introduced
Into the Web Components components for needing this kind or those styling components.
Optionally, the pattern module in the acquiring unit, including:
The pattern module for the fine granularity pattern module or direct editing that global style is split out.
Optionally, the pattern module of the direct editing, including:
Pass through CSS preprocesor language editors.
Optionally, the default condition being introduced into unit, including：
The demand of the New Parent leaved for development.
Optionally, the encapsulation unit, including：
Subelement is encapsulated, the component definition structure for the packet last layer Web Components outside the CSS results
Body, and determine according to the pattern module path unique name of the styling component.
Optionally, the compilation unit and encapsulation unit are realized by compiler engine.
Optionally, the compiler engine, including：
The compiler engine is fitted to local server, compiling service is provided with the card format of server.
Optionally, the card format with server provides compiling service, including：
In the development phase, the pattern module is subjected to on-the-flier compiler and exports the styling component.
Optionally, the compiler engine, including：
The compiler engine is fitted in the file stream of the build tool, file stream is provided with the card format of the build tool
Processing service.
Optionally, the card format with the build tool provides file stream process service and is used for, including：
In the structure stage, the entity file that solidification compiling generates the styling component is carried out to the pattern module.
Optionally, the Web Components components for introducing unit, including one or more described styling component,
And one or more common component, and above-mentioned styling component, common component are combined as a Web Components
The required Web Components component logics of component.
Optionally, the introducing unit is introduced using HTML Import.
Optionally, described device includes:
It is realized using Polymer frames.
Although the present invention is disclosed as above with preferred embodiment, it is not for limiting the present invention, any this field skill
Art personnel without departing from the spirit and scope of the present invention, can make possible variation and modification, therefore the guarantor of the present invention
Shield range should be subject to the range that the claims in the present invention are defined.
Claims (14)
1. a kind of method for introducing pattern in Web Components components, which is characterized in that including：
Obtain one or more pattern module；
Each pattern module compiling is generated into corresponding CSS results；
Each CSS results are subjected to Groupware encapsulation, are respectively converted into corresponding styling component；
According to default condition, the suitable styling component is introduced into the Web for needing this kind or those styling components
In Components components.
2. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that the sample
Formula module, including:
The pattern module for the fine granularity pattern module or direct editing that global style is split out.
3. the method for introducing pattern in Web Components components according to claim 2, which is characterized in that described straight
The pattern module of editor is connect, including:
Pass through CSS preprocesor language editors.
4. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that the institute
Preset condition, including：
The demand of the New Parent leaved for development.
5. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that described to incite somebody to action
Each CSS results carry out Groupware encapsulation, are respectively converted into corresponding styling component, including：
The component definition structure of packet last layer Web Components outside the CSS results, and according to the pattern mould
Block path determines the unique name of the styling component.
6. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that described to incite somebody to action
Each pattern module compiling generates corresponding CSS results and carries out Groupware encapsulation with by each CSS results, turns respectively
The step of being changed to corresponding styling component is realized by compiler engine.
7. the method for introducing pattern in Web Components components according to claim 6, which is characterized in that the volume
Engine is translated, including：
The compiler engine is fitted to local server, compiling service is provided with the card format of server.
8. in Web Components components according to claim 1 introduce pattern method, which is characterized in that it is described with
The card format of server provides compiling service, including：
In the development phase, the pattern module is subjected to on-the-flier compiler and exports the styling component.
9. the method for introducing pattern in Web Components components according to claim 6, which is characterized in that the volume
Engine is translated, including：
The compiler engine is fitted in the file stream of the build tool, file stream process is provided with the card format of the build tool
Service.
10. the method for introducing pattern in Web Components components according to claim 9, which is characterized in that described
File stream process service is provided with the card format of the build tool to be used for, including：
In the structure stage, the entity file that solidification compiling generates the styling component is carried out to the pattern module.
11. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that described
Web Components components, including one or more described styling component and one or more common component, and
Above-mentioned styling component, common component are combined as a required Web Components component of Web Components components
Logic.
12. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that described
The suitable styling component is introduced into the Web Components components for needing this kind or those styling components, is used
HTML Import are introduced.
13. the method for introducing pattern in Web Components components according to claim 1, which is characterized in that including:
It is realized using Polymer frames.
14. introducing the device of pattern in a kind of Web Components components, which is characterized in that including：
Acquiring unit, for obtaining one or more pattern module；
Compilation unit, for each pattern module file compiling in acquiring unit to be generated corresponding CSS results；
Encapsulation unit is respectively converted into corresponding sample for each CSS results of compilation unit to be carried out Groupware encapsulation
Formula component；
Unit is introduced, for according to default condition, the suitable styling component in encapsulation unit to be introduced into needs
In the Web Components components of this kind or those styling components.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610879438.0A CN108304179A (en) | 2016-10-08 | 2016-10-08 | The method and device of pattern is introduced in a kind of Web Components components |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610879438.0A CN108304179A (en) | 2016-10-08 | 2016-10-08 | The method and device of pattern is introduced in a kind of Web Components components |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108304179A true CN108304179A (en) | 2018-07-20 |
Family
ID=62871851
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610879438.0A Pending CN108304179A (en) | 2016-10-08 | 2016-10-08 | The method and device of pattern is introduced in a kind of Web Components components |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108304179A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542568A (en) * | 2018-11-23 | 2019-03-29 | 苏州思必驰信息科技有限公司 | Screen adaptation method and system for android system equipment |
| CN109656558A (en) * | 2018-12-19 | 2019-04-19 | 四川虹美智能科技有限公司 | A kind of method and device generating UI plug-in unit |
| CN111026455A (en) * | 2019-11-27 | 2020-04-17 | 掌阅科技股份有限公司 | Plug-in generation method, electronic device and storage medium |
| CN111311715A (en) * | 2020-02-14 | 2020-06-19 | 北京三快在线科技有限公司 | Method and device for adding animation effect in webpage |
| WO2021212636A1 (en) * | 2020-04-23 | 2021-10-28 | 平安国际智慧城市科技股份有限公司 | Form page generation method and device, terminal, and storage medium |
| CN114816385A (en) * | 2022-06-28 | 2022-07-29 | 中路智链科技集团有限公司 | Method, device and equipment for integrating heterogeneous system and storage medium |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777048A (en) * | 2009-01-14 | 2010-07-14 | 国际商业机器公司 | Method and device for solving UI style conflict in web application composition |
| CN102929867A (en) * | 2011-11-03 | 2013-02-13 | 微软公司 | Technology used for automatically translating a document |
| CN105683957A (en) * | 2013-10-31 | 2016-06-15 | 谷歌公司 | Style sheet speculative preloading |
| CN105893014A (en) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | Project development method and system for front end |
-
2016
- 2016-10-08 CN CN201610879438.0A patent/CN108304179A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777048A (en) * | 2009-01-14 | 2010-07-14 | 国际商业机器公司 | Method and device for solving UI style conflict in web application composition |
| CN102929867A (en) * | 2011-11-03 | 2013-02-13 | 微软公司 | Technology used for automatically translating a document |
| WO2013067233A1 (en) * | 2011-11-03 | 2013-05-10 | Microsoft Corporation | Techniques for automated document translation |
| CN105683957A (en) * | 2013-10-31 | 2016-06-15 | 谷歌公司 | Style sheet speculative preloading |
| CN105893014A (en) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | Project development method and system for front end |
Non-Patent Citations (3)
| Title |
|---|
| ERIC BIDELMAN: ""HTML Imports：#include for the web"", 《HTTPS://WWW.HTML5ROCKS.COM/ZH/TUTORIALS/WEBCOMPONENTS/IMPORTS/》 * |
| LAURENT: ""Using Less with Web Components"", 《HTTPS://STACKOVERFLOW.COM/QUESTIONS/22765491/USING-LESS-WITH-WEB-COMPONENTS》 * |
| MAKLESOFT: ""gulp-style-modules：A gulp plugin for wrapping css files into style modules as used by Polymer"", 《HTTPS://GITHUB.COM/MAKLESOFT/GULP-STYLE-MODULES#GULP-STYLE-MODULES》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542568A (en) * | 2018-11-23 | 2019-03-29 | 苏州思必驰信息科技有限公司 | Screen adaptation method and system for android system equipment |
| CN109656558A (en) * | 2018-12-19 | 2019-04-19 | 四川虹美智能科技有限公司 | A kind of method and device generating UI plug-in unit |
| CN109656558B (en) * | 2018-12-19 | 2022-04-19 | 四川虹美智能科技有限公司 | Method and device for generating UI plug-in |
| CN111026455A (en) * | 2019-11-27 | 2020-04-17 | 掌阅科技股份有限公司 | Plug-in generation method, electronic device and storage medium |
| CN111026455B (en) * | 2019-11-27 | 2023-02-24 | 掌阅科技股份有限公司 | Plug-in generation method, electronic device and storage medium |
| CN111311715A (en) * | 2020-02-14 | 2020-06-19 | 北京三快在线科技有限公司 | Method and device for adding animation effect in webpage |
| CN111311715B (en) * | 2020-02-14 | 2023-07-21 | 北京三快在线科技有限公司 | Method and device for adding animation effect in webpage |
| WO2021212636A1 (en) * | 2020-04-23 | 2021-10-28 | 平安国际智慧城市科技股份有限公司 | Form page generation method and device, terminal, and storage medium |
| CN114816385A (en) * | 2022-06-28 | 2022-07-29 | 中路智链科技集团有限公司 | Method, device and equipment for integrating heterogeneous system and storage medium |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108304179A (en) | The method and device of pattern is introduced in a kind of Web Components components | |
| US8347276B2 (en) | Systems and methods for software specification and design using a unified document | |
| US8756571B2 (en) | Natural language text instructions | |
| US20080244541A1 (en) | Code translator and method of automatically translating modeling language code to hardware language code | |
| Feldt | Programming Firefox: Building rich internet applications with XUL | |
| US20040158820A1 (en) | System for generating an application framework and components | |
| GB2423387A (en) | Application-Generic Sequence Diagram Generator Driven by a Non-Proprietary Language | |
| US20120131556A1 (en) | Xpath-based selection assistance of gui elements during manual test script authoring for xml-based applications | |
| CN104503816A (en) | System for automatically converting hardware language VHDL (Vhsic Hardware Description Language) into MSVL (Modeling, Simulation and Verification Language) | |
| CN103092594B (en) | model conversion method and device | |
| CN103942137A (en) | Browser compatibility testing method and device | |
| US20020104070A1 (en) | Document builder classes and methods | |
| Schleipen | A concept for conformance testing of AutomationML models by means of formal proof using OCL | |
| Zea | Mastering Responsive Web Design | |
| US8719693B2 (en) | Method for storing localized XML document values | |
| Frank | Augmenting the cataloger’s bag of tricks: Using MarcEdit, Python, and PyMARC for batch-processing MARC records generated from the archivists’ toolkit | |
| US9588997B2 (en) | Modularizing complex XML data for generation and extraction | |
| Mu et al. | Design and implementation of gui automated testing framework based on xml | |
| CN112650479A (en) | Webpage CSS structure automatic generation method and storage medium | |
| CN111310414B (en) | RDF format file analysis method and generation method | |
| WO2014094534A1 (en) | File development tool device and method based on file dictionary assembly | |
| Campesato | Angular and Machine Learning Pocket Primer | |
| TW552557B (en) | Automatic program generating system and the method thereof | |
| CN111367515B (en) | Page card development method, device, computing equipment and storage medium | |
| Hinkula | Hands-On Full Stack Development with Spring Boot 2 and React: Build Modern and Scalable Full Stack Applications Using Spring Framework 5 and React with Hooks |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180720 |
|
| RJ01 | Rejection of invention patent application after publication |