CN114297549A - Component processing method and device - Google Patents
Component processing method and device Download PDFInfo
- Publication number
- CN114297549A CN114297549A CN202111493757.5A CN202111493757A CN114297549A CN 114297549 A CN114297549 A CN 114297549A CN 202111493757 A CN202111493757 A CN 202111493757A CN 114297549 A CN114297549 A CN 114297549A
- Authority
- CN
- China
- Prior art keywords
- component
- target
- original
- rendering
- mounting
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Abstract
The invention discloses a component processing method and device. Wherein, the method comprises the following steps: acquiring an original assembly corresponding to an original frame, wherein compiled data obtained after the original assembly is compiled is allowed to directly run in a browser; calling a preset interface to create a target component, wherein the target component is allowed to directly run in a browser; rendering the original assembly to obtain a rendering result; and mounting the rendering result to the target component. The invention solves the technical problem that the multiplexing of the basic components in the related technology needs to develop different component libraries aiming at different frameworks, so that the development and maintenance cost is higher.
Description
Technical Field
The invention relates to the field of browser pages, in particular to a component processing method and device.
Background
In the front-end field, different frameworks may be used by different projects, and if basic components are to be multiplexed among the projects of the different frameworks, multiple sets of component libraries based on the frameworks need to be developed for multiple frameworks, so that the development is inconvenient, and the labor cost and the time cost of the development are high.
In view of the above problems, no effective solution has been proposed.
Disclosure of Invention
The embodiment of the invention provides a component processing method and device, which at least solve the technical problem that the multiplexing of basic components in the related technology requires different component libraries to be developed aiming at different frameworks, so that the development and maintenance cost is higher.
According to an aspect of an embodiment of the present invention, there is provided a component processing method including: acquiring an original assembly corresponding to an original frame, wherein compiled data obtained after the original assembly is compiled is allowed to directly run in a browser; calling a preset interface to create a target component, wherein the target component is allowed to directly run in a browser; rendering the original assembly to obtain a rendering result; and mounting the rendering result to the target component.
Optionally, the invoking the preset interface to create the target component includes: creating a target class object corresponding to the target component, wherein the target class object is inherited to a preset class object built in the browser, and the target class object is used for mounting a rendering result; and defining the component name of the target component through a registration function of a preset interface, and registering the target class object to the global scope of the browser.
Optionally, mounting the rendering result to the target component comprises: and creating an original component in the mounting callback function of the target class object, and mounting the rendering result.
Optionally, after mounting the rendering result to the target component, the method further comprises: determining monitoring attributes of the original component; responding to the change of the monitoring attribute, and acquiring a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the monitoring attribute is changed; responding to an attribute callback function for calling the target component, and transmitting the target value into the original component; re-rendering the original assembly based on the target value to obtain a re-rendering result; mounting the re-rendering result to the target component.
Optionally, determining the monitoring attributes of the original component comprises: acquiring an attribute name of a monitoring attribute; the monitoring attribute is determined based on the attribute name.
Optionally, after mounting the rendering result to the target component, the method further comprises: calling a constructor to create a proxy object, wherein the proxy object is used for proxy of a target object corresponding to the target component; monitoring preset operation of a target component through a proxy object; in response to the fact that the state of the target object is determined to be changed based on the preset operation, calling a characteristic callback function of the proxy object, and updating the state of the original assembly to obtain an updated original assembly; rendering the updated original assembly to obtain a rendering result.
Optionally, mounting the rendering result to the target component comprises: and calling a mounting method corresponding to the original frame, and mounting the rendering result to the target assembly.
Optionally, rendering the original component, and obtaining a rendering result includes: and calling a rendering method corresponding to the original frame, and rendering the original assembly to obtain a rendering result.
According to another aspect of the embodiments of the present invention, there is also provided a component processing apparatus including: the component acquisition module is used for acquiring an original component corresponding to the original frame, wherein compiled data obtained after the original component is compiled allows the original component to directly run in a browser; the component creating module is used for calling a preset interface to create a target component, wherein the target component is allowed to directly run in the browser; the rendering module is used for rendering the original assembly to obtain a rendering result; and the mounting module is used for mounting the rendering result to the target assembly.
Optionally, the creating module includes: the system comprises a creating unit, a rendering unit and a rendering unit, wherein the creating unit is used for creating a target class object corresponding to a target component, the target class object inherits a preset class object built in the browser, and the target class object is used for mounting a rendering result; and the registration unit is used for defining the component name of the target component through a registration function of a preset interface and registering the target class object to the global scope of the browser.
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.
Optionally, the apparatus further comprises: the first monitoring module is used for determining the monitoring attribute of the original component after the rendering result is mounted to the target component; the parameter acquisition module is used for responding to the change of the monitoring attribute and acquiring a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the monitoring attribute changes; the parameter transfer module is used for responding to an attribute callback function for calling the target component and transmitting the target value to the original component; the rendering module is also used for re-rendering the original assembly based on the target value to obtain a re-rendering result; the mounting module is also used for mounting the re-rendering result to the target component.
Optionally, the first monitoring module comprises: the acquisition unit is used for acquiring an attribute name of the monitoring attribute; and the determining unit is used for determining the monitoring attribute based on the attribute name.
Optionally, the apparatus further comprises: the object creating module is used for calling a constructing function to create a proxy object after the rendering result is mounted to the target component, wherein the proxy object is used for proxying the target object corresponding to the target component; the second monitoring module is used for monitoring the preset operation of the target component through the proxy object; the updating module is used for responding to the change of the state of the target object determined based on the preset operation, calling a characteristic callback function of the proxy object, updating the state of the original component and obtaining the updated original component; the rendering module is further used for rendering the updated original assembly to obtain a rendering result.
Optionally, the mount module is further configured to invoke a mount method corresponding to the original frame, and mount the rendering result to the target component.
Optionally, the rendering module is further configured to call a rendering method corresponding to the original frame, and render the original component to obtain a rendering result.
According to another aspect of the embodiments of the present invention, there is also provided a computer-readable storage medium, which includes a stored program, wherein when the program runs, the apparatus where the computer-readable storage medium is located is controlled to execute any one of the component processing methods described above.
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 coupled to the at least one processor; the memory stores a program executable by the at least one processor, and the program executes any one of the component processing methods when executed by the at least one processor.
In the embodiment of the invention, after the original component corresponding to the original frame is obtained, the preset interface is called to create the target component, the original component is rendered, and the rendering result is mounted to the target component, it is easy to note that, because the original component is not allowed to directly run in the browser, compiled data is obtained after compiling is carried out by a compiling tool corresponding to the original frame, the original component is allowed to directly run in the browser, and the target component is allowed to directly run in the browser, that is, the target component is a universal component and cannot be influenced by different frames, so that the original component of any frame is packaged into the universal target component, code multiplexing and component sharing are conveniently realized among projects of different frames, the technical effects of improving the multiplexing rate of the original component, reducing development and maintenance costs and improving development efficiency are achieved, and the technical problem that the multiplexing of the basic components in the related technology needs to develop different component libraries aiming at different frameworks, so that the development and maintenance cost is high is solved.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the invention and together with the description serve to explain the invention without limiting the invention. In the drawings:
FIG. 1 is a flow diagram of a component handling method according to an embodiment of the invention;
FIG. 2 is a schematic diagram of a component handling apparatus according to an embodiment of the present invention.
Detailed Description
In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that the terms "first," "second," and the like in the description and claims of the present invention and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
Code multiplexing is an important consideration factor in the Web application development process, however, in a Web page, most of reusable modules are complex, and usually include an HTML (Hyper Text Markup Language) structure, CSS (Cascading Style Sheets) styles and Javascript interactive logic, and the difficulty of packaging and integrating by using a conventional method is high, and confusion is easily caused.
Web Components, are a set of technologies that are native supports of modern browsers, do not rely on any framework, do not need to be compiled for use, allow reusable, customizable page Components to be created, and can be used in any Web application or page as conveniently as native HTML tags. Web Components consist of three major technologies that can be used together to create custom elements of a wrapper function:
custom elements: a set of JavaScript APIs to define custom elements and their behavior, which can then be used in applications like native HTML tags. For example, native HTML has an "img" tag to display a picture, a custom element of a lazy-to-load picture can be packaged, named "lazy-img", and then the "< lazy-img >" tag can be used directly in HTML.
Shadow DOM: and the JavaScript APIs are used for isolating the styles and behaviors in the custom elements, so that the styles in the components cannot be polluted by the outside, and the styles in the components can be prevented from polluting the global styles, and therefore, the JavaScript APIs cannot conflict with other modules.
HTML templates (HTML template): HTML fragments are defined, which can then be reused multiple times as the basis for custom element structures.
Therefore, a plurality of front-end frameworks such as Vue, fact, Angular and the like are provided in the related art, and the existing components can be packaged into the Web components by adopting different conversion schemes, so that the development cost can be reduced. The Vue CLI tool provides a construction mode, and Components can be compiled into Web Components; preact Web Components can register React Components as Web Components by introducing additional conversion packages.
However, the above solution has the following disadvantages: the two conversion schemes have higher dependence on the frame, can only convert the components of one frame and cannot be used for different frames; the Vue CLI scheme requires building a corresponding development environment and installing a corresponding compiling tool chain, so that the scheme is inconvenient; the Vue CLI scheme requires recompilation of the source code, making the implementation difficult.
In accordance with an embodiment of the present invention, there is provided an embodiment of a component processing method, it should be noted that the steps illustrated in the flowchart of the drawings may be performed in a computer system such as a set of computer executable instructions, and that while a logical order is illustrated in the flowchart, in some cases the steps illustrated or described may be performed in an order different than here.
Fig. 1 is a schematic diagram illustrating a flow of a component processing method according to an embodiment of the present invention, as shown in fig. 1, the method includes the following steps:
and step S102, acquiring an original assembly corresponding to the original frame, wherein compiled data obtained by compiling the original assembly is allowed to directly run in a browser.
The plurality of preset frames in the above steps may be different frames adopted in current project development, such as boottrap, Layui, Muse UI, View UI, jQuery UI, Easy UI, and ant, but are not limited thereto; the primitive component may be a component in a front-end domain that needs to be packaged into Web Components currently, for example, Vue component, fact component, Angular component, Svelte component, and the like, but not limited thereto, the primitive framework may be a framework adopted by the primitive component, and specifically may be any one of a plurality of preset frameworks.
It should be noted that the original component corresponding to the original frame is compiled by using the specific language corresponding to the original frame, and does not belong to the Web standard in syntax, and cannot be identified by the browser, so that the original component cannot be directly run in the browser, and the original component needs to be compiled into the content that can be identified by the browser by using the compiling tool corresponding to the original frame, and can be run by the browser. Therefore, using the corresponding native components of the native framework requires the introduction of additional runtime code.
In an alternative embodiment, when a developer needs to implement code multiplexing and component sharing among projects of different frameworks, the developer can upload components needing multiplexing and sharing to a server, and the server performs quick encapsulation on original components.
And step S104, calling a preset interface to create a target component, wherein the target component is allowed to directly run in the browser.
The target Components in the above steps can be custom Web Components, which are Components supported native by a modern browser, and do not depend on any framework and do not need to be compiled, that is, no preprocessing is needed, and no additional runtime code needs to be introduced to directly run in the browser, so that the target Components can be used in any framework. The preset interface can be an interface related to an HTML custom element standard.
In an alternative embodiment, the target component may be defined by the define method of the Custom Elements object using the API of Custom Elements, and the implementation code is as follows:
class MyElement extends HTMLElement{
/*…*/
}
customElements.define(“my-element”,MyElement)
the method accepts two parameters, the first parameter being the name of the target component ("my-element") and the second parameter being the class (MyElemen) which may define the attributes of the target component using the get and set method.
And S106, rendering the original assembly to obtain a rendering result.
For the front-end component, rendering is mainly responsible for building and generating an HTML structure, initializing styles, listening events, and the like, and in an optional embodiment, a rendering method corresponding to an original framework can be directly called to render an original component.
And step S108, mounting the rendering result to the target assembly.
For the front-end component, it is the main responsibility of the mount to add the rendered HTML fragment to the page so that it can be exposed on the page.
In an alternative embodiment, a mount method corresponding to the original framework may be directly called for mounting, for example, for the Vue component, a $ mount method may be called for mounting; for a React component, a ReactDOM render method can be called for mounting; for an Angular component, a bootstrap () method can be called for mounting, and the first parameter transmitted by the method is a mounting target; for Svelte Component, new Component () may be called to create and mount, and target represents mount rendering result specified in parameter.
Through the steps, after the original component corresponding to the original frame is obtained, the preset interface is called to create the target component, the original component is rendered, and the rendering result is mounted to the target component, it is easy to notice that the original component is not allowed to directly run in the browser, compiling data is obtained after compiling through a compiling tool corresponding to the original frame, the original component is allowed to directly run in the browser, and the target component is allowed to directly run in the browser, that is, the target component is a universal component and cannot be influenced by different frames, so that the original component of any frame is packaged into the universal target component, code multiplexing and component sharing are conveniently realized among projects of different frames, the technical effects of improving the reuse rate of the original component, reducing development and maintenance costs and improving development efficiency are achieved, and the technical problem that the multiplexing of the basic components in the related technology needs to develop different component libraries aiming at different frameworks, so that the development and maintenance cost is high is solved.
Optionally, the invoking the preset interface to create the target component includes: creating a target class object corresponding to the target component, wherein the target class object is inherited to a preset class object built in the browser, and the target class object is used for mounting a rendering result; and defining the component name of the target component through a registration function of a preset interface, and registering the target class object to the global scope of the browser.
The target class object in the above steps may specify a function of the custom Web component, and the class name of the target class object may be set by the user, for example, taking the implementation code as an example, the class name of the target class object may be MyElement. The preset class object may be an html element class built in the browser, and the registration function of the preset interface may be a custom elements.
In an alternative embodiment, the target class object may be created according to the implementation code, the component name of the target component is defined, and the target class object is registered in the global scope of the browser, so that the component name of the target component may be directly written into the web page code of the browser, and the browser may directly call the target component.
Optionally, mounting the rendering result to the target component comprises: and creating an original component in the mounting callback function of the target class object, and mounting the rendering result.
In an alternative embodiment, after the target component is created, the original component may be created and mounted in the mounted callback function "connectedCallback" of the target component, so that when the target component is added to the web page, the mounting callback function "connectedCallback" of the target component may be triggered to be executed, through which the original component may be rendered and the rendering result may be mounted to the target component, so that the rendering result may be added to the web page for viewing by the user.
For example, taking the Vue component origin component as an example, the component may display an introduction video on a web page. To implement component reuse, the origin component can be packaged into a web component my-element and the my-element added to the web page code using the API of Custom Elements. In addition, OriginComponent can be rendered and mounted into the my-element, implementing code as follows:
connectedCallback(){
this.instance＝new Vue(OriginComponent)
$instance.$mount(this)
when the webpage is displayed to a user for viewing, the my-element is added to the webpage, the connected Callback of the my-element is triggered to be executed, the rendering result of the origin component is added to the webpage and displayed to the user for viewing, namely, the user can see the introduction video on the webpage.
Optionally, after mounting the rendering result to the target component, the method further comprises: determining monitoring attributes of the original component; responding to the change of the monitoring attribute, and acquiring a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the monitoring attribute is changed; responding to an attribute callback function for calling the target component, and transmitting the target value into the original component; re-rendering the original assembly based on the target value to obtain a re-rendering result; mounting the re-rendering result to the target component.
The monitoring attribute in the above step may be a parameter or a state that needs to be monitored whether to change in the original component, and may be a Key-Value pair of a character string defined on the HTML tag.
In an alternative embodiment, a static attribute "observedAttributes" may be provided in the target component, through which the monitored attribute of the original component may be monitored, and when the monitored attribute changes, a notification may be issued, and an attribute callback function "attembuchangedcallback" is called, and the name of the incoming attribute, the old value (i.e., the value of the attribute before the change of the monitored attribute), and the new value (i.e., the target value) are used as parameters. The new value of the change parameter can be transmitted to the original component through the callback function, the original component is rendered again to obtain a re-rendering result, and the re-rendering result is mounted to the target component to realize the function of updating the component.
The change of the original assembly can be monitored through the steps, when the change of the original assembly is monitored, the original assembly can be automatically re-rendered, manual operation of DOM is not needed, the method is simpler than manual operation, the efficiency is higher, and the error rate is lower.
Optionally, determining the monitoring attributes of the original component comprises: acquiring an attribute name of a monitoring attribute; the monitoring attribute is determined based on the attribute name.
The target property in the above steps may be a static property "observedAttributes" of the target component, which may accept a string array. When the change of the parameter or the state of the original component needs to be monitored, the parameter name or the state name of the state of the parameter can be added into the array, so that the target component can add the parameter or the state into the observation list and timely send out a notification when the parameter or the state changes.
Optionally, after mounting the rendering result to the target component, the method further comprises: calling a constructor to create a proxy object, wherein the proxy object is used for proxy of a target object corresponding to the target component; monitoring preset operation of a target component through a proxy object; and under the condition that the state of the target object is determined to be changed based on the preset operation, updating the state of the original assembly by calling a characteristic callback function of the proxy object, and rendering the updated original assembly to obtain a rendering result.
The Proxy object in the above step may be a Proxy class of JS native, and is used to modify any JS object and monitor a preset operation on the object, such as a value, a setting value, a function call, and the like, but is not limited thereto. The target object may be a DOM object of the target component itself, and it should be noted that each HTML element has a corresponding DOM object, and the DOM object is also a general JS object.
In an alternative embodiment, a constructor may be called to create a Proxy, use the prototypical object (prototype) of the Proxy target component, i.e., use the DOM object of the Proxy target component itself, and use the "setPrototypeOf" method to set the proxied prototypical object back to the custom element. When the change of the characteristics on the target component is monitored, that is, the state of the DOM object of the target component itself is monitored, the change can be monitored in a characteristic callback function setPrototypeOf of the Proxy instance, and the callback function can be called to update the state of the original component and perform re-rendering.
For example, for a calendar component, the current value of the state date is 2021-08-31, and the value of the state needs to be set to 2021-09-01 due to business needs, the setting can be performed in a manner of "2021-09-01" for c.date, and since the prototype object of the custom element is listened to by Proxy, the property callback function of Proxy can be called, in which 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 state and render a new value.
Optionally, mounting the rendering result to the target component comprises: and calling a mounting method corresponding to the original frame, and mounting the rendering result to the target assembly.
Through the steps, the mounting method corresponding to the original frame is called, and the rendering result is mounted to the target assembly, so that the effects of saving development cost and reducing development time can be achieved.
In an alternative embodiment, a mount method corresponding to the original framework may be called to mount the original component, for example, for the Vue component, a $ mount method may be called to mount; for a React component, a ReactDOM render method can be called for mounting; for an Angular component, a bootstrap () method can be called for mounting, and the first parameter transmitted by the method is a mounting target; for Svelte Component, new Component () may be called to create and mount, and target represents mount rendering result specified in parameter.
Optionally, rendering the original component, and obtaining a rendering result includes: and calling a rendering method corresponding to the original frame, and rendering the original assembly to obtain a rendering result.
Through the steps, the rendering method corresponding to the original frame is called to render the original assembly, so that the effects of saving development cost and improving the utilization rate of the original frame can be achieved.
In an optional embodiment, similar to the mount method of the original component, a rendering method corresponding to the original frame may be called to render the original component, so as to obtain a rendering result.
The following takes the Vue component conversion scenario as an example to describe in detail a preferred embodiment of the present invention, and the conversion method of other frames is similar to the method, and the difference mainly lies in the difference between the methods for creating and mounting the original component, and is not described herein again. The method comprises the following steps: acquiring Vue a component as an original component; creating custom elements using the API of CustomElements; defining a mount callback function 'connecteddcallback' of a custom element, rendering Vue components to obtain a rendered Vue component, and then hanging the rendered Vue component in the function; defining static attribute observedAttributes of a custom element, and adding attribute names of all attributes in the option of Vue component tips into the attribute; defining an attribute callback function 'attribute changedCallback' of the custom element, and updating Vue the attribute corresponding to the component in the attribute callback function; defining the constructor of the custom element, creating a Proxy instance therein, proxying its own prototype object, and updating Vue the component correspondence property in the property callback function.
By the method, the converted target assembly is equivalent to a cross-frame assembly and can be used in any project, the assembly reuse rate is improved, the research and development and maintenance cost is reduced, and the project development efficiency is improved.
According to an embodiment of the present invention, a component processing apparatus is provided, which may execute the component processing method provided in the foregoing embodiment, and a specific implementation manner and a preferred application scenario are the same as those in the foregoing embodiment, and are not described herein again.
Fig. 2 is a schematic structural diagram of a component handling apparatus according to an embodiment of the present invention, as shown in fig. 2, the apparatus including:
and the component obtaining module 22 is configured to obtain an original component corresponding to the original frame, where compiled data obtained by compiling the original component is allowed to run directly in a browser.
And the component creating module 24 is used for creating a target component by using a preset interface, wherein the target component is allowed to directly run in the browser.
And the rendering module 26 is configured to render the original component to obtain a rendering result.
And a mounting module 28 for mounting the rendering result to the target component.
Optionally, the creating module includes: the system comprises a creating unit, a rendering unit and a rendering unit, wherein the creating unit is used for creating a target class object corresponding to a target component, the target class object inherits a preset class object built in the browser, and the target class object is used for mounting a rendering result; and the registration unit is used for defining the component name of the target component through a registration function of a preset interface and registering the target class object to the global scope of the browser.
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.
Optionally, the apparatus further comprises: the first monitoring module is used for determining the monitoring attribute of the original component after the rendering result is mounted to the target component; the parameter acquisition module is used for responding to the change of the monitoring attribute and acquiring a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the monitoring attribute changes; the parameter transfer module is used for responding to an attribute callback function for calling the target component and transmitting the target value to the original component; the rendering module is also used for re-rendering the original assembly based on the target value to obtain a re-rendering result; the mounting module is also used for mounting the re-rendering result to the target component.
Optionally, the first monitoring module comprises: the acquisition unit is used for acquiring an attribute name of the monitoring attribute; and the determining unit is used for determining the monitoring attribute based on the attribute name.
Optionally, the apparatus further comprises: the object creating module is used for calling a constructing function to create a proxy object after the rendering result is mounted to the target component, wherein the proxy object is used for proxying the target object corresponding to the target component; the second monitoring module is used for monitoring the preset operation of the target component through the proxy object; the updating module is used for responding to the change of the state of the target object determined based on the preset operation, calling a characteristic callback function of the proxy object, updating the state of the original component and obtaining the updated original component; the rendering module is further used for rendering the updated original assembly to obtain a rendering result.
Optionally, the mount module is further configured to invoke a mount method corresponding to the original frame, and mount the rendering result to the target component.
Optionally, the rendering module is further configured to call a rendering method corresponding to the original frame, and render the original component to obtain a rendering result.
According to an embodiment of the present invention, a computer-readable storage medium is provided, and the computer-readable storage medium includes a stored program, where the program, when executed, controls an apparatus in which the computer-readable storage medium is located to execute the component processing method in the foregoing implementation.
According to an embodiment of the present invention, there is also provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor; the memory stores a program executable by the at least one processor, and the program executes the component processing method in the above embodiments when executed by the at least one processor.
In the above embodiments of the present invention, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
In the embodiments provided in the present application, it should be understood that the disclosed technology can be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units may be a logical division, and in actual implementation, there may be another division, for example, multiple units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic or optical disk, and other various media capable of storing program codes.
The foregoing is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and decorations can be made without departing from the principle of the present invention, and these modifications and decorations should also be regarded as the protection scope of the present invention.
Claims (11)
1. A component handling method, comprising:
acquiring an original assembly corresponding to an original frame, wherein compiled data obtained by compiling the original assembly is allowed to directly run in a browser;
calling a preset interface to create a target component, wherein the target component is allowed to directly run in the browser;
rendering the original assembly to obtain a rendering result;
and mounting the rendering result to the target component.
2. The method of claim 1, wherein invoking the preset interface to create the target component comprises:
creating a target class object corresponding to the target component, wherein the target class object is inherited to a preset class object built in the browser, and the target class object is used for mounting the rendering result;
and 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.
3. The method of claim 2, wherein mounting the rendering results to the target component comprises:
and creating the original assembly in the mounting callback function of the target class object, and mounting the rendering result.
4. The method of claim 1, wherein after mounting the rendering results to the target component, the method further comprises:
determining monitoring attributes of the original component;
responding to the change of the monitoring attribute, and acquiring a target value of the monitoring attribute, wherein the target value is an attribute value of the monitoring attribute after the change of the monitoring attribute;
responsive to invoking an attribute callback function of the target component, passing the target value into the original component;
re-rendering the original assembly based on the target value to obtain a re-rendering result;
mounting the re-rendering result to the target component.
5. The method of claim 4, wherein determining the monitoring attributes of the original component comprises:
acquiring an attribute name of the monitoring attribute;
determining the monitoring attribute based on the attribute name.
6. The method of claim 1, wherein after mounting the rendering results to the target component, the method further comprises:
calling a constructor to create a proxy object, wherein the proxy object is used for proxy of a target object corresponding to the target component;
monitoring preset operation of the target component through the proxy object;
in response to the fact that the state of the target object is determined to be changed based on the preset operation, calling a characteristic callback construction function of the proxy object, and updating the state of the original assembly to obtain an updated original assembly;
rendering the updated original assembly to obtain the rendering result.
7. The method of any of claims 1 to 6, wherein mounting the rendering results to the target component comprises:
and calling a mounting method corresponding to the original frame, and mounting the rendering result to the target assembly.
8. The method according to any one of claims 1 to 6, wherein rendering the original component, and obtaining the rendering result comprises:
and calling a rendering method corresponding to the original frame to render the original assembly to obtain the rendering result.
9. A component handling apparatus, comprising:
the component acquisition module is used for acquiring an original component corresponding to an original frame, wherein compiled data obtained by compiling the original component is allowed to directly run in a browser;
the component creating module is used for calling a preset interface to create a target component, wherein the target component is allowed to directly run in the browser;
the rendering module is used for rendering the original assembly to obtain a rendering result;
and the mounting module is used for mounting the rendering result to the target assembly.
10. A computer-readable storage medium, comprising a stored program, wherein the program, when executed, controls an apparatus in which the computer-readable storage medium is located to perform the component processing method of any one of claims 1 to 8.
11. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores a program executable by the at least one processor, the program executing the component processing method of any one of claims 1 to 8 when executed by the at least one processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111493757.5A CN114297549A (en) | 2021-12-08 | 2021-12-08 | Component processing method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111493757.5A CN114297549A (en) | 2021-12-08 | 2021-12-08 | Component processing method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114297549A true CN114297549A (en) | 2022-04-08 |
Family
ID=80965389
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111493757.5A Pending CN114297549A (en) | 2021-12-08 | 2021-12-08 | Component processing method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114297549A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268861A (en) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | Introduction method, system, equipment and storage medium of custom component |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
-
2021
- 2021-12-08 CN CN202111493757.5A patent/CN114297549A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268861A (en) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | Introduction method, system, equipment and storage medium of custom component |
| CN115268861B (en) * | 2022-06-21 | 2023-04-11 | 北京志凌海纳科技有限公司 | Introduction method, system, equipment and storage medium of custom component |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| US7269792B2 (en) | System and method for generating high-function browser widgets with full addressability | |
| CN105354014B (en) | Application interface renders methods of exhibiting and device | |
| US10346502B2 (en) | Mobile enablement of existing web sites | |
| US9189210B2 (en) | Using source code generated from a data model file to generate a graphical user interface from objects in a database | |
| KR20080053293A (en) | Initial server-side content rendering for client-script web pages | |
| CN114297549A (en) | Component processing method and device | |
| WO2011042360A1 (en) | Shared script files in multi-tab browser | |
| CN112114890A (en) | Method, device and equipment for processing small program and storage medium | |
| CN112799663A (en) | Page display method and device, computer readable storage medium and electronic equipment | |
| CN116974620A (en) | Application program generation method, operation method and corresponding device | |
| CN112287255B (en) | Page construction method and device, computing equipment and computer readable storage medium | |
| US20080155493A1 (en) | Method for ensuring unique identification of program elements across multiple executions | |
| CN113094138A (en) | Interface display method and device, electronic equipment and storage medium | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN111124924A (en) | API (application program interface) deployment method and device, electronic equipment and storage medium | |
| CN110599112A (en) | Method and device for developing and maintaining network page | |
| CN111880775A (en) | Multi-module layered architecture implementation method and device, electronic equipment and storage medium | |
| CN106775900B (en) | Calling method and system of application browser | |
| CN113961279A (en) | Page rendering method, device, server and storage medium | |
| CN113704669B (en) | Data processing method and device for webpage operation | |
| CN113704668B (en) | Data processing method and device for webpage development | |
| CN117348876B (en) | Application development method, system and medium based on freeRTOS embedded system | |
| CN116009863B (en) | Front-end page rendering method, device and storage medium | |
| CN113986322B (en) | Method, device and storage medium for dynamically modifying page codes |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |