Component Processing Method and Device

Abstract

The present invention discloses a component processing method and apparatus. Among them, the method includes: obtaining an original component corresponding to an original framework, wherein the compilation data obtained after compiling the original component allows direct running in a browser; calling a preset interface to create a target component, wherein the target component allows direct running in a browser; rendering the original component to obtain a rendering result; and mounting the rendering result to the target component. The present invention solves the technical problem in the related art that the reuse of basic components requires developing different component libraries for different frameworks, resulting in relatively high development and maintenance costs.

Description

Technical Field

[0001] The present invention relates to the field of browser pages, and in particular, to a component processing method and apparatus. Background Art

[0002] In the front-end field, different projects may use different frameworks. If you want to reuse basic components between projects with different frameworks, you need to develop multiple sets of component libraries based on these frameworks for multiple frameworks, which makes development very inconvenient and incurs high development labor costs and time costs.

[0003] In response to the above problems, no effective solution has been proposed yet. Summary of the Invention

[0004] Embodiments of the present invention provide a component processing method and apparatus to at least solve the technical problem in related technologies that the reuse of basic components requires developing different component libraries for different frameworks, resulting in high development and maintenance costs.

[0005] According to one aspect of the embodiments of the present invention, a component processing method is provided, including: obtaining an original component corresponding to an original framework, where the compiled data obtained after compiling the original component allows direct running in a browser; calling a preset interface to create a target component, where the target component allows direct running in the browser; rendering the original component to obtain a rendering result; and mounting the rendering result to the target component.

[0006] Optionally, calling a preset interface to create a target component includes: creating a target class object corresponding to the target component, where the target class object inherits from a preset class object built into the browser, and the target class object is used to mount the rendering result; defining the component name of the target component through the registration function of the preset interface, and registering the target class object to the global scope of the browser.

[0007] Optionally, mounting the rendering result to the target component includes: creating the original component in the mounting callback function of the target class object and mounting the rendering result.

[0008] Optionally, after mounting the rendering result to the target component, the method further includes: determining a monitoring attribute of the original component; in response to a change in the monitoring attribute, obtaining a target value of the monitoring attribute, where the target value is the attribute value of the monitoring attribute after the change in the monitoring attribute; in response to calling an attribute callback function of the target component, passing the target value into the original component; re-rendering the original component based on the target value to obtain a re-rendering result; and mounting the re-rendering result to the target component.

[0009] Optionally, determining the monitoring attribute of the original component includes: obtaining the attribute name of the monitoring attribute; and determining the monitoring attribute based on the attribute name.

[0010] Optionally, after mounting the rendering result to the target component, the method further includes: calling a constructor to create a proxy object, where the proxy object is used to proxy the target object corresponding to the target component; monitoring a preset operation of the target component through the proxy object; in response to determining that the state of the target object has changed based on the preset operation, calling a characteristic callback function of the proxy object to update the state of the original component, obtaining an updated original component; rendering the updated original component to obtain a rendering result.

[0011] Optionally, mounting the rendering result to the target component includes: calling a mounting method corresponding to the original framework to mount the rendering result to the target component.

[0012] Optionally, rendering the original component to obtain a rendering result includes: calling a rendering method corresponding to the original framework to render the original component to obtain a rendering result.

[0013] According to another aspect of the embodiments of the present invention, there is also provided a component processing device, including: a component acquisition module, configured to acquire an original component corresponding to an original framework, where compilation data obtained after compiling the original component allows direct running in a browser; a component creation module, configured to call a preset interface to create a target component, where the target component allows direct running in the browser; a rendering module, configured to render the original component to obtain a rendering result; a mounting module, configured to mount the rendering result to the target component.

[0014] Optionally, the creation module includes: a creation unit, configured to create a target class object corresponding to the target component, where the target class object inherits from a preset class object built into the browser, and the target class object is used to mount the rendering result; a registration unit, configured to define a component name of the target component through a registration function of the preset interface and register the target class object to the global scope of the browser.

[0015] Optionally, the rendering module is further configured to create the original component and mount the rendering result in a mounting callback function of the target class object.

[0016] Optionally, the device further includes: a first monitoring module, configured to determine a monitoring attribute of the original component after mounting the rendering result to the target component; a parameter acquisition module, configured to obtain a target value of the monitoring attribute in response to a change in the monitoring attribute, where the target value is an attribute value of the monitoring attribute after the change in the monitoring attribute; a parameter transfer module, configured to pass the target value into the original component in response to calling an attribute callback function of the target component; the rendering module is further configured to re-render the original component based on the target value to obtain a re-rendered result; the mounting module is further configured to mount the re-rendered result to the target component.

[0017] Optionally, the first monitoring module includes: an obtaining unit configured to obtain the attribute name of the monitoring attribute; and a determining unit configured to determine the monitoring attribute based on the attribute name.

[0018] Optionally, the apparatus further includes: an object creation module configured to, after mounting the rendering result to the target component, call a constructor to create a proxy object, where the proxy object is used to proxy the target object corresponding to the target component; a second monitoring module configured to monitor a preset operation of the target component through the proxy object; an update module configured to, in response to determining that the state of the target object has changed based on the preset operation, call a characteristic callback function of the proxy object to update the state of the original component, so as to obtain an updated original component; and the rendering module is further configured to render the updated original component to obtain a rendering result.

[0019] Optionally, the mounting module is further configured to call a mounting method corresponding to the original framework to mount the rendering result to the target component.

[0020] Optionally, the rendering module is further configured to call a rendering method corresponding to the original framework to render the original component to obtain a rendering result.

[0021] According to another aspect of the embodiments of the present invention, there is also provided a computer-readable storage medium. The computer-readable storage medium includes a stored program, where, when the program runs, it controls a device where the computer-readable storage medium is located to execute the component processing method of any one of the above.

[0022] According to another aspect of the embodiments of the present invention, there is also provided an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor; where the memory stores a program that can be run by the at least one processor, and when the program is run by the at least one processor, it executes the component processing method of any one of the above.

[0023] In the embodiments of the present invention, after obtaining the original component corresponding to the original framework, a preset interface is called to create a target component, and the original component is rendered, and the rendering result is mounted to the target component. It is easy to note that since the original component is not allowed to run directly in the browser and needs to be compiled by a compilation tool corresponding to the original framework to obtain compilation data before it is allowed to run directly in the browser, while the target component is allowed to run directly in the browser, that is, the target component is a general component and is not affected by different frameworks. Thus, the original component of any framework is encapsulated as a general target component, facilitating code reuse and component sharing between projects of different frameworks, achieving the technical effects of improving the reuse rate of the original component, reducing development and maintenance costs, and enhancing development efficiency, and further solving the technical problem in the related art that the reuse of basic components requires developing different component libraries for different frameworks, resulting in relatively high development and maintenance costs. Description of the Drawings

[0024] The accompanying drawings described herein are used to provide a further understanding of the present invention and form a part of this application. The schematic embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation to the present invention. In the drawings:

[0025] Figure 1 is a flowchart of a component processing method according to an embodiment of the present invention;

[0026] Figure 2 is a schematic diagram of a component processing device according to an embodiment of the present invention. Detailed Embodiments

[0027] In order to enable those skilled in the art to better understand the solution of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0028] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above accompanying drawings are used to distinguish similar objects and do not necessarily need to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of the present invention described herein can be implemented in an order different from those illustrated or described herein. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily need to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0029] Code reuse is an important consideration in the process of Web application development. However, in a Web page, a reusable module is mostly complex and usually includes an HTML (Hyper Text Markup Language) structure, CSS (Cascading Style Sheets) styles, and Javascript interaction logic. It is difficult to encapsulate and integrate using traditional methods, and it is easy to cause confusion. In addition, it is usually necessary to call additional Javascript methods to use the encapsulated components, which is not as intuitive as native HTML tags.

[0030] Web Components, namely web components, are a set of technologies natively supported by modern browsers. They do not rely on any framework and can be used without compilation. They allow the creation of reusable and customizable page components, which can be used as conveniently as native HTML tags in any web application or page. Web Components consists of the following three main technologies, and the three technologies can be used together to create custom elements that encapsulate functionality:

[0031] Custom elements: A set of JavaScript APIs used to define custom elements and their behaviors, which can then be used in applications like native HTML tags. For example, in native HTML, there is an "img" tag used to display images. A custom element for lazy-loading images can be encapsulated, named "lazy-img", and then it can be directly used in HTML as " <lazy-img>" label.

[0032] Shadow DOM: A set of JavaScript APIs used to isolate the styles and behaviors inside custom elements, so that the styles inside the component will not be polluted externally, and conversely, it can also prevent the styles inside the component from polluting the global styles. Therefore, there will be no conflict with other modules.

[0033] HTML templates: Define HTML fragments, which can then be reused multiple times as the basis for the structure of custom elements.

[0034] Therefore, many front-end frameworks are provided in the related art, such as Vue, React, Angular, etc. Different conversion schemes can be adopted to encapsulate existing components into Web components, thereby reducing the development cost. Among them, the Vue CLI tool provides a build mode that can compile components into Web Components; Preact Web Components can register React components as Web Components by introducing an additional conversion package.

[0035] However, the above-mentioned solutions have the following disadvantages: The above two conversion schemes have a high degree of dependence on the framework itself, can only convert components of one framework, and cannot be applied to various different frameworks; The Vue CLI solution requires setting up a corresponding development environment and installing the corresponding compilation toolchain, resulting in inconvenience of this solution; The Vue CLI solution requires recompiling the source code, resulting in difficulty in implementing this solution.

[0036] According to an embodiment of the present invention, an embodiment of a component processing method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. And, although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than here.

[0037] Figure 1 is a schematic diagram of the flow of a component processing method provided according to an embodiment of the present invention, as Figure 1 shown, the method includes the following steps:

[0038] Step S102, obtain the original component corresponding to the original framework, where the compilation data obtained after compiling the original component allows it to run directly in the browser.

[0039] The multiple preset frameworks in the above steps can be different frameworks adopted in current project development. For example, Bootstrap, Layui, Muse UI, View UI, jQuery UI, Easy UI, antd, etc., but not limited to these; the original components can be components in the front-end field that currently need to be encapsulated into Web Components. For example, they can be Vue components, React components, Angular components, Svelte components, etc., but not limited to these. The original framework can be the framework adopted by the original components, specifically any one of the multiple preset frameworks.

[0040] It should be noted that the original components corresponding to the original framework are written in the specific language corresponding to the original framework and are not in the Web standard syntax, so the browser cannot recognize them. Therefore, they cannot be directly run in the browser. It is necessary to use the compilation tool corresponding to the original framework to compile the original components into content that the browser can recognize before they can be run by the browser. Therefore, using the original components corresponding to the original framework requires introducing additional runtime code.

[0041] In an optional embodiment, when developers need to achieve code reuse and component sharing between projects of different frameworks, developers can upload the components that need to be reused and shared to the server, and the server quickly encapsulates the original components.

[0042] Step S104, call a preset interface to create a target component, where the target component is allowed to be directly run in the browser.

[0043] The target component in the above steps can be a custom Web Component. Web Components are components natively supported by modern browsers, do not depend on any framework and do not need to be compiled. That is, no preprocessing is required, and no additional runtime code needs to be introduced to be directly run in the browser. Therefore, it can be used in any framework. The preset interface can be an interface related to the HTML custom element standard.

[0044] In an optional embodiment, the API of Custom Elements can be used to define the target component through the define method of the Custom Elements object. The implementation code is as follows:

[0045] class MyElement extends HTMLElement{

[0046] / *…* /

[0047] }

[0048] customElements.define("my-element", MyElement)

[0049] This method accepts two parameters. The first parameter is the name of the target component ("my-element"), and the second parameter is the class (MyElement). This class can define the properties of the target component using get and set methods.

[0050] Step S106: Render the original component to obtain a rendering result.

[0051] For front-end components, rendering is mainly responsible for constructing and generating the HTML structure, initializing styles, and listening for events, etc. In an optional embodiment, the corresponding rendering method of the original framework can be directly called to render the original component.

[0052] Step S108: Mount the rendering result to the target component.

[0053] For front-end components, the main responsibility of mounting is to add the rendered HTML fragment to the page so that the fragment can be displayed on the page.

[0054] In an optional embodiment, the corresponding mounting method of the original framework can be directly called for mounting. For example, for Vue components, the $mount method can be called for mounting; for React components, the ReactDOM.render method can be called for mounting; for Angular components, the bootstrap() method can be called for mounting, and the first parameter passed to this method is the mounting target; for Svelte components, new Component() can be called to create and mount, and target is specified in the parameters to represent mounting the rendering result.

[0055] Through the above steps, after obtaining the original component corresponding to the original framework, a target component is created by calling a preset interface, the original component is rendered, and the rendering result is mounted to the target component. It is easy to notice that since the original component is not allowed to run directly in the browser, it needs to be compiled by the compilation tool corresponding to the original framework to obtain compilation data before it is allowed to run directly in the browser, while the target component is allowed to run directly in the browser. That is to say, the target component is a general component and is not affected by different frameworks. Thus, the original components of any framework are encapsulated into general target components, facilitating code reuse and component sharing between projects of different frameworks, achieving the technical effects of improving the reuse rate of the original components, reducing development and maintenance costs, and enhancing development efficiency, and further solving the technical problem in the related art that the reuse of basic components requires developing different component libraries for different frameworks, resulting in relatively high development and maintenance costs.

[0056] Optionally, calling a preset interface to create a target component includes: creating a target class object corresponding to the target component, where the target class object inherits from a preset class object built into the browser, and the target class object is used to mount the rendering result; defining the component name of the target component through the registration function of the preset interface, and registering the target class object to the global scope of the browser.

[0057] The target class object in the above steps can specify the functions of a custom Web component, and the class name of the target class object can be set by the user himself. For example, taking the above implementation code as an example, the class name of the target class object can be MyElement. The preset class object can be the HTMLElement class built into the browser, and the registration function of the preset interface can be the customElements.define() function, which has two parameters, one is the name of the custom Web component (i.e., the above component name), and the other is the class name of the target class object.

[0058] In an alternative embodiment, a target class object can be created according to the above implementation code, the component name of the target component can be defined, and the target class object can be registered to the global scope of the browser, so that the component name of the target component can be directly written into the web page code of the browser, and the browser can directly call the target component.

[0059] Optionally, mounting the rendering result to the target component includes: creating an original component in the mounting callback function of the target class object and mounting the rendering result.

[0060] In an alternative embodiment, after creating the target component, an original component can be created and mounted in the mounting callback function "connectedCallback" of the target component. Thus, when the target component is added to the web page, the mounting callback function "connectedCallback" of the target component can be triggered to execute. Through this mounting callback function, the original component can be rendered and the rendering result can be mounted to the target component, so that the rendering result can be added to the web page for the user to view.

[0061] For example, taking the Vue component OriginComponent as an example, this component can display an introduction video on the web page. To achieve component reuse, the API of Custom Elements can be used to encapsulate OriginComponent into a web component my-element and add my-element to the web page code. In addition, OriginComponent can be rendered and mounted into this my-element, and the implementation code is as follows:

[0062] connectedCallback() {

[0063] this.instance = new Vue(OriginComponent)

[0064] $instance.$mount(this)

[0065] When the web page is displayed for the user to view, my - element is added to the web page. At this time, the connectedCallback of my - element is triggered, and the rendering result of OriginComponent is added to the web page and displayed for the user to view. That is, the user can see the introduction video on this web page.

[0066] Optionally, after mounting the rendering result to the target component, this method further includes: determining the monitoring attributes of the original component; in response to a change in the monitoring attributes, obtaining the target value of the monitoring attributes, where the target value is the attribute value of the monitoring attributes after the change; in response to calling the attribute callback function of the target component, passing the target value into the original component; re - rendering the original component based on the target value to obtain a re - rendering result; and mounting the re - rendering result to the target component.

[0067] The monitoring attributes in the above steps can be parameters or states in the original component that need to be monitored for changes, and can be string Key - Value pairs defined on HTML tags.

[0068] In an alternative embodiment, a static property "observedAttributes" can be provided in the target component. Through this property, the monitoring attributes of the original component can be monitored, and a notification is sent when the monitoring attributes change, calling the attribute callback function "attributeChangedCallback" and passing the attribute name, the old value (i.e., the attribute value before the change of the monitoring attributes), and the new value (i.e., the above - mentioned target value) as parameters. Through this callback function, the new value of the changed parameter can be passed into the original component, and the original component is re - rendered to obtain a re - rendering result, and the re - rendering result is mounted to the target component to achieve the function of component update.

[0069] By the above steps, changes in the original component can be monitored. When it is detected that the original component has changed, the original component can be automatically re - rendered without manually operating on the DOM, which is simpler, more efficient, and has a lower error rate than manual operation.

[0070] Optionally, determining the monitoring attributes of the original component includes: obtaining the attribute name of the monitoring attributes; and determining the monitoring attributes based on the attribute name.

[0071] The target attribute in the above steps can be the static attribute "observedAttributes" of the target component, which can accept an array of strings. When it is necessary to monitor changes in the parameters or status of the original component, the parameter name of the parameter or the status name of the status can be added to this array, so that the target component can add the parameter or status to the observation list and send a notification in a timely manner when the parameter or status changes.

[0072] Optionally, after mounting the rendering result to the target component, the method further includes: calling a constructor to create a proxy object, where the proxy object is used to proxy the target object corresponding to the target component; monitoring the preset operations of the target component through the proxy object; in the case where it is determined that the status of the target object has changed based on the preset operations, updating the status of the original component by calling the property callback function of the proxy object, and rendering the updated original component to obtain a rendering result.

[0073] The proxy object in the above steps can be the native JS Proxy class, which is used to decorate any JS object and monitor the preset operations on the object, such as getting values, setting values, function calls, etc., but not limited to this. The target object can be the DOM object of the target component itself. It should be noted that each HTML element has a corresponding DOM object, and the DOM object is also an ordinary JS object.

[0074] In an alternative embodiment, a constructor can be called to create a Proxy proxy, and the prototype object (prototype) of the target component is proxied using the Proxy, that is, the DOM object of the target component itself is proxied using the Proxy, and the proxied prototype object is set back to the custom element using the "setPrototypeOf" method. When it is detected that the attributes on the target component have changed, that is, the status of the DOM object of the target component itself has changed, it can be detected in the property callback function "setPrototypeOf" of the Proxy instance, and this callback function can be called to update the status of the original component and perform re-rendering.

[0075] For example, for a calendar component, the current value of the status date is 2021-08-31. Due to business requirements, the value of date needs to be set to 2021-09-01. Then it can be set by the method of c.date = "2021-09-01". Since the prototype object of the custom element is monitored by the Proxy, the property callback function of the Proxy can be called. In this function, the value of the calendar component can be set, that is, r.date = "2021-09-01", so that the original component inside the custom element can synchronously update the status and render the new value.

[0076] Optionally, mounting the rendering result to the target component includes: calling the mounting method corresponding to the original framework to mount the rendering result to the target component.

[0077] Through the above steps, by calling the mounting method corresponding to the original framework and mounting the rendering result to the target component, the effects of saving development costs and reducing development time can be achieved.

[0078] In an alternative embodiment, the mounting method corresponding to the original framework can be called to mount the original component. For example, for a Vue component, the $mount method can be called for mounting; for a React component, the ReactDOM.render method can be called for mounting; for an Angular component, the bootstrap() method can be called for mounting, and the first parameter passed to this method is the mounting target; for a Svelte component, new Component() can be called to create and mount, and target can be specified in the parameters to represent mounting the rendering result.

[0079] Optionally, rendering the original component to obtain a rendering result includes: calling the rendering method corresponding to the original framework to render the original component to obtain a rendering result.

[0080] Through the above steps, by calling the rendering method corresponding to the original framework to render the original component, the effects of saving development costs and improving the utilization rate of the original framework can be achieved.

[0081] In an alternative embodiment, similar to the mounting method of the original component, the rendering method corresponding to the original framework can be called to render the original component to obtain a rendering result.

[0082] Taking the scenario of Vue component conversion as an example, a preferred embodiment of the present invention will be described in detail below. The conversion methods for other frameworks are similar to this method, and the main difference lies in the methods of creating and mounting the original components, which will not be elaborated here. The method includes the following steps: obtaining a Vue component as the original component; using the API of CustomElements to create a custom element; defining a mounting callback function "connectedCallback" for the custom element, and after rendering the Vue component to obtain the rendered Vue component, the rendered Vue component can be mounted in this function; defining the static attribute observedAttributes of the custom element, and adding the names of all attributes in the props option of the Vue component to this attribute; defining an attribute callback function "attributeChangedCallback" for the custom element, and updating the corresponding attributes of the Vue component therein; defining a constructor function for the custom element, creating a Proxy instance in it to proxy its own prototype object, and updating the corresponding attributes of the Vue component in the characteristic callback function.

[0083] Through the above method, the converted target component is equivalent to a cross-framework component that can be used in any project, improving the component reuse rate, reducing the R & D and maintenance costs, and improving the project development efficiency.

[0084] According to an embodiment of the present invention, a component processing device is provided. This device can execute the component processing method provided in the above embodiment. The specific implementation manner and preferred application scenario are the same as those in the above embodiment, which will not be elaborated here.

[0085] Figure 2 is a schematic structural diagram of a component processing device according to an embodiment of the present invention. As Figure 2 shown, the device includes:

[0086] A component acquisition module 22, configured to acquire an original component corresponding to an original framework, wherein the compilation data obtained after compiling the original component is allowed to run directly in a browser.

[0087] A component creation module 24, configured to create a target component using a preset interface, wherein the target component is allowed to run directly in a browser.

[0088] A rendering module 26, configured to render the original component to obtain a rendering result.

[0089] A mounting module 28, configured to mount the rendering result to the target component.

[0090] Optionally, the creation module includes: a creation unit for creating a target class object corresponding to a target component, where the target class object inherits from a preset class object built into the browser, and the target class object is used to mount the rendering result; a registration unit for defining the component name of the target component through the registration function of a preset interface and registering the target class object to the global scope of the browser.

[0091] Optionally, the rendering module is further configured to create an original component in the mount callback function of the target class object and mount the rendering result.

[0092] Optionally, the apparatus further includes: a first monitoring module for determining the monitoring attribute of the original component after mounting the rendering result to the target component; a parameter acquisition module for acquiring the target value of the monitoring attribute in response to a change in the monitoring attribute, where the target value is the attribute value of the monitoring attribute after the change in the monitoring attribute; a parameter transmission module for passing the target value into the original component in response to a call to the attribute callback function of the target component; the rendering module is further configured to re-render the original component based on the target value to obtain a re-rendered result; and the mounting module is further configured to mount the re-rendered result to the target component.

[0093] Optionally, the first monitoring module includes: an acquisition unit for acquiring the attribute name of the monitoring attribute; and a determination unit for determining the monitoring attribute based on the attribute name.

[0094] Optionally, the apparatus further includes: an object creation module for calling a constructor to create a proxy object after mounting the rendering result to the target component, where the proxy object is used to proxy the target object corresponding to the target component; a second monitoring module for monitoring a preset operation of the target component through the proxy object; an update module for calling the characteristic callback function of the proxy object to update the state of the original component in response to determining that the state of the target object has changed based on the preset operation, so as to obtain an updated original component; and the rendering module is further configured to render the updated original component to obtain a rendering result.

[0095] Optionally, the mounting module is further configured to call the mounting method corresponding to the original framework to mount the rendering result to the target component.

[0096] Optionally, the rendering module is further configured to call the rendering method corresponding to the original framework to render the original component to obtain a rendering result.

[0097] According to an embodiment of the present invention, there is provided a computer-readable storage medium, where the computer-readable storage medium includes a stored program, and when the program runs, it controls a device where the computer-readable storage medium is located to execute the component processing method in the above embodiments.

[0098] According to an embodiment of the present invention, there is also provided an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores a program that can be run by the at least one processor, and when the program is run by the at least one processor, it executes the component processing method in the above embodiment.

[0099] In the above embodiments of the present invention, the descriptions of the respective embodiments have their own emphases. For parts not detailed in a certain embodiment, reference may be made to the relevant descriptions of other embodiments.

[0100] In several embodiments provided by the present application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are merely illustrative. For example, the division of the units can be a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces. The indirect couplings or communication connections of the units or modules can be in electrical or other forms.

[0101] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place, or they can be distributed to multiple units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] In addition, in each embodiment of the present invention, the functional units can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The above integrated units can be implemented in the form of hardware or in the form of software functional units.

[0103] When the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes: various media such as USB flash drives, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), mobile hard disks, magnetic disks, or optical discs that can store program codes.

[0104] The above are only the preferred embodiments of the present invention. It should be noted that for those of ordinary skill in the art, without departing from the principle of the present invention, several improvements and refinements can be made, and these improvements and refinements should also be regarded as the protection scope of the present invention.

Claims

1. A component processing method, characterized in that, including: obtaining an original component corresponding to an original framework, wherein the compiled data obtained after compiling the original component allows direct running in a browser; invoking a preset interface to create a target component, wherein the target component allows direct running in the browser; rendering the original component to obtain a rendering result; mounting the rendering result to the target component; wherein, the rendering the original component to obtain a rendering result includes: invoking a rendering method corresponding to the original framework to render the original component to obtain the rendering result, wherein the rendering is used to represent constructing and generating an HTML structure, initializing styles, and listening for events; the mounting the rendering result to the target component includes: creating the original component in a mounting callback function of a target class object corresponding to the target component, and mounting the rendering result, wherein the target class object inherits from a preset class object built into the browser, the target class object is used to mount the rendering result, and the mounting is used to represent adding the rendering result to a page so that the rendering result is displayed on the page.

2. The method according to claim 1, characterized in that, invoking the preset interface to create the target component includes: creating the target class object corresponding to the target component; defining a component name of the target component through a registration function of the preset interface, and registering the target class object to the global scope of the browser.

3. The method according to claim 1, wherein after mounting the rendering result to the target component, the method further includes: determining a monitoring attribute of the original component; in response to a change in the monitoring attribute, obtaining a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the change in the monitoring attribute; in response to invoking an attribute callback function of the target component, passing the target value into the original component; re-rendering the original component based on the target value to obtain a re-rendering result; mounting the re-rendering result to the target component.

4. The method according to claim 3, characterized in that determining the monitoring attribute of the original component includes: obtaining an attribute name of the monitoring attribute; determining the monitoring attribute based on the attribute name.

5. The method according to claim 1, characterized in that, after mounting the rendering result to the target component, the method further includes: invoking a constructor to create a proxy object, wherein the proxy object is used to proxy a target object corresponding to the target component; monitoring a preset operation of the target component through the proxy object; in response to determining that a state of the target object has changed based on the preset operation, invoking a characteristic callback constructor of the proxy object to update a state of the original component to obtain an updated original component; rendering the updated original component to obtain the rendering result.

6. The method according to any one of claims 1 to 5, characterized in that mounting the rendering result to the target component includes: invoking a mounting method corresponding to the original framework to mount the rendering result to the target component.

7. A component processing device, characterized in that, including: a component acquisition module, configured to obtain an original component corresponding to an original framework, wherein the compiled data obtained after compiling the original component allows direct running in a browser; A component creation module for calling a preset interface to create a target component, where the target component is allowed to run directly in the browser; A rendering module for rendering the original component to obtain a rendering result, including: calling a rendering method corresponding to the original framework to render the original component to obtain the rendering result, where the rendering is used to represent building and generating an HTML structure, initializing styles, and listening for events; A mounting module for mounting the rendering result to the target component, including: creating the original component in a mounting callback function of a target class object corresponding to the target component and mounting the rendering result, where the target class object inherits from a preset class object built into the browser, the target class object is used to mount the rendering result, and the mounting is used to represent adding the rendering result to a page so that the rendering result is displayed on the page.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, where when the program runs, it controls the device where the computer-readable storage medium is located to execute the component processing method according to any one of claims 1 to 6.

9. An electronic device, characterized in that, Including: At least one processor; And A memory communicatively connected to the at least one processor; where The memory stores a program that can be run by the at least one processor, and when the program is run by the at least one processor, it executes the component processing method according to any one of claims 1 to 6.

Images