CN113778393A - Component generation method, device, computer system and computer-readable storage medium - Google Patents

Abstract

The present disclosure provides a component generation method, a component generation apparatus, a computer system, a computer-readable storage medium, and a computer program product. The component generation method comprises the following steps: calling a component generation framework to generate an initial virtual document object model, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or function component; and rendering the initial virtual document object model, generating a component comprising: rendering the basic hypertext markup language tag by utilizing a first rendering method; and rendering the function component by using a second rendering method.

Description

Component generation method, device, computer system and computer-readable storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a component generation method, a component generation apparatus, a computer system, a computer-readable storage medium, and a computer program product.

Background

The modularization is to divide the function into reusable modules, so that repeated labor is avoided, and the working efficiency is improved. With the development of web front-end technology, the idea of componentization becomes more and more important, and the development of a front-end component with high universality becomes a large target.

In implementing the disclosed concept, the inventors have found that there is at least the problem in the related art that the development process of the front-end component usually requires manual operation, resulting in a cumbersome process and being prone to error.

Disclosure of Invention

In view of the above, the present disclosure provides a component generation method, a component generation apparatus, a computer system, a computer-readable storage medium, and a computer program product.

One aspect of the present disclosure provides a component generation method, including: calling a component generation framework to generate an initial virtual document object model, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or function component; and rendering the initial virtual document object model, generating a component comprising: rendering the base hypertext markup language tag using the first rendering method; and rendering the function component by using the second rendering method.

According to an embodiment of the present disclosure, rendering the base hypertext markup language tag using the first rendering method includes: calling an element creating method of a native component of the browser to create a tag element aiming at the basic hypertext markup language tag; and inserting the tag element into a shadow document object model corresponding to the base hypertext markup language tag.

According to an embodiment of the present disclosure, rendering the function component using the second rendering method includes: calling a definition method in a custom tag of the browser native component to create a custom element; calling a method which is carried by the user-defined element and used for mounting a shadow document object model to create a shadow document object model; and inserting the custom element into the shadow document object model.

According to an embodiment of the present disclosure, the function component includes a rendering function, and rendering the function component by using the second rendering method includes: obtaining a return value of the rendering function after rendering the function component; and inserting the return value into the shadow document object model.

According to the embodiment of the disclosure, the function component includes a shared style, and rendering the function component by using the second rendering method includes: determining a predetermined pattern in a descendant component, wherein the descendant component is subordinate to the function component; acquiring a target name of a function component declaring the shared style under the condition that the preset style belongs to the shared style; creating a style label for the descendant component according to the target name; and inserting the style tag into a shadow document object model corresponding to the descendant component.

According to an embodiment of the present disclosure, the component generation method further includes: under the condition that component updating exists, calling the component generation framework to generate a target virtual document object model; comparing the target virtual document object model with the initial virtual document object model to determine that an updated target component exists; updating the initial component to the target component when the target component and the initial component corresponding to the target component are the same in type; and unloading the initial component and rendering the target component under the condition that the types of the target component and the initial component corresponding to the target component are different.

Another aspect of the present disclosure provides a component generation apparatus, including: the system comprises a first calling module, a second calling module and a third calling module, wherein the first calling module is used for calling a component generating framework to generate a virtual document object model, the component generating framework comprises a first rendering method and a second rendering method, and the virtual document object model is a basic hypertext markup language tag or a function component; the rendering module is used for rendering the virtual document object model to generate a component; wherein the rendering module comprises: a first rendering unit, configured to render the basic hypertext markup language tag by using the first rendering method; and the second rendering unit is used for rendering the function component by using the second rendering method.

Another aspect of the present disclosure provides a computer system comprising: one or more processors; a memory for storing one or more programs, wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the component generation method as described above.

Another aspect of the present disclosure provides a computer-readable storage medium having stored thereon computer-executable instructions for implementing the component generation method as described above when executed.

Another aspect of the present disclosure provides a computer program product comprising computer executable instructions for implementing the component generation method as described above when executed.

According to the embodiment of the disclosure, an initial virtual document object model is generated by adopting a calling component generation framework, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or a function component; and rendering the initial virtual document object model, generating a component comprising: rendering the basic hypertext markup language tag by utilizing a first rendering method; the technical means for rendering the function component by using the second rendering method is characterized in that a front-end component generating frame is introduced, a virtual document object model can be directly obtained, the component is directly generated from the virtual document object model through rendering, the whole process can be realized by the component generating frame, and manual operation is simplified, so that the technical problems of complicated process and high possibility of error caused by manual operation in the component development process are at least partially solved, and the technical effect of realizing the component with high universality on the basis of simplifying the manual operation is further achieved.

Drawings

The above and other objects, features and advantages of the present disclosure will become more apparent from the following description of embodiments of the present disclosure with reference to the accompanying drawings, in which:

FIG. 1 schematically illustrates an exemplary system architecture to which a component generation method may be applied, according to an embodiment of the disclosure;

FIG. 2 schematically illustrates a flow diagram of a component generation method according to an embodiment of the present disclosure;

FIG. 3 schematically illustrates a rendering schematic of a component generation method according to an embodiment of the disclosure;

FIG. 4 schematically illustrates an update schematic of a component generation method according to an embodiment of the disclosure;

FIG. 5 schematically shows a block diagram of a component generation apparatus according to an embodiment of the present disclosure; and

FIG. 6 schematically shows a block diagram of a computer system suitable for implementing the component generation method according to an embodiment of the present disclosure.

Detailed Description

Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the description is illustrative only and is not intended to limit the scope of the present disclosure. In the following detailed description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the embodiments of the disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present disclosure.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The terms "comprises," "comprising," and the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.

All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It is noted that the terms used herein should be interpreted as having a meaning that is consistent with the context of this specification and should not be interpreted in an idealized or overly formal sense.

Where a convention analogous to "at least one of A, B and C, etc." is used, in general such a construction is intended in the sense one having skill in the art would understand the convention (e.g., "a system having at least one of A, B and C" would include but not be limited to systems that have a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.). Where a convention analogous to "A, B or at least one of C, etc." is used, in general such a construction is intended in the sense one having skill in the art would understand the convention (e.g., "a system having at least one of A, B or C" would include but not be limited to systems that have a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.).

In the early development of Web front-end componentization, because the Web front-end does not have standard component specifications, but is realized by each framework, the Components of different frameworks cannot be reused, and the isolation between the Components causes resource waste, which is contrary to the development of the front-end componentization, the Web Components (Web native Components) standard is proposed as an agenda.

Web Components are not a single technology, and consist of a series of browser standards, and can be packaged in a standardized and non-invasive manner, and mainly comprise three parts: custom elements for creating custom elements; the Shadow Dom (Shadow Document Object model, wherein Dom is short for Document Object Modal) is used for creating a closed space, is isolated from the outside and avoids mutual pollution with external elements; and HTML Template (a hypertext Markup Language Template tag, where HTML is an abbreviation for Hyper Text Markup Language) for creating document fragments. Web Components are used as the standard supported by browsers to break through the limitation of front-end frameworks and develop Components with high universality.

The inventor finds that in the process of implementing the concept disclosed by the invention, the creation of the Web Components requires a developer to actively call a browser basic API, combine Custom Elements, Shadow Dom and HTML Template into a whole, and manually operate the Dom during component rendering and updating, so that the process is complicated and is easy to make mistakes. Meanwhile, the strong isolation of the Web Components causes that the styles among the Components cannot be reused, thereby causing a barrier to the development efficiency.

Embodiments of the present disclosure provide a component generation method, a component generation apparatus, a computer system, a computer-readable storage medium, and a computer program product. Calling a component generation framework to generate an initial virtual document object model, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or function component; and rendering the initial virtual document object model, generating a component comprising: rendering the basic hypertext markup language tag by utilizing a first rendering method; and rendering the function component by using a second rendering method.

Fig. 1 schematically illustrates an exemplary system architecture 100 to which a component generation method may be applied, according to an embodiment of the disclosure. It should be noted that fig. 1 is only an example of a system architecture to which the embodiments of the present disclosure may be applied to help those skilled in the art understand the technical content of the present disclosure, and does not mean that the embodiments of the present disclosure may not be applied to other devices, systems, environments or scenarios.

As shown in fig. 1, the system architecture 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired and/or wireless communication links, and so forth.

The user may use the terminal devices 101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. Various communication client applications, development platform applications, and the like can be installed on the terminal devices 101, 102, and 103.

The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.

The server 105 may be a server that provides various services, such as a background management server that provides support for information requested by a user using the terminal device 101, 102, 103. The background management server may analyze and perform other processing on the received data such as the user request, and feed back a processing result (e.g., a webpage, a component, information, or data obtained or generated according to the user request) to the terminal device.

It should be noted that the component generation method provided by the embodiment of the present disclosure may be generally executed by the server 105. Accordingly, the component generation apparatus provided by the embodiments of the present disclosure may be generally disposed in the server 105. The component generation method provided by the embodiments of the present disclosure may also be performed by a server or a server cluster that is different from the server 105 and is capable of communicating with the terminal devices 101, 102, 103 and/or the server 105. Accordingly, the component generation apparatus provided by the embodiment of the present disclosure may also be disposed in a server or a server cluster different from the server 105 and capable of communicating with the terminal devices 101, 102, 103 and/or the server 105. Alternatively, the component generation method provided by the embodiment of the present disclosure may also be executed by the terminal device 101, 102, or 103, or may also be executed by another terminal device different from the terminal device 101, 102, or 103. Accordingly, the component generating apparatus provided in the embodiments of the present disclosure may also be disposed in the terminal device 101, 102, or 103, or disposed in another terminal device different from the terminal device 101, 102, or 103.

For example, the component generation framework may be originally stored in any of terminal devices 101, 102, or 103 (e.g., terminal device 101, but not limited to), or stored on an external storage device and may be imported into terminal device 101. Then, the terminal device 101 may locally execute the component generation method provided by the embodiment of the present disclosure, or send the component generation framework to another terminal device, a server, or a server cluster, and execute the component generation method provided by the embodiment of the present disclosure by another terminal device, a server, or a server cluster that receives the component generation framework.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

FIG. 2 schematically shows a flow diagram of a component generation method according to an embodiment of the present disclosure.

As shown in fig. 2, the method includes operations S201 to S202.

In operation S201, a component generation framework is called to generate an initial virtual document object model, where the component generation framework includes a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or function component.

According to the embodiment of the present disclosure, the component generation framework may be, for example, a JavaScript framework for constructing Web Components, and the method corresponding to the framework may include, for example, developing a component based on efficient JSX (a JavaScript syntax extension, which is expressed as a format in which JavaScript and XML are combined, and is applied to fact and fact-like frames, and the format thereof is compared with a template language), converting the component developed by JSX into a virtual DOM (i.e., the initial virtual document object model), and finally rendering the virtual DOM into Web Components. The basic HTML tag may be, for example, a character string, a picture, or the like, and the function Component may be, for example, a Web Component existing in a mode of a function and autonomously developed by a developer.

In operation S202, the initial virtual document object model is rendered, generating a component.

According to an embodiment of the present disclosure, the above operation S202 may include, for example, operation S202-1 and operation S202-2.

In operation S202-1, a base hypertext markup language tag is rendered using a first rendering method.

In operation S202-2, the function component is rendered using a second rendering method.

According to the embodiment of the disclosure, due to the introduction of the front-end component generation framework, the virtual document object model can be directly obtained, the Web Components can be directly generated by the virtual document object model through rendering, the whole process can be realized by the component generation framework, the manual operation is simplified, the technical problems of complicated process and high possibility of error caused by manual operation in the traditional component development process are solved, and the technical effect of realizing the Components with high universality on the basis of simplifying the manual operation is achieved.

The method shown in fig. 2 is further described with reference to fig. 3-4 in conjunction with specific embodiments.

Fig. 3 schematically illustrates a rendering schematic of a component generation method according to an embodiment of the present disclosure.

As shown in fig. 3, it is demonstrated that the component generation method described above may include, for example, two processes of a generation process and a rendering process of a virtual DOM, by which the purpose of rendering JSX Components into Web Components can be finally achieved.

According to an embodiment of the present disclosure, referring to fig. 3, where a JSX component is, for example, a component developed based on a JSX syntax, the generation process of the virtual DOM may be expressed as: for a preset JSX component, the preset JSX component is compiled into executable JS code by using babel, and then a virtual DOM tree is generated by executing a createElement method provided by a component generation framework.

According to the embodiment of the present disclosure, the virtual DOM tree obtained through the generation process of the virtual DOM may include, for example, a plurality of virtual DOM, and each virtual DOM may be, for example, an object including a value of type (tag name or function name), props (attribute), child component, $ DOM (component rendered real DOM), and $ typeof (component type). For each virtual DOM, it can be rendered into a real DOM through a subsequent rendering process, for example, so as to obtain the finally rendered Web Components.

According to an embodiment of the present disclosure, referring to fig. 3, upon obtaining the virtual DOM, a rendering process for rendering the virtual DOM may include operations S301 to S307, for example.

According to the embodiment of the present disclosure, the virtual DOM is mainly divided into two types, i.e., a base HTML tag type and a function component type, and different rendering methods need to be correspondingly implemented for different types of virtual DOM, for example, as may include the first rendering method and the second rendering method described above. Therefore, at the beginning of rendering the virtual DOM, it may be determined whether the type of the virtual DOM belongs to the base HTML tag or the function component, for example, by first determining whether the base HTML tag is in operation S301, so as to implement the corresponding rendering method (the first rendering method or the second rendering method) in a targeted manner.

According to the embodiment of the present disclosure, in the case that the determination result of the operation S301 is yes, that is, in the case that it is determined that the virtual DOM to be rendered is the base HTML tag, for example, the operation S202-1 may be performed, and in the case that the determination result of the operation S301 is no, that is, in the case that it is determined that the virtual DOM to be rendered is a function component, for example, the operation S202-2 may be performed.

According to an embodiment of the present disclosure, the above operation S202-1 may include, for example: calling an element creating method of a native component of the browser to create a tag element aiming at a basic hypertext markup language tag; and inserting the tag element into the shadow document object model corresponding to the underlying hypertext markup language tag.

According to an embodiment of the present disclosure, as shown in fig. 3 in which operations S301 to S302 correspond to, in the case where the determination result of the above operation S301 is yes, the above operation S202-1 may correspond to, for example, operation S302 in fig. 3: and creating an HTML element through creatElement, and realizing the rendering of the basic HTML label.

According to an embodiment of the present disclosure, regarding the above operation S302, for example, it may be expressed as: calling a createElement method (namely the element creating method) on the Document object to create a tag element, and inserting the element into Shadow Dom (Shadow DOM) of a component (namely the Shadow document object model corresponding to the basic hypertext markup language tag) where the current element is located.

It should be noted that, unlike the createlement method provided by the component generation framework in generating the virtual DOM tree, the createlement method in operation S302 is provided for the browser, and the former is only used for creating tags, and the latter can be used for creating Web Components including basic HTML tags and function Components.

According to an embodiment of the present disclosure, the above operation S202-2 may include, for example: calling a definition method in a custom tag of the browser native component to create a custom element; calling a method which is carried by a user-defined element and used for mounting a shadow document object model to create a shadow document object model; and inserting the custom element into the shadow document object model.

According to an embodiment of the present disclosure, as shown in fig. 3 in which operations S301 and S303 correspond to each other, in a case that a determination result of the operation S301 is no, that is, a virtual DOM that needs to be rendered is a function component, the operation S202-1 may correspond to, for example, operation S303 in fig. 3: and calling methods such as Custom Elements and Shadow DOM to create a component.

According to an embodiment of the present disclosure, regarding operation S303 described above, for example, it may be expressed as: calling a define method of Custom Elements (namely a definition method in the Custom tags) to create a Custom element, wherein the name of the Custom element is connected with a middle line (such as my-component) to avoid collision with the HTML tag (namely the basic HTML tag); and then creating a Shadow Dom by calling an attachShadow method (namely the method related to mounting the Shadow document object model) carried by the custom element, wherein the Shadow Dom serves as a container, and all tag elements (such as elements in a basic HTML tag) and custom elements (such as elements in a function component) of the current component are inserted into the Shadow Dom, so that the current component is isolated from the outside, and the style and the selector can be prevented from being polluted. By performing this operation S303, for example, the initial Web Components that are preliminarily rendered for the virtual DOM of the function component type are obtained.

It should be noted that the initial Web Components may further include a plurality of child sub-Components, each child sub-component may be a basic HTML tag or a function component, for example, and the rendering process may further include continuing rendering each sub-component in the initial Web Components by using a corresponding rendering method (such as operation S302 or S303), so as to finally obtain fully rendered Web Components.

Through the embodiment of the disclosure, the JSX component can be converted into the virtual DOM, and APIs such as Custom Elements and Shadow DOM can be used for rendering the virtual DOM into Web Components, so that manual operation is reduced, and development efficiency is improved.

According to an embodiment of the present disclosure, the function component may include, for example, a rendering function, and the operation S202-2 may further include: obtaining a return value of a rendering function after rendering the function component; and inserting the return value into the shadow document object model.

According to the embodiment of the present disclosure, each function component needs to declare a render function (i.e., the above-mentioned render function), and the rendering method of the render function may include, for example, the above-mentioned operation S302 or S303, where a return value of the render function is a common DOM, and the return value may be used as a sub-element of the function component and is finally inserted into a Shadow DOM of a base HTML tag and other components corresponding to the function component.

It should be noted that, for the entire virtual DOM tree, rendering may be performed sequentially in a top-down manner, and for the function components in the virtual DOM tree, rendering may be performed in a loop rendering manner until rendering of all components including the basic HTML tag and the function components in the entire virtual DOM tree is completed.

Through the embodiment of the disclosure, the JavaScript framework for constructing the Web Components is realized, and the construction of the Web Components can be automatically realized by combining a top-down rendering mode.

According to an embodiment of the present disclosure, the function component includes a sharing style, and the operation S202-2 may further include: determining a predetermined pattern in the descendant component, wherein the descendant component is subordinate to the function component; under the condition that the preset style belongs to the sharing style, acquiring a target name of a function component for declaring the sharing style; creating a style label of the descendant component according to the target name; and inserting style tags into the shadow document object model corresponding to the descendant component. To enable style sharing between Web Components.

According to an embodiment of the present disclosure, the predetermined style is, for example, a sharing style that the descendant component wishes to use, and as shown in fig. 3, in a case that the determination result of the operation S301 is no, the operation S202-1 may further include, for example, operations S304 to S307. For a known function component, it may first be determined whether to share a pattern through operation S304, and if the determination result of operation S304 is yes, operation S305 may be executed to transfer the pattern downward, and if a subsequent component needs to be rendered, it may first be determined whether there is a sharing pattern issued by an upper level through operation S306, and if the determination result of operation S306 is yes, operation S307 may be executed to insert the sharing pattern into the subsequent component, where the upper level in operation S306 may be, for example, a function component that executes operation S305, and the sharing pattern inserted in operation S307 may be, for example, a sharing pattern determined in operation S304. By performing the aforementioned operations S304 to S307 for each function component or standby component, style sharing between Web Components can be achieved.

According to an embodiment of the present disclosure, regarding operations S304 to S305 described above, for example, it may be expressed as: the function component shares the current component style in a way of declaring the static property shareStyle as true in advance, and the shared current component style is, for example, the shared style, so that the shared style can be passed down layer by layer along with the rendered descendant components in a character string form. Regarding operations S306 to S307 described above, for example, it may be expressed as: in the case where the descendant component wishes to use the shared style, the shared style that is desired to be used can be specified by declaring the static property applyStyle. Wherein, the applyStyle may be a character string or a character string array, the character string content may be, for example, the name of an upper component of the shared style (i.e., the above target name), and the descendant component may create a style tag (i.e., the above style tag) from the shared style character string and insert the style tag into the ShadowDom (i.e., the shadow document object model corresponding to the above descendant component).

By the embodiment of the disclosure, the current component style is transmitted downwards in a mode of declaring the sharing style when the component is rendered, and the descendant component can declare the sharing style transmitted by the upper layer, so that style multiplexing among Web Components can be realized, and the development efficiency is further improved.

According to an embodiment of the present disclosure, in order to enable the JavaScript frame to further implement functions of updating and uninstalling, the component generation method may further include: under the condition that component updating exists, calling a component generation framework to generate a target virtual document object model; comparing the target virtual document object model with the initial virtual document object model to determine that an updated target component exists; under the condition that the types of the target component and the initial component corresponding to the target component are the same, updating the initial component into the target component; and in the case that the types of the target component and the initial component corresponding to the target component are different, uninstalling the initial component and rendering the target component.

FIG. 4 schematically illustrates an update schematic of a component generation method according to an embodiment of the disclosure.

