Component mounting method and device, electronic equipment, storage medium and program product

Abstract

The invention provides a component mounting method and device, electronic equipment, a storage medium and a program product, and relates to the technical field of computers, in particular to the front-end technical field of front-end design, front-end development, front-end optimization and the like. The method comprises the steps that in the loading process of a target webpage, a node container of a target node in a document object model of the target webpage is established, and the target webpage is established based on a first development tool set; a target component is mounted to the node container by calling a target mounting function, the target component is displayed at the position of the target node on the target webpage, the target component is created based on a second development tool set, and the target component is displayed at the position of the target node on the target webpage. The target mounting function is a function which is preset in the second development tool set and supports external calling. According to the invention, the component development and maintenance cost can be reduced.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, specifically to front-end technology fields such as front-end design, front-end development, and front-end optimization, and especially to a component mounting method, a component mounting device, an electronic device, a computer-readable storage medium, and a computer program product. Background Art

[0002] Existing mainstream front-end development toolkits have independent technical specifications. Code written using one front-end development toolkit often cannot be used in products built using other front-end development toolkits. For example, components created using the San framework cannot be used in web pages built using the React framework. Separate component libraries must be built for both React and San frameworks. In this case, the need to develop and maintain component libraries for both front-end development toolkits leads to high development and ongoing maintenance costs. Summary of the Invention

[0003] The embodiments of the present disclosure provide a component mounting method and device, an electronic device, a storage medium, and a program product, which can reduce component development and maintenance costs.

[0004] In a first aspect, an embodiment of the present disclosure proposes a component mounting method, comprising: during the loading process of a target web page, creating a node container of a target node in a document object model of the target web page, wherein the target web page is constructed based on a first development tool set; mounting a target component to the node container by calling a target mounting function, and displaying the target component at the position of the target node on the target web page, wherein the target component is created based on a second development tool set, and the target mounting function is a function preset in the second development tool set that supports external calls.

[0005] In the second aspect, an embodiment of the present disclosure proposes a component mounting device, including: a node container creation module, configured to create a node container of a target node in the document object model of a target web page during the loading process of the target web page, wherein the target web page is constructed based on a first development tool set; a target component mounting module, configured to mount a target component to the node container by calling a target mounting function, and display the target component at the position of the target node on the target web page, wherein the target component is created based on a second development tool set, and the target mounting function is a function preset in the second development tool set that supports external calls.

[0006] In a third aspect, an embodiment of the present disclosure provides an electronic device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method described in any implementation manner in the first aspect.

[0007] In a fourth aspect, an embodiment of the present disclosure provides a non-transitory computer-readable storage medium storing computer instructions, which are used to enable a computer to implement the method described in any implementation manner in the first aspect when executed.

[0008] In a fifth aspect, an embodiment of the present disclosure provides a computer program product comprising a computer program, which, when executed by a processor, can implement the method described in any implementation manner in the first aspect.

[0009] It should be understood that the contents described in this section are not intended to identify the key or important features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become readily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Other features, objects and advantages of the present disclosure will become more apparent from a reading of the detailed description of non-limiting embodiments made with reference to the following drawings: Figure 1 is an exemplary system architecture diagram in which the present disclosure may be applied; Figure 2 is a flowchart of a component mounting method provided by an embodiment of the present disclosure; Figure 3 is a flowchart of mounting a target component to a node container provided by some embodiments of the present disclosure; Figure 4 is a flowchart of another component mounting method provided by an embodiment of the present disclosure; Figure 5 is a flow chart of communication between other components and a target component provided by some embodiments of the present disclosure; Figure 6 is a flowchart of an embodiment of a component mounting method provided by an embodiment of the present disclosure; Figure 7 is a schematic diagram of a specific application scenario of the present disclosure; Figure 8 is a structural block diagram of a component mounting device provided in an embodiment of the present disclosure; Figure 9 It is a structural diagram of an electronic device suitable for a component mounting method provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0011] The following description of exemplary embodiments of the present disclosure is made in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description. It should be noted that the embodiments in the present disclosure and the features in the embodiments can be combined with each other unless there is a conflict.

[0012] In the technical solutions disclosed herein, the collection, storage, use, processing, transmission, provision and disclosure of user personal information involved comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0013] Figure 1 An exemplary system architecture 100 is shown to which the component mounting method and apparatus, electronic device, storage medium, and program product of the present disclosure may be applied.

[0014] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. Network 104 is a medium for providing communication links between terminal devices 101, 102, 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0015] Users can use terminal devices 101, 102, 103 to interact with server 105 via network 104 to receive or send messages, etc. Terminal devices 101, 102, 103 and server 105 can be installed with various applications for enabling information communication between the two, such as browser applications, instant messaging applications, etc.

[0016] Terminal devices 101, 102, 103 and server 105 can be either hardware or software. When terminal devices 101, 102, 103 are hardware, they can be various electronic devices with display screens, including but not limited to smartphones, tablet computers, laptop computers, and desktop computers. When terminal devices 101, 102, 103 are software, they can be installed in the electronic devices listed above. They can be implemented as multiple software or software modules, or as a single software or software module, and are not specifically limited here. When server 105 is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When the server is software, it can be implemented as multiple software or software modules, or as a single software or software module, and are not specifically limited here.

[0017] The server 105 can provide various services through various built-in applications. Taking the browser application that can provide Internet browsing services as an example, the user can send a target web page access request to the server 105 through the browser application of the terminal devices 101, 102, and 103. The server 105 can receive the request and run the browser application for processing, and return a file for building and displaying the target web page. The terminal devices 101, 102, and 103 can run the browser application according to the file to load the target web page, and perform the following operations: during the target web page loading process, create a node container of the target node in the document object model of the target web page, wherein the target web page is built based on the first development tool set; mount the target component to the node container by calling the target mount function, and display the target component at the position of the target node on the target web page, wherein the target component is created based on the second development tool set, and the target mount function is a function preset in the second development tool set that supports external calls.

[0018] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0019] Please refer to Figure 2 , Figure 2 A flowchart of a component mounting method provided in an embodiment of the present disclosure, wherein process 200 may include the following steps: Step 201: during a target webpage loading process, creating a node container of a target node in a document object model of the target webpage, wherein the target webpage is constructed based on a first development tool set.

[0020] This step is intended to be executed by the component mounting method (for example Figure 1The terminal devices 101, 102, and 103 shown in the figure can create a node container of a target node in the document object model of the target webpage during the loading process of the target webpage, wherein the target webpage can be built based on the first development tool set. The execution subject can access the target webpage through a browser or an application (Application, App for short). During the loading process of the target webpage, the execution subject can send a request to the server (for example, Figure 1 The server 105 shown sends a request to access a target web page and receives a HyperText Markup Language (HTML) file returned by the server for constructing and displaying the target web page. By parsing the HTML file execution body, a Document Object Model (DOM) of the target web page can be constructed, and a node container associated with the target node in the DOM can be created.

[0021] In this embodiment, the DOM is a tree-like structure consisting of multiple nodes. A DOM can include multiple types of nodes, such as document nodes, element nodes, text nodes, and attribute nodes. The target node can be a node in the DOM that can mount a page component, such as an element node in the DOM. A node container can be a container associated with a specific node in the DOM. In this embodiment, the HTML file of the target webpage can be developed using a first development tool set. The first development tool set can be a front-end development framework, such as the Vue framework, React framework, Angular framework, or Sans framework, but the embodiments of this disclosure are not limited to this. The execution entity can create a node container associated with the target node in the DOM according to the method provided by the first development tool set, but the embodiments of this disclosure are not limited to this. For example, in the React framework, the useRef function can be used to create a node container for the target node. The target webpage can be a dynamic webpage or a static webpage. The target webpage can be a first-level webpage, a second-level webpage, or a third-level webpage on a website, etc. The target webpage can be a webpage that conforms to various webpage classification methods, but the embodiments of this disclosure are not limited to this.

[0022] Step 202: Mount the target component to the node container by calling the target mount function, and display the target component at the target node position on the target web page, wherein the target component is created based on the second development tool set, and the target mount function is a preset function in the second development tool set that supports external calls.

[0023] On the basis of step 201, this step is intended to allow the above-mentioned execution subject to mount the target component to the node container by calling the target mount function, so that the target component can be displayed at the position of the target node on the target web page, wherein the target component can be created based on the second development tool set, and the target mount function can be a function that supports external calls preset in the second development tool set. After creating a node container associated with the target node in the document object model of the target web page, the execution subject can mount the target component to the node container by calling the target mount function, so that the target component is mounted to the target node in the document object model through the node container, and the target component is rendered at the position corresponding to the target node on the target web page, so that the target component can be displayed on the target web page. Among them, the target component can be various types of page components, and the page component is a module for constructing a web page. Each page component can realize independent visualization and interactive functions by encapsulating data and methods. A complex web page structure can be constructed by combining page components to meet the requirements of various functions and layouts of the web page.

[0024] In this embodiment, the target component can be developed using a second development tool set, and the second development tool set can be a front-end development framework different from the first development tool set. For example, the first development tool set is a React framework and the second development tool set can be a Vue framework. The embodiments of the present disclosure do not limit this. The target mounting function can be obtained based on the basic mounting function in the second development tool set, wherein the basic mounting function can be a function in the second development tool set used to mount the page component to a node of the DOM. The target mounting function can be exposed according to the method provided by the second development tool set, so that the target mounting function can be called by other development tool sets outside the second development tool set, so that other development tool sets can call the basic mounting function in the second development tool set through the target mounting function to mount the target component. The embodiments of the present disclosure do not limit the implementation method of obtaining the target mounting function and exposing the target mounting function. For example, in the San framework, the function to be exposed can be encapsulated into an independent module, and the encapsulated module can be exported for external call using the keyword export.

[0025] In this embodiment, the execution subject can call the target mounting function to mount the target component to the node container according to the method provided by the second development tool set, and the embodiment of the present disclosure is not limited to this. For example, in the React framework, the useEffect function can be used to call the target mounting function to mount the target component to the node container. Among them, the target web page can include at least one target component. When the target web page includes more than two target components, for example, the target web page includes two target components, namely a form component and a pop-up component, for each target component, the target component can be mounted by executing steps 201 and 202.

[0026] The component mounting method provided by the embodiment of the present disclosure creates a node container of the target node in the document object model of the target web page during the loading process of the target web page, mounts the target component to the node container by calling the target mounting function, and displays the target component at the position of the target node on the target web page, wherein the target web page is built based on the first development tool set, the target component is created based on the second development tool set, and the target mounting function is a function preset in the second development tool set that supports external calls. The component created by the second development tool set can be applied to the web page built by the first development tool set to realize the reuse of components across development tool sets, which can improve the efficiency of component iteration and reduce the cost of component development and maintenance.

[0027] Please refer to Figure 3 , Figure 3 A flowchart of mounting a target component to a node container is provided for some embodiments of the present disclosure, wherein calling a target mount function to mount the target component to the node container may include the following steps: Step 301: Call the basic instantiation function in the target mounting function to instantiate the target component to obtain an instance of the target component.

[0028] This step is intended to be executed by the component mounting method (for example Figure 1 The terminal devices 101, 102, and 103 shown in the figure can call the basic instantiation function in the target mounting function to instantiate the target component to obtain an instance of the target component. The target mounting function can encapsulate the basic instantiation function in the second development tool set, and the basic instantiation function can be a function in the second development tool set used to convert the component constructor into a usable instance object. For example, in the San framework, the basic instantiation function is the new keyword. When the San framework is used as the second development tool set, the new keyword can be encapsulated in the target mounting function. It should be noted that the basic instantiation function can be different for different front-end development frameworks, and the embodiments of the present disclosure are not limited to this. In the embodiments of the present disclosure, a function can refer to a function or keyword, etc., which can implement the described function. In this embodiment, the execution subject calls the target mounting function, and the basic instantiation function in the second development tool set can be called through the target mounting function to instantiate the target component to obtain an instance of the target component.

[0029] Step 302: Call the basic mount function in the target mount function to mount the instance of the target component to the node container.

[0030] On the basis of step 301, this step is intended to enable the above-mentioned execution subject to call the basic mount function in the target mount function to mount the instance of the target component to the node container. Among them, the target mount function can also be encapsulated with the basic mount function in the second development tool set, and the basic instantiation function and the basic mount function in the second development tool set can be encapsulated to obtain the target mount function. For example, in the San framework, the basic mount function is the attach function. When the San framework is used as the second development tool set, the new keyword and the attach function can be encapsulated to obtain the target mount function. It should be noted that for different front-end development frameworks, the basic mount function may be different, and the embodiments of the present disclosure do not limit this. In this embodiment, the execution subject calls the target mount function, and the basic mount function in the second development tool set can be called through the target mount function to mount the instance of the target component to the node container.

[0031] This embodiment encapsulates the basic instantiation function and basic mounting function in the second development tool set through the target mounting function, so that the target mounting function is exposed and called by the target web page built by the first development tool set, so that the target component can be instantiated and mounted by calling the function provided by the second development tool set through the target mounting function, thereby realizing the reuse of multiple development tool sets of the target component.

[0032] Please refer to Figure 4 , Figure 4 A flowchart of another component mounting method provided by an embodiment of the present disclosure, wherein process 400 may include the following steps: Step 401: during the loading process of a target webpage, a node container of a target node in a document object model of the target webpage is created, wherein the target webpage is constructed based on a first development tool set.

[0033] Step 402: Mount the target component to the node container by calling the target mount function, and display the target component at the target node position on the target web page, wherein the target component is created based on the second development tool set, and the target mount function is a function preset in the second development tool set that supports external calls.

[0034] The above steps 401 and 402 are similar to the Figure 2 Step 201 is the same as step 202. For the same content, please refer to Figure 2 The corresponding parts of the embodiment shown are not described in detail here.

[0035] Step 403: Data is transmitted between the target component and other components displayed on the target web page by calling a predefined interface function in the target component.

[0036] This step is intended to be executed by the component mounting method (for example Figure 1 The terminal devices 101, 102, and 103 shown in the figure transfer data between the target component and other components displayed on the target webpage by calling predefined interface functions in the target component. The other components may be components that have a parent-child relationship with the target component, in which case the data transfer between the target component and the other components is parent-child component communication. The other components may also be components that have a sibling relationship with the target component, in which case the data transfer between the target component and the other components is sibling component communication. The other components may also be cross-level components with the target component, in which case the data transfer between the target component and the other components is cross-level component communication. The embodiments of the present disclosure do not limit the type of communication between components. The predefined interface function may be a function in the target component created by the second development toolset that is used for data transfer between components. For example, in the San framework, the predefined interface function may include the data.set function. It should be noted that the predefined interface functions may vary for different front-end development frameworks and may also vary for different types of communication between components, and the embodiments of the present disclosure do not limit this.

[0037] In this embodiment, the execution subject mounts the target component to the node container by calling the target mount function, and the target mount function returns an instance of the target component. The execution subject can call the predefined interface function in the example of the target component through the instance of the target component to transfer data between the target component and other components displayed on the target web page. Among them, the data transmission between the target component and other components can be the target component transmitting data to other components, or other components transmitting data to the target component, or the target component and other components transmitting data in both directions. The embodiments of the present disclosure do not limit this. The execution subject can call the predefined interface function in the target component according to the method provided by the first development tool set to transfer data between the target component and other components displayed on the target web page. The embodiments of the present disclosure do not limit this. For example, in the React framework, the useEffect function can be used to call the predefined interface function in the target component to transfer data between the target component and other components displayed on the target web page.

[0038] After mounting the target component on the node container of the document object model of the target web page, this embodiment can transfer data between the target component and other components by directly calling the predefined interface function in the target component, thereby conveniently realizing communication between components across development tool sets.

[0039] Please refer to Figure 5 , Figure 5A flowchart of communication between other components and a target component is provided for some embodiments of the present disclosure, wherein the communication between the other components displayed on the target webpage and the target component, calling a predefined interface function in the target component to transfer data may include the following steps: Step 501: In response to monitoring that other components transmit data to a target component, a predefined interface function is called to synchronize data with the target component according to the transmitted data.

[0040] This step is intended to be executed by the component mounting method (for example Figure 1 The terminal devices 101, 102, and 103 shown in the figure respond to monitoring other components transmitting data to the target component, and call the predefined interface function to synchronize the data of the target component according to the transmitted data. The execution subject can monitor the data transmitted by other components to the target component. When monitoring other components transmitting data to the target component, the predefined interface function can be called to synchronize the data of the target component according to the transmitted data, so as to facilitate the transfer of data of other components to the target component, so that components reused across development tool set components can meet the requirements of component use. For example, the data input into other components by the business side user or the data generated by the user operating other components are transferred to the target component for display. Among them, the execution subject can monitor the data transmission from other components to the target component according to the method provided by the first development tool set, and the embodiment of the present disclosure is not limited to this.

[0041] Optionally, the execution entity can monitor data transmission from other components to the target component. When it monitors data transmission from other components to the target component and the transmitted data changes, it can call a predefined interface function to synchronize data with the target component based on the transmitted data. For example, the first development tool set is the React framework, and the second development tool set is the San framework. The execution entity can use the useEffect function to monitor data transmission from other components to the target component. When it monitors data transmission from other components to the target component and the transmitted data changes, it can call the data.set function in the target component to synchronize data with the target component based on the transmitted data.

[0042] Step 502: Render the target component displayed on the target webpage based on the synchronized data.

[0043] On the basis of step 501, this step is intended to enable the above-mentioned execution subject to render the target component displayed on the target web page based on the synchronized data. Among them, the data changes of the target component caused by the data synchronization of the target component may trigger the re-rendering of the target component, or may not trigger the re-rendering of the target component. When the data synchronization of the target component triggers the re-rendering of the target component, the execution subject may call the rendering function to render the target component displayed on the target web page, thereby updating the target component displayed on the target web page, so that the components reused across the development tool set components can meet the requirements of component use. For example, in the San framework, calling the data.set function to modify the data of the target component can trigger the re-rendering of the target component. It should be noted that for different front-end development frameworks, the method of starting the re-rendering of the target component and the rendering function for rendering the target component may be different, and the embodiments of the present disclosure do not limit this.

[0044] Please refer to Figure 6 , Figure 6 This is a flowchart of an embodiment of a component mounting method provided by an embodiment of the present disclosure, wherein process 600 may include the following steps: Step 601: During the loading process of a target webpage, a node container of a target node in a document object model of the target webpage is created based on a first hook function in a first development tool set, wherein the target webpage is constructed based on the first development tool set.

[0045] In this embodiment, the first development toolset may be a React framework. During the target webpage loading process, a node container of a target node in a DOM may be created using a useRef function in the React framework.

[0046] Step 602: Based on the second hook function in the first development tool set, the target component is mounted to the node container by calling the target mount function, and the target component is displayed at the position of the target node on the target web page, wherein the target component is created based on the second development tool set, and the target mount function is a predefined function in the second development tool set that supports external calls.

[0047] In this embodiment, the second development toolset can be a San framework, and the useEffect function in the React framework can be used to call the target mounting function exposed by the San framework, mount the target component to the node container of the DOM, and display the target component on the target web page.

[0048] Step 603: Based on the second hook function of the first development tool set, data is transmitted between the target component and other components displayed on the target webpage by calling a predefined interface function in the target component.

[0049] In this embodiment, for the target component displayed on the target webpage, the useEffect function in the React framework can also be used to call the data.set function in the target component to transfer data between the target component and other components displayed on the target webpage.

[0050] The above steps 601, 602 and 603 are the same as those in the Figure 2 Steps 201, 202 and Figure 4 The same steps as shown in step 403 are shown in the following table. Figure 2 and Figure 4 The corresponding parts of the embodiment shown are not described in detail here.

[0051] To deepen understanding, this disclosure also provides a specific implementation solution in combination with a specific application scenario, please refer to Figure 7 shown. Figure 7 This is a schematic diagram of a specific application scenario of the present disclosure. A webpage is constructed based on the React framework. By calling components in the San framework component library 710, the San framework components are mounted on the React framework webpage, enabling cross-framework component reuse. The San framework component library 710 exposes a function, mountComponent 720, for mounting instances of San components. Specifically, the following steps are included: Step 701: A user accesses a web page built with the React framework, loads the web page, and creates a node container for the Dom of the web page through the useRef of the React framework.

[0052] Step 702: By calling mountComponent 720 in the life cycle of useEffect of the React framework, the instance 730 of the San component is mounted on the node container of the Dom, and the San component is displayed on the page built by the React framework.

[0053] Step 703: Use useEffect to listen to the data that needs to be passed to the instance 730 of the San component. When the data changes, call the method in the instance 730 of the San component, such as instance method 1 or instance method 2, to synchronize the data and trigger the re-rendering of the San component displayed on the page according to the changed component data.

[0054] The method provided in this embodiment can realize the reuse of components and avoid repeated development. The commonly used method at present is component reconstruction, which develops component libraries for two frameworks, React and San, at the same time. The development cost is high, the subsequent maintenance cost is high, and two versions of component libraries need to be maintained. The cross-framework calling component provided in this embodiment allows products with different development languages ​​to call components, greatly reducing development costs and improving the efficiency of product iteration. This solution has been applied to the BLS log service product.

[0055] Further references Figure 8 , as a response to the above Figure 2 The embodiment of the present disclosure provides a component mounting device. Figure 8 As shown, the component mounting apparatus 800 of this embodiment may include: a node container creation module 801 and a target component mounting module 802 .

[0056] The node container creation module 801 is configured to create a node container for a target node in the document object model of the target webpage during loading, wherein the target webpage is constructed based on the first development tool set. The target component mounting module 802 is configured to mount a target component into the node container by calling a target mounting function, thereby displaying the target component at the target node position on the target webpage, wherein the target component is created based on the second development tool set, and the target mounting function is a function preset in the second development tool set that supports external calls.

[0057] In this embodiment, the specific processing of the node container creation module 801 and the target component mounting module 802 in the component mounting device 800 and the technical effects thereof can be referred to in the respective Figure 2 The relevant descriptions of steps 201-202 in the corresponding implementation manner are omitted here.

[0058] In some optional implementations of this embodiment, the target mounting function encapsulates a basic instantiation function and a basic mounting function in the second development tool set; The target component mounting module 802 is further configured to: Calling the basic instantiation function in the target mounting function to instantiate the target component to obtain an instance of the target component; The basic mount function in the target mount function is called to mount the instance of the target component to the node container.

[0059] In some optional implementations of this embodiment, the node container creation module 801 is further configured to create the node container of the target node in the document object model of the target web page based on the first hook function in the first development tool set.

[0060] In some optional implementations of this embodiment, the target component mounting module 802 is further configured to call the target mounting function to mount the target component to the node container based on the second hook function in the first development tool set.

[0061] In some optional implementations of this embodiment, the component mounting device 800 further includes: The component data transmission module is configured to transmit data between the target component and other components displayed on the target web page by calling a predefined interface function in the target component.

[0062] In some optional implementations of this embodiment, the component data transmission module is further configured to call the predefined interface function to synchronize data of the target component according to the transmitted data in response to monitoring the other components transmitting data to the target component.

[0063] In some optional implementations of this embodiment, the component data transmission module is further configured to render the target component displayed on the target webpage based on the synchronized data.

[0064] In some optional implementations of this embodiment, the component data transmission module is further configured to call a predefined interface function in the target component based on the second hook function of the first development tool set.

[0065] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the component mounting method described in any of the above embodiments can be implemented when the at least one processor executes them.

[0066] According to an embodiment of the present disclosure, the present disclosure further provides a readable storage medium, which stores computer instructions, and the computer instructions are used to enable a computer to implement the component mounting method described in any of the above embodiments when executed.

[0067] According to an embodiment of the present disclosure, the present disclosure further provides a computer program product, which, when executed by a processor, can implement the component mounting method described in any of the above embodiments.

[0068] Figure 9A schematic block diagram of an example electronic device 900 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0069] like Figure 9 As shown, device 900 includes a computing unit 901, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 902 or a computer program loaded from a storage unit 908 into a random access memory (RAM) 903. RAM 903 may also store various programs and data required for the operation of device 900. Computing unit 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to bus 904.

[0070] Various components in the device 900 are connected to the I / O interface 905, including an input unit 906, such as a keyboard, a mouse, etc.; an output unit 907, such as various types of displays, speakers, etc.; a storage unit 908, such as a magnetic disk, an optical disk, etc.; and a communication unit 909, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 909 allows the device 900 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0071] The computing unit 901 can be any general-purpose and / or specialized processing component with processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 901 performs the various methods and processes described above, such as the component mounting method. For example, in some embodiments, the component mounting method can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 908. In some embodiments, part or all of the computer program can be loaded and / or installed onto the device 900 via the ROM 902 and / or the communication unit 909. When the computer program is loaded into the RAM 903 and executed by the computing unit 901, one or more steps of the component mounting method described above can be performed. Alternatively, in other embodiments, the computing unit 901 can be configured to perform the component mounting method in any other suitable manner (e.g., via firmware).

[0072] Various embodiments of the systems and techniques described above can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include being implemented in one or more computer programs that are executable and / or interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0073] The program code for implementing the method of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device so that when the program code is executed by the processor or controller, the functions / operations specified in the flow chart and / or block diagram are implemented. The program code can be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0074] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of machine-readable storage media may include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), optical fibers, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0075] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0076] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0077] A computer system may include a client and a server. The client and server are generally remote from each other and typically interact via a communication network. This client-server relationship arises through computer programs running on the respective computers and establishing a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host. This is a hosting product within the cloud computing service ecosystem that addresses the management difficulties and limited scalability of traditional physical hosting and virtual private server (VPS) services.