According to an embodiment of the present disclosure, referring to fig. 4, in the case where there is a component update, the update may be performed using, for example, a Diff algorithm. The update process may be represented, for example, as: the obtained JavaScript frame may generate a virtual DOM tree during rendering, that is, the initial virtual document object model may be represented as a tree diagram on the left side of fig. 4, for example; when the component is updated, a new virtual DOM tree is generated, i.e. the target virtual document object model, which can be represented in the form of a tree graph as shown in the right side of fig. 4, for example; comparing the two layer by layer; updating is performed on the components of the same type, for example, A, B, D, E in fig. 4 is a component of the same type, and the attributes of the component can be directly updated; for different types of components, the old component is unloaded and the new component is rendered, as in FIG. 4 where C, F, G and X, Y, Z belong to different types of components, component C and its subcomponent F, G are unloaded and component X and its subcomponent Y, Z are rendered.

It should be noted that the current component and its subcomponents are deleted when the old component is uninstalled.

By adopting the above embodiment of the disclosure, the Web Components are updated by adopting the diff algorithm, and developers can realize the rendering and updating of the Web Components by operating data without operating the DOM. Meanwhile, developers do not need to master the knowledge of the Web Components any more, and only need to develop Components according to the JSX standard, and finally the Components can be rendered into the Web Components by the JavaScript framework.

Fig. 5 schematically shows a block diagram of a component generation apparatus according to an embodiment of the present disclosure.

As shown in fig. 5, the component generating apparatus 500 includes a first calling module 510 and a rendering module 520, wherein the rendering module 520 further includes a first rendering unit 521 and a second rendering unit 522.

The first calling module 510 is configured to call a component generation framework to generate a virtual document object model, where the component generation framework includes a first rendering method and a second rendering method, and the virtual document object model is a basic hypertext markup language tag or function component.

And a rendering module 520, configured to render the virtual document object model to generate a component.

A first rendering unit 521, configured to render the base hypertext markup language tag by using a first rendering method.

And a second rendering unit 522, configured to render the function component by using a second rendering method.

According to the embodiment of the disclosure, an initial virtual document object model is generated by adopting a calling component generation framework, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or a function component; and rendering the initial virtual document object model, generating a component comprising: rendering the basic hypertext markup language tag by utilizing a first rendering method; the technical means for rendering the function component by using the second rendering method is characterized in that a front-end component generating frame is introduced, a virtual document object model can be directly obtained, the component is directly generated from the virtual document object model through rendering, the whole process can be realized by the component generating frame, and manual operation is simplified, so that the technical problems of complicated process and high possibility of error caused by manual operation in the component development process are at least partially solved, and the technical effect of realizing the component with high universality on the basis of simplifying the manual operation is further achieved.

According to an embodiment of the present disclosure, the first rendering unit includes a first creating subunit and a first inserting subunit.

The first creating subunit is used for calling an element creating method of the browser native component to create a tag element aiming at the basic hypertext markup language tag.

A first inserting subunit, configured to insert the tag element into the shadow document object model corresponding to the basic hypertext markup language tag.

According to an embodiment of the present disclosure, the second rendering unit includes a second creating subunit, a third creating subunit, and a second inserting subunit.

And the second creating subunit is used for calling a definition method in the custom tag of the browser native component to create the custom element.

And the third creating subunit is used for calling a method which is carried by the user-defined element and is used for mounting the shadow document object model to create the shadow document object model.

And the second inserting subunit is used for inserting the custom element into the shadow document object model.

According to an embodiment of the present disclosure, the function component includes a rendering function, and the second rendering unit includes a first obtaining subunit and a third inserting subunit.

And the first acquisition subunit is used for acquiring a return value after the rendering function renders the function component.

A third insertion subunit, configured to insert the return value into the shadow document object model.

According to an embodiment of the present disclosure, the function component includes a sharing style, and the second rendering unit includes a determining subunit, a second obtaining subunit, a fourth creating subunit, and a fourth inserting subunit.

A determining subunit for determining a predetermined pattern in the descendant component, wherein the descendant component is subordinate to the function component.

And a second acquiring subunit, configured to acquire, when the predetermined style belongs to the shared style, a target name of a function component that declares the shared style.

And the fourth creating subunit is used for creating the style label of the descendant component according to the target name.

And the fourth inserting subunit is used for inserting the style label into the shadow document object model corresponding to the descendant component.

According to the embodiment of the disclosure, the component generation apparatus further includes a second calling module, a comparing module, a first updating module, and a second updating module.

And the second calling module is used for calling the component generating framework to generate the target virtual document object model under the condition that the component update exists.

And the comparison module is used for comparing the target virtual document object model with the initial virtual document object model to determine that the updated target component exists.

And the first updating module is used for updating the initial component to the target component under the condition that the types of the target component and the initial component corresponding to the target component are the same.

And the second updating module is used for unloading the initial component and rendering the target component under the condition that the types of the target component and the initial component corresponding to the target component are different.

Any of the modules, units, sub-units, or at least part of the functionality of any of them according to embodiments of the present disclosure may be implemented in one module. Any one or more of the modules, units and sub-units according to the embodiments of the present disclosure may be implemented by being split into a plurality of modules. Any one or more of the modules, units, sub-units according to the embodiments of the present disclosure may be implemented at least partially as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in any other reasonable manner of hardware or firmware by integrating or packaging a circuit, or in any one of three implementations of software, hardware, and firmware, or in any suitable combination of any of them. Alternatively, one or more of the modules, units, sub-units according to embodiments of the disclosure may be at least partially implemented as computer program modules, which, when executed, may perform the corresponding functions.

For example, any number of the first calling module 510 and the rendering module 520 may be combined and implemented in one module/unit/sub-unit, or any one of the modules/units/sub-units may be split into a plurality of modules/units/sub-units. Alternatively, at least part of the functionality of one or more of these modules/units/sub-units may be combined with at least part of the functionality of other modules/units/sub-units and implemented in one module/unit/sub-unit. According to an embodiment of the present disclosure, at least one of the first calling module 510 and the rendering module 520440 may be implemented at least in part as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in hardware or firmware by any other reasonable manner of integrating or packaging a circuit, or in any one of or a suitable combination of software, hardware, and firmware. Alternatively, at least one of the first calling module 510 and the rendering module 520 may be at least partially implemented as a computer program module, which when executed, may perform a corresponding function.

It should be noted that the component generation apparatus part in the embodiment of the present disclosure corresponds to the component generation method part in the embodiment of the present disclosure, and the description of the component generation apparatus part specifically refers to the component generation method part, which is not described herein again.

FIG. 6 schematically shows a block diagram of a computer system suitable for implementing the component generation method according to an embodiment of the present disclosure. The computer system illustrated in FIG. 6 is only one example and should not impose any limitations on the scope of use or functionality of embodiments of the disclosure.

As shown in fig. 6, a computer system 600 according to an embodiment of the present disclosure includes a processor 601, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. Processor 601 may include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor and/or associated chipset, and/or a special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), among others. The processor 601 may also include onboard memory for caching purposes. Processor 601 may include a single processing unit or multiple processing units for performing different actions of a method flow according to embodiments of the disclosure.

In the RAM 603, various programs and data necessary for the operation of the system 600 are stored. The processor 601, the ROM602, and the RAM 603 are connected to each other via a bus 604. The processor 601 performs various operations of the method flows according to the embodiments of the present disclosure by executing programs in the ROM602 and/or RAM 603. It is to be noted that the programs may also be stored in one or more memories other than the ROM602 and RAM 603. The processor 601 may also perform various operations of the method flows according to embodiments of the present disclosure by executing programs stored in the one or more memories.

According to an embodiment of the present disclosure, system 600 may also include an input/output (I/O) interface 605, input/output (I/O) interface 605 also connected to bus 604. The system 600 may also include one or more of the following components connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted in the storage section 608 as necessary.

According to embodiments of the present disclosure, method flows according to embodiments of the present disclosure may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable storage medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611. The computer program, when executed by the processor 601, performs the above-described functions defined in the system of the embodiments of the present disclosure. The systems, devices, apparatuses, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the present disclosure.

The present disclosure also provides a computer-readable storage medium, which may be contained in the apparatus/device/system described in the above embodiments; or may exist separately and not be assembled into the device/apparatus/system. The computer-readable storage medium carries one or more programs which, when executed, implement the method according to an embodiment of the disclosure.

According to an embodiment of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium. Examples may include, but are not limited to: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

For example, according to embodiments of the present disclosure, a computer-readable storage medium may include the ROM602 and/or RAM 603 described above and/or one or more memories other than the ROM602 and RAM 603.

Embodiments of the present disclosure also include a computer program product comprising a computer program containing program code for performing the method provided by the embodiments of the present disclosure, when the computer program product is run on an electronic device, the program code being adapted to cause the electronic device to carry out the component generation method provided by the embodiments of the present disclosure.

The computer program, when executed by the processor 601, performs the above-described functions defined in the system/apparatus of the embodiments of the present disclosure. The systems, apparatuses, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the present disclosure.

In one embodiment, the computer program may be hosted on a tangible storage medium such as an optical storage device, a magnetic storage device, or the like. In another embodiment, the computer program may also be transmitted, distributed in the form of a signal on a network medium, downloaded and installed through the communication section 609, and/or installed from the removable medium 611. The computer program containing program code may be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

In accordance with embodiments of the present disclosure, program code for executing computer programs provided by embodiments of the present disclosure may be written in any combination of one or more programming languages, and in particular, these computer programs may be implemented using high level procedural and/or object oriented programming languages, and/or assembly/machine languages. The programming language includes, but is not limited to, programming languages such as Java, C + +, python, the "C" language, or the like. The program code may execute entirely on the user computing device, partly on the user device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., through the internet using an internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions. Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not expressly recited in the present disclosure. In particular, various combinations and/or combinations of the features recited in the various embodiments and/or claims of the present disclosure may be made without departing from the spirit or teaching of the present disclosure. All such combinations and/or associations are within the scope of the present disclosure.

The embodiments of the present disclosure have been described above. However, these examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described separately above, this does not mean that the measures in the embodiments cannot be used in advantageous combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be devised by those skilled in the art without departing from the scope of the present disclosure, and such alternatives and modifications are intended to be within the scope of the present disclosure.

Claims (10)

1. A component generation method, comprising:

calling a component generation framework to generate an initial virtual document object model, wherein the component generation framework comprises a first rendering method and a second rendering method, and the initial virtual document object model is a basic hypertext markup language tag or function component; and

rendering the initial virtual document object model, generating a component, comprising:

rendering the base hypertext markup language tag using the first rendering method;

and rendering the function component by using the second rendering method.

2. The method of claim 1, wherein rendering the base hypertext markup language tag using the first rendering method comprises:

calling an element creating method of a native component of the browser to create a tag element aiming at the basic hypertext markup language tag; and

inserting the tag element into a shadow document object model corresponding to the base hypertext markup language tag.

3. The method of claim 1, wherein rendering the functional component using the second rendering method comprises:

calling a definition method in a custom tag of the browser native component to create a custom element;

calling a method which is carried by the user-defined element and used for mounting a shadow document object model to create a shadow document object model; and

inserting the custom element into the shadow document object model.

4. The method of claim 3, wherein the function component includes a rendering function, rendering the function component using the second rendering method including:

obtaining a return value of the rendering function after rendering the function component; and

inserting the return value into the shadow document object model.

5. The method of claim 1, wherein the functional component includes a shared style therein, rendering the functional component using the second rendering method includes:

determining a predetermined pattern in a descendant component, wherein the descendant component is subordinate to the function component;

acquiring a target name of a function component declaring the shared style under the condition that the preset style belongs to the shared style;

creating a style label for the descendant component according to the target name; and

and inserting the style tag into a shadow document object model corresponding to the descendant component.

6. The method of claim 1, further comprising:

under the condition that component updating exists, calling the component generation framework to generate a target virtual document object model;

comparing the target virtual document object model with the initial virtual document object model to determine that an updated target component exists;

updating the initial component to the target component when the target component and the initial component corresponding to the target component are the same in type; and

and unloading the initial component and rendering the target component under the condition that the types of the target component and the initial component corresponding to the target component are different.

7. A component generation apparatus comprising:

the system comprises a first calling module, a second calling module and a third calling module, wherein the first calling module is used for calling a component generating framework to generate a virtual document object model, the component generating framework comprises a first rendering method and a second rendering method, and the virtual document object model is a basic hypertext markup language tag or a function component; and

the rendering module is used for rendering the virtual document object model to generate a component;

wherein the rendering module comprises:

a first rendering unit, configured to render the basic hypertext markup language tag by using the first rendering method;

and the second rendering unit is used for rendering the function component by using the second rendering method.

8. A computer system, comprising:

one or more processors;

a memory for storing one or more programs,

wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of any of claims 1-6.

9. A computer readable storage medium having stored thereon executable instructions which, when executed by a processor, cause the processor to carry out the method of any one of claims 1 to 6.

10. A computer program product comprising computer executable instructions for implementing the method of any one of claims 1 to 6 when executed.

Images