[0078] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this disclosure can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved. This is not a limitation herein.

[0079] The above specific embodiments do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure shall be included within the scope of protection of this disclosure.

Claims

1. A component mounting method, comprising: During the loading process of a target webpage, creating a node container of a target node in a document object model of the target webpage, wherein the target webpage is constructed based on a first development tool set; The target component is mounted to the node container by calling the target mount function, and the target component is displayed at the position of the target node on the target web page, wherein the target component is created based on the second development tool set, and the target mount function is a function preset in the second development tool set that supports external calls.

2. The method according to claim 1, wherein The target mounting function encapsulates the basic instantiation function and the basic mounting function in the second development tool set; The calling of the target mounting function to mount the target component to the node container includes: Calling the basic instantiation function in the target mounting function to instantiate the target component to obtain an instance of the target component; The basic mount function in the target mount function is called to mount the instance of the target component to the node container.

3. The method according to claim 1, wherein The step of creating a node container of a target node in a document object model of the target webpage includes: Based on the first hook function in the first development tool set, the node container of the target node in the document object model of the target webpage is created.

4. The method according to claim 1, wherein The calling of the target mounting function to mount the target component to the node container includes: Based on the second hook function in the first development tool set, the target mounting function is called to mount the target component to the node container.

5. The method according to any one of claims 1 to 4, further comprising: Data is transmitted between the target component and other components displayed on the target web page by calling a predefined interface function in the target component.

6. The method according to claim 5, wherein: The transmitting of data between the target component and other components displayed on the target webpage by calling a predefined interface function in the target component includes: In response to monitoring that the other component transmits data to the target component, the predefined interface function is called to synchronize data with the target component according to the transmitted data.

7. The method according to claim 6, further comprising: Based on the synchronized data, the target component displayed on the target webpage is rendered.

8. The method according to claim 5, wherein The calling of a predefined interface function in the target component includes: The second hook function based on the first development tool set calls the predefined interface function in the target component.

9. A component mounting device, comprising: a node container creation module configured to create a node container of a target node in a document object model of a target webpage during loading of the target webpage, wherein the target webpage is constructed based on a first development tool set; A target component mounting module is configured to mount the target component to the node container by calling a target mounting function, and display the target component at the position of the target node on the target web page, wherein the target component is created based on a second development tool set, and the target mounting function is a function preset in the second development tool set that supports external calls.

10. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor. The instructions are executed by the at least one processor to enable the at least one processor to perform the component mounting method according to any one of claims 1 to 8.

11. A non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute the component mounting method according to any one of claims 1 to 8.

12. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the steps of the component mounting method according to any one of claims 1 to 8.

Images