Processing method and device for dynamically introducing Web component based on application runtime

Abstract

The invention discloses a processing method and device for dynamically introducing a Web component based on application runtime, and relates to the technical field of code development, and the method comprises the following steps: when a Web application runs, obtaining a user demand and different states of the application; according to the user demand and the application state, determining a version identifier and a component script file corresponding to the current Web component from a server in which a Web component library is pre-established; a plurality of Web components corresponding to different user requirements and different application states, and version identifiers and component script files corresponding to the components are pre-stored in the Web component library; and dynamically loading the component script file corresponding to the current component according to a preset component version strategy and the version identifier corresponding to the current component, and dynamically rendering and displaying the Web component. According to the method and the device, different versions of Web components can be dynamically loaded and rendered according to different requirements of users and different states of the application when the application runs.

Description

Technical Field

[0001] The present invention relates to the technical field of code development, and in particular to a processing method and device for dynamically introducing a Web component based on application runtime. Background Art

[0002] This section is intended to provide a background or context to the embodiments of the invention recited in the claims. No description herein is admitted to be prior art by inclusion in this section.

[0003] The current status of Web component development is: With the rapid development of Web development technology, Web development relies heavily on component development methods to improve development efficiency and code reusability. Componentization not only promotes the standardization of development processes, but also makes it easier to manage and maintain large-scale Web applications. The current mainstream component development and usage methods are: developers develop / publish npm packages, and users use them after importing them through npm. The introduction of npm dependencies usually occurs during the build phase of the project, and developers add the required JavaScript libraries or frameworks to the project through commands. These dependencies are recorded in the package.json file, and then these dependencies can be packaged into the final application through the build tool, which means that the components are packaged into the application during the build phase, resulting in time-consuming, labor-intensive, inflexible and unstable development of Web applications. Summary of the invention

[0004] The embodiment of the present invention provides a processing method for dynamically introducing a Web component based on application runtime, which is used to dynamically load and render different versions of WebComponent components according to different user requirements and different states of the application when the Web application is running. The method includes:

[0005] When the Web application is running, obtain the user's demand for the Web Component and the different states of the Web application;

[0006] According to the user's demand for Web Component components and different states of Web applications, a version identifier and a component script file corresponding to the current Web Component component are determined from a server with a pre-established Web Component component library; the Web Component component library pre-stores a plurality of Web Component components corresponding to different user demands and different states of Web applications, as well as a version identifier and a component script file corresponding to each component;

[0007] According to the preset component version strategy and the version identifier corresponding to the current Web Component component, the component script file corresponding to the current Web Component component is dynamically loaded; the component version strategy is: according to the processing logic of the preset loading component function, the component version is dynamically introduced and the corresponding component version is dynamically rendered;

[0008] According to the preset component version strategy, the current Web Component is dynamically rendered and displayed on the preset page.

[0009] The embodiment of the present invention also provides a processing device for dynamically introducing a Web component based on application runtime, which is used to dynamically load and render different versions of WebComponent components according to different user requirements and different states of the application when the Web application is running. The device includes:

[0010] The acquisition unit is used to obtain the user's demand for the Web Component and different states of the Web application when the Web application is running;

[0011] A determination unit is used to determine, according to user requirements for Web Component components and different states of Web applications, a version identifier and a component script file corresponding to the current Web Component component from a server that has a Web Component component library pre-established; the Web Component component library pre-stores a plurality of Web Component components corresponding to different user requirements and different states of Web applications, as well as a version identifier and a component script file corresponding to each component;

[0012] A dynamic loading unit, used to dynamically load a component script file corresponding to the current Web Component component according to a preset component version strategy and a version identifier corresponding to the current Web Component component; the component version strategy is: a strategy for dynamically introducing a component version and dynamically rendering a corresponding component version according to a processing logic of a preset component loading function;

[0013] The dynamic rendering unit is used to dynamically render and display the current Web Component on a preset page according to the preset component version strategy.

[0014] An embodiment of the present invention further provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned processing method for dynamically introducing Web components based on application runtime when executing the computer program.

[0015] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processing method for dynamically introducing a Web component based on application runtime is implemented.

[0016] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the processing method for dynamically introducing a Web component based on application runtime is implemented.

[0017] The beneficial technical effect of the processing solution based on dynamically introducing Web components during application runtime provided by the embodiment of the present invention is: compared with the technical solution in the prior art in which components are packaged into applications during the construction phase, the embodiment of the present invention can dynamically load and render different versions of Web Component components from a server with a pre-established WebComponent component library when the Web application is running according to the real-time needs of users and the different states of the Web application, thereby making the development of Web applications efficient, flexible and stable. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the prior art descriptions. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0019] Figure 1 A schematic diagram of a process for dynamically introducing a Web component based on application runtime in an embodiment of the present invention;

[0020] Figure 2 A schematic diagram of the processing principle of dynamically introducing a Web component based on application runtime in an embodiment of the present invention;

[0021] Figure 3 A schematic diagram of the process of rendering and displaying a Web Component in an embodiment of the present invention;

[0022] Figure 4 A schematic diagram of the structure of a processing device for dynamically introducing a Web component based on application runtime in an embodiment of the present invention;

[0023] Figure 5 The figure is a schematic diagram of the structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0024] To make the purpose, technical solution and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings. Here, the exemplary embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0025] The acquisition, transmission, storage, use, and processing of data in the technical solution of this application comply with the relevant provisions of national laws and regulations.

[0026] It should be noted that in the embodiments of the present application, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present application, but it does not mean that the applicant has or will necessarily use the solution.

[0027] Figure 1 FIG. 1 is a flow chart of a processing method for dynamically introducing a Web component based on application runtime in an embodiment of the present invention. Figure 1 As shown, the method comprises the following steps:

[0028] Step 101: When the Web application is running, obtain the user's demand for the Web Component and different states of the Web application;

[0029] Step 102: according to the user's demand for the Web Component and different states of the Web application, determine the version identifier and component script file corresponding to the current Web Component from a server that has a pre-established Web Component library; the Web Component library pre-stores a plurality of Web Components corresponding to different user demands and different states of the Web application, as well as the version identifier and component script file corresponding to each component;

[0030] Step 103: dynamically load the component script file corresponding to the current Web Component component according to the preset component version strategy and the version identifier corresponding to the current Web Component component; the component version strategy is: dynamically introduce the component version and dynamically render the corresponding component version according to the processing logic of the preset component loading function;

[0031] Step 104: According to the preset component version strategy, dynamically render and display the current WebComponent component on the preset page.

[0032] The processing method for dynamically introducing Web components based on application runtime provided by the embodiment of the present invention, when working: when the Web application is running, obtain the user's demand for Web Component components and the different states of the Web application; according to the user's demand for Web Component components and the different states of the Web application, determine the version identifier and component script file corresponding to the current Web Component component from a server with a pre-established Web Component component library; the Web Component component library pre-stores multiple Web Component components corresponding to different user needs and different states of the Web application, as well as the version identifier and component script file corresponding to each component; according to the preset component version policy and the version identifier corresponding to the current Web Component component, dynamically load the component script file corresponding to the current Web Component component; the component version policy is: according to the processing logic of the preset component loading function, dynamically introduce the component version and dynamically render the corresponding component version strategy; according to the preset component version policy, dynamically render and display the current Web Component component on a preset page.

[0033] The beneficial technical effect of the processing method for dynamically introducing Web components based on application runtime provided by the embodiment of the present invention is that compared with the technical solution in the prior art in which components are packaged into applications during the construction phase, the embodiment of the present invention can dynamically load and render different versions of Web Component components from a server with a pre-established WebComponent component library when the Web application is running according to the real-time needs of users and the different states of the Web application, making the development of Web applications efficient, flexible and stable. The processing method for dynamically introducing Web components based on application runtime is described in detail below.

[0034] The processing method for dynamically introducing a Web component based on application runtime proposed in the embodiment of the present invention is a dynamic component loading method, which allows a Web application to dynamically load and render a Web Component component as needed during runtime. The component user can use a specified version of the component or the latest version of the component according to their own needs. Figure 2 A schematic diagram of the processing principle of dynamically introducing a Web component based on application runtime in an embodiment of the present invention; Figure 3 The following is a flow chart of rendering and displaying Web Component components in an embodiment of the present invention. Figures 2 to 3 Provide a detailed introduction.

[0035] In the above step 101, the user's needs may be: the component version v1.0 may not meet the latest needs, and the new required functions are implemented in v2.0, so the third-party user needs to update to v2.0. In the embodiment of the present invention, Web Components: allow developers to create reusable components, using encapsulated HTML, CSS and JavaScript. These elements can be reused in Web applications. They ensure the isolation of styles and scripts, thereby improving the maintainability and reusability of the code. The different states of the application can be a production environment or a test environment, a mobile environment or a computer PC environment, different browser environments, etc.

[0036] In the above step 102, loading the most appropriate component version according to different needs of users and different states of applications may include:

[0037] 1. The different states of the application can be production environment or test environment. The production environment uses version v2.0, and the test environment uses the newly developed version v3.0 that has not yet been put into production;

[0038] 2. The different states of the application can also be, for example, the mobile terminal uses version v3.0, and the PC terminal uses version v2.0;

[0039] 3. Different states of the application can also be different browsers. Browser A uses version v3.0, and browser B uses version v2.0.

[0040] In one embodiment, the update of the Web Component library in step 102 is performed independently of the applications using the components, so that new versions of the components can be released at any time and are immediately available.

[0041] In the embodiment of the present invention, when developing a Web component library, the development team needs to ensure that each Web Component in the Web Component library has a clearly defined interface and function, and each version of the component must be properly marked and version controlled.

[0042] In specific implementation, the components in the embodiment of the present invention are deployed independently: Figure 2 As shown, the component library can be independently deployed on a server, and the component library can be updated independently of the applications that use these components, which means that new versions of components can be released at any time and are immediately available.

[0043] In specific implementation, in the scenario of introducing components by using npm dependencies in the embodiment of the present invention, when the component developer frequently releases components, the component user needs to update the dependency version at the same time and republish / update the service. In addition, when the component user uses different technology stacks, the component developer needs to redevelop the components of the corresponding technology stack for their use. Web application component updates often require rebuilding and deploying the entire application, which is not only time-consuming and labor-intensive, but may also cause problems in the application due to errors or incompatibility during the update process. This lack of flexibility in the update mechanism limits the rapid iteration and improvement of the application. Therefore, the method of introducing dependencies through npm packages is not the best path, and there is a problem of inflexible component updates. In contrast, the management system proposed in the embodiment of the present invention focuses on the runtime dynamic introduction of Web Component components. This means that the components are not packaged into the application during the construction phase, but are dynamically loaded from the server at runtime according to the real-time needs of the application. The update of the Web Component component library is independent of the application that uses the component, so that the new version of the component can be released at any time and immediately available. Independence of component release and service release: supports updating components without republishing the current application, supports independent release and independent deployment by component developers, reduces maintenance costs, and improves the availability and stability of applications. At the same time, dynamic import at runtime: Dynamic import allows developers to handle dependencies between components more flexibly, reduce unnecessary dependency loading, and improve application operation efficiency.

[0044] In specific implementation, traditional Web components are developed based on a certain technology stack and can only adapt to applications developed with the corresponding technology stack. The use of components is affected by aspects such as the technology framework, framework version, and dependency environment, and the reusability of components is low.

[0045] In addition, the traditional iframe embedding component solution has the following performance problems, and compared with the traditional iframe embedding component solution, the solution and advantages of the embodiment of the present invention are:

[0046] In the existing iframe solution, the loaded content runs in an independent environment and is highly isolated from the parent page. In addition, the iframe loads a complete HTML page, including additional HTML, CSS, and JavaScript files, which may cause performance overhead. In contrast, Web Component components are lighter and can control the loaded resources more finely, making them more suitable for building high-performance applications.

[0047] In the existing iframe solution, cross-domain communication is limited: the interaction between the parent page and the iframe is limited by the same-origin policy. Although communication can be carried out through some technologies (such as window.postMessage), this increases the complexity of development. Web Component components can more conveniently transmit information to the page.

[0048] In existing iframe solutions, version and dependency management is difficult: When using iframes to include third-party services or pages, it becomes more difficult to manage the versions and dependencies of these resources. In contrast, this application can more easily manage component versions and dependencies.

[0049] In the above step 103, if Figure 2 As shown, when dynamically loading components, the application can dynamically load different versions of components according to current needs, whether loading the default version (such as Figure 2 , which points to version 1 or 2, or a specific older version (such as Figure 2 Dynamically loading components provides great flexibility for applications, allowing development teams and users to choose the most suitable component version according to specific needs.

[0050] In one embodiment, the Web Component library also pre-stores the version type of each component; the version type includes: a default version type and a user-specified version type;

[0051] The processing method for dynamically introducing Web components based on application runtime also includes: updating the component version according to the following component version update strategy: for applications using default version type components, when a new version is released, the Web application automatically adopts the new version, and for applications using user-specified version type components, they are not affected by the release of the new version.

[0052] In specific implementation, the component update strategy adopted in the embodiment of the present invention is: for applications using default components, the release of a new version means that the application will automatically adopt the new version (if index.js is updated to point to the new version). For applications with a specified user-specified version, they will not be affected by the release of a new version unless an explicit version update is performed.

[0053] In specific implementation, for the user-specified version (such as Figure 2For example, the following uses version 2.0. If a new version 3.0 is released, but the version passed in when the dynamically loaded component is introduced is still 2.0, then the latest version 3.0 will not be used at this time, and the original version 2.0 will continue to be used. This version is the version specially specified by the customer according to the needs.

[0054] In one embodiment, the above processing method for dynamically introducing a Web component based on application runtime may further include: performing hot update processing on the Web Component according to the following method:

[0055] Simulate regular checking and updating of component versions by calling functions at regular intervals;

[0056] When a new version of a component is detected, redefine and register a new Web Component class;

[0057] Find the existing component instance and replace it with the new Web Component class to implement hot update processing of the Web Component component.

[0058] In specific implementation, component version control and hot update mechanism: The present invention introduces component version control and hot update mechanism, so that Web Component components can be updated or replaced without restarting the application. This mechanism realizes dynamic update of components by maintaining component version information and checking and loading the latest version of components at runtime, greatly improving the maintainability and user experience of Web applications. Specifically, JavaScript can be used to simulate, specifically, setInterval can be used to simulate regular check for updates. When a new version is detected, a new Web Component class is redefined and registered, and then the existing component instance is found for replacement to achieve the effect of hot update.

[0059] In one embodiment, in the above step 103, dynamically loading the component script file corresponding to the current Web Component component according to the preset component version strategy and the version identifier corresponding to the current Web Component component may include: dynamically loading the component script file corresponding to the current Web Component component using the import() function of JavaScript according to the preset component version strategy and the version identifier corresponding to the current Web Component component.

[0060] In specific implementation, the embodiment of the present invention can use the import() function of JavaScript to dynamically load components. This function allows the path to be dynamically constructed according to the component name and version number, thereby loading the corresponding component code and improving the processing efficiency of dynamically introducing Web components.

[0061] In the above steps 103 and 104, the component version strategy may be: according to the processing logic of the loadComponent function, the version is dynamically passed in and the corresponding version is dynamically rendered.

[0062] In one embodiment, in the above step 104, if Figure 3 As shown, according to the preset component version strategy, rendering and displaying the current Web Component component on the preset page includes the following steps:

[0063] Step 201: upon receiving a rendering and display request for an HTML page, start downloading and parsing the HTML code of the page;

[0064] Step 202: When an element of a custom Web Component is detected in the HTML code, check whether the element has been registered in the client element customElements;

[0065] Step 203: If the component has been registered, create an instance of the component and call its constructor;

[0066] Step 204: In the constructor, the component creates a Shadow DOM, which is a DOM subtree isolated from the main DOM of the page;

[0067] Step 205: The component creates and organizes the required elements in the Shadow DOM, including: adding text nodes and other HTML elements;

[0068] Step 206: For the styles inside the component, process the styles defined in the Shadow DOM to ensure that the styles are only applied to the elements inside the component and do not affect other parts of the page;

[0069] Step 207: Continue parsing the rest of the page, and wait for the resources inside the component to be loaded;

[0070] Step 208: When all resources of the component are loaded and its internal DOM structure and style are ready, the current Web Component is rendered to the page to make the current Web Component visible.

[0071] In specific implementation, the detailed steps for page rendering and display are as follows:

[0072] 1. The browser receives a request for an HTML page and starts downloading and parsing the HTML code of the page.

[0073] 2. When the browser encounters a custom Web Component element (such as <my-component>), it checks if the element is already registered in customElements.

[0074] 3. If the component has been registered, the browser creates an instance of the component and calls its constructor.

[0075] 4. In the constructor, the component creates Shadow DOM (if specified). Shadow DOM is a DOM subtree isolated from the main DOM of the page.

[0076] 5. The component creates and organizes the required elements in Shadow DOM, such as adding text nodes, other HTML elements (which can be elements other than Web Component elements), etc.

[0077] 6. For styles inside components, the browser processes the style rules defined in Shadow DOM to ensure that these styles are only applied to elements inside the component without affecting other parts of the page.

[0078] 7. The browser will continue to parse the rest of the page while waiting for the resources inside the component (such as images, scripts, etc.) to load.

[0079] 8. Once all the resources of the component are loaded and its internal DOM structure and styles are ready, the browser will render the component to the page, making it visible.

[0080] In specific implementation, the above steps of rendering and displaying the current Web Component on the preset page are efficient, flexible, and have good rendering effect.

[0081] In specific implementation, the above rendering process of the embodiment of the present invention utilizes the custom elements of Web Components, which allows developers to define new HTML tags. By creating custom elements, developers can create new components with specific behaviors and styles, which can be used in Web applications like any standard HTML elements.

[0082] The following describes a further preferred solution of a processing method for dynamically introducing a Web component based on application runtime in an embodiment of the present invention.

[0083] In one embodiment, the above-mentioned processing method for dynamically introducing Web components based on application runtime may also include: utilizing the isolation feature of Web Component to isolate styles and scripts for each component. In the embodiment of the present invention, dynamic introduction refers to the process of loading and introducing resources or modules as needed when the application is running (not at the beginning).

[0084] In specific implementation, it is difficult to completely isolate the operating environment of components with existing component development technology, and style conflicts or JavaScript global variable pollution are prone to occur between components, which affects the maintainability and stability of the application. In order to solve this problem, component management and environment isolation are performed in the embodiment of the present invention: to solve the dependency conflicts and global pollution problems between components, the present invention uses the isolation characteristics of Web Component to isolate styles and scripts for each component, and to solve the problem that components and their dependencies may be very complex in large applications, and traditional dependency management methods are difficult to ensure the correctness and stability of dependencies between components, modular technology is used to manage component dependencies, ensuring the independence of components and the stability of applications.

[0085] During the specific implementation, when managing components and isolating the environment, the component class is defined, Shadow DOM is created to achieve style isolation, the component's internal style is created, and the component's internal script is created.

[0086] In one embodiment, the version of the Web Component is processed through a directory structure, and the component script file identifier corresponding to each component is stored in a subdirectory containing the version identifier.

[0087] In specific implementation, in the embodiment of the present invention, in terms of version management, the component version in the embodiment of the present invention can be managed by a directory structure. Each version is stored in a subdirectory containing a version number. This structure facilitates subsequent version retrieval and loading.

[0088] In one embodiment, the above processing method for dynamically introducing Web components based on application runtime may also include: setting a default version of each Web Component through an index.js file, and the index.js file is updated as needed to point to the latest version of the component or a user-specified version.

[0089] In specific implementation, in the embodiment of the present invention, the default version setting is: through an index.js file, the default version of each component is set. This file can be updated according to user needs to point to the latest version of the component or the user-specified version, thereby improving the flexibility of Web Component component processing. For example, the following component version codes are v1.0 and v2.0. For example, if a third-party team member wants to use the latest version of v2.0, they can call the load component function to call the latest version of lv2.0; update as needed to point to the latest version of the component or the user-specified version.

[0090] In one embodiment, the above-mentioned processing method for dynamically introducing Web components based on application runtime may also include: in the process of dynamically loading the component script file corresponding to the current Web Component, if a network error, path error or version error occurs, these errors are captured and recorded through a preset exception handling strategy to facilitate troubleshooting.

[0091] In specific implementation, during the loading process, if any error (such as network error, path error or non-existent version, etc.) is encountered, the embodiment of the present invention captures and records these errors through an exception handling mechanism to facilitate troubleshooting and improve the security and stability of Web component processing.

[0092] In one embodiment, the above processing method for dynamically introducing a Web component during application runtime may further include: adding a version identifier as a suffix to the name of the component script file to avoid conflicts between components of different versions in the global namespace.

[0093] In specific implementation, when developing existing Web components, there are dependency conflicts, global pollution and other problems between components, which lead to application anomalies. Existing component version control is insufficient, and applications may need to use different versions of the same component at the same time, but traditional Web development technology does not support this. The lack of an effective component version control mechanism makes it difficult for developers to use multiple versions of components in parallel in the same application. In an embodiment of the present invention, a version number (identifier) ​​is added as a suffix to the component name to avoid conflicts between different versions of components in the global namespace, so that the application supports the use of different versions of components in the same application.

[0094] In summary, the processing method for dynamically introducing Web components at application runtime proposed in the present invention is a processing method for Web Components based on dynamic introduction at runtime, which aims to solve the problems of inflexible component updates and component technology stack limitations in current Web application development. By dynamically introducing and managing Web Components, the system can realize on-demand loading and updating of component versions, while ensuring the high performance and maintainability of Web applications and expanding the scope of component use.

[0095] The processing method for dynamically introducing Web components at application runtime proposed in the present invention is based on the management system and method of Web Components dynamically introduced at runtime, which has many significant advantages, which together improve the flexibility, maintainability and user experience of Web applications. The following are the detailed advantages of this technical solution:

[0096] 1. Improve application flexibility

[0097] 1) Dynamic component loading: In the embodiment of the present invention, the application can dynamically load the WebComponent component at runtime as needed, which means that the developer can load the most appropriate component version according to the different needs of users and the different states of the application, thereby increasing the flexibility and responsiveness of the application.

[0098] 2) Version selection function: In the embodiment of the present invention, developers and users can choose to use a user-specified version of a component, whether it is the latest version or an older version, to meet compatibility and specific function requirements.

[0099] 2. Optimize application maintainability

[0100] 1) Independent component update: In the embodiment of the present invention, components can be updated and deployed independently of applications, which means that modifications or updates to a single component will not affect other parts of the entire application, thereby reducing the risks brought by updates and simplifying application maintenance.

[0101] 2) Component version control: In the embodiment of the present invention, by maintaining the version information of the component and checking and loading the latest version of the component at runtime, the developer can easily manage multiple versions of the component to ensure that the application always uses the most appropriate component version.

[0102] 3. Improve user experience

[0103] 1) Reducing loading time: In the embodiment of the present invention, through the dynamic loading mechanism, the application only loads the components actually required by the user, reducing unnecessary resource loading, thereby speeding up the page loading speed and improving the user experience.

[0104] 2) Smooth component update: In the embodiment of the present invention, the hot update mechanism of the component ensures that the application will not interrupt the user's operation or reload the page when updating the component, thereby providing a smoother and seamless user experience.

[0105] 4. Enhance application stability and security

[0106] 1) Component dependency management and environment isolation: In the embodiment of the present invention, by isolating styles and scripts for each component and managing component dependencies using modular technology, this technical solution ensures the independence of components, avoids global pollution and dependency conflicts, and thus enhances the stability and security of the application.

[0107] 2) Naming conflict handling: In the embodiment of the present invention, a version suffix is ​​introduced to effectively solve the naming conflict problem that may occur in components of different versions in the global namespace.

[0108] 5.Support multiple versions in parallel

[0109] Use multiple versions of components in parallel: This solution supports using different versions of components in the same application in parallel, which is essential for gradually migrating old applications, testing new features, or maintaining backward compatibility.

[0110] In summary, the processing method for dynamically introducing Web components based on application runtime provided by the embodiment of the present invention provides an efficient, flexible and stable solution for developing Web applications through its innovative features such as dynamic component loading, component version control and hot update, dependency management and environment isolation. This not only helps developers build and maintain large and complex Web applications, but also significantly improves the experience of end users.

[0111] The embodiment of the present invention also provides a processing device for dynamically introducing a Web component based on application runtime, as described in the following embodiment. Since the principle of solving the problem by the device is similar to the processing method for dynamically introducing a Web component based on application runtime, the implementation of the device can refer to the implementation of the processing method for dynamically introducing a Web component based on application runtime, and the repeated parts will not be repeated.

[0112] Figure 4 FIG. 1 is a schematic diagram of a structure of a processing device for dynamically introducing a Web component based on application runtime in an embodiment of the present invention. Figure 4 As shown, the device comprises:

[0113] The acquisition unit 01 is used to acquire the user's demand for the Web Component and different states of the Web application when the Web application is running;

[0114] The determining unit 02 is used to determine the version identifier and component script file corresponding to the current Web Component component from a server that has a pre-established Web Component component library according to the user's demand for the Web Component component and different states of the Web application; the Web Component component library pre-stores a plurality of Web Component components corresponding to different user demands and different states of the Web application, as well as the version identifier and component script file corresponding to each component;

[0115] The dynamic loading unit 03 is used to dynamically load the component script file corresponding to the current Web Component component according to the preset component version strategy and the version identifier corresponding to the current Web Component component; the component version strategy is: according to the processing logic of the preset loading component function, dynamically introduce the component version and dynamically render the corresponding component version strategy;

[0116] The dynamic rendering unit 04 is used to dynamically render and display the current Web Component on a preset page according to the preset component version strategy.

[0117] In the embodiment of the present invention, the processing device for dynamically introducing Web components during application runtime supports version control, dependency management, and dynamic update of components, ensuring that the application can efficiently use the latest components.

[0118] In one embodiment, the dynamic rendering unit is specifically used for:

[0119] When receiving a rendering request for an HTML page, start downloading and parsing the HTML code of the page;

[0120] When a custom Web Component element is detected in the HTML code, check whether the element has been registered in the client element customElements;

[0121] If the component has been registered, create an instance of the component and call its constructor;

[0122] In the constructor, the component creates Shadow DOM, which is a DOM subtree isolated from the main DOM of the page;

[0123] The component creates and organizes the required elements in Shadow DOM, which includes: adding text nodes and other HTML elements;

[0124] For styles inside components, process the styles defined in Shadow DOM to ensure that the styles are only applied to elements inside the component without affecting other parts of the page;

[0125] Continue parsing the rest of the page while waiting for the resources inside the component to load;

[0126] When all the resources of the component are loaded and its internal DOM structure and style are ready, the current Web Component is rendered to the page to make the current Web Component visible.

[0127] In one embodiment, the processing device for dynamically introducing Web components based on application runtime may further include an isolation processing unit for isolating styles and scripts for each component by utilizing the isolation feature of the Web Component.

[0128] In one embodiment, the version of the Web Component is processed through a directory structure, and the component script file identifier corresponding to each component is stored in a subdirectory containing the version identifier.

[0129] In one embodiment, the above-mentioned processing device for dynamically introducing Web components based on application runtime may also include a version processing unit, which is used to set the default version of each Web Component component through an index.js file. The index.js file is updated as needed to point to the latest version of the component or the user-specified version.

[0130] In one embodiment, the dynamic loading unit is specifically used to: dynamically load the component script file corresponding to the current WebComponent component using the import() function of JavaScript according to a preset component version strategy and a version identifier corresponding to the current WebComponent component.

[0131] In one embodiment, the above-mentioned processing device for dynamically introducing Web components based on application runtime may also include a capture processing unit, which is used to capture and record network errors, path errors or version errors that do not exist when dynamically loading the component script file corresponding to the current Web Component, through a preset exception handling strategy, for troubleshooting.

[0132] In one embodiment, the processing device for dynamically introducing a Web component based on application runtime may further include an identification processing unit for adding a version identification as a suffix to the name of the component script file to avoid conflicts between components of different versions in the global namespace.

[0133] In one embodiment, the Web Component library is updated independently of the applications using the components, so that new versions of the components can be released at any time and are immediately available.

[0134] In one embodiment, the Web Component library also pre-stores the version type of each component; the version type includes: a default version type and a user-specified version type;

[0135] In one embodiment, the above-mentioned processing device for dynamically introducing Web components during application runtime may also include: updating the component version according to the following component version update strategy: for applications using default version type components, when a new version is released, the Web application automatically adopts the new version; for applications using user-specified version type components, they are not affected by the release of the new version.

[0136] In one embodiment, the processing device for dynamically introducing a Web component based on application runtime may further include a hot update processing unit, which is used to perform hot update processing on the Web Component according to the following method:

[0137] Simulate regular checking and updating of component versions by calling functions at regular intervals;

[0138] When a new version of a component is detected, redefine and register a new Web Component class;

[0139] Find the existing component instance and replace it with the new Web Component class to implement hot update processing of the Web Component component.

[0140] Based on the above invention concept, Figure 5 As shown, the present invention also proposes a computer device 500, including a memory 510, a processor 520, and a computer program 530 stored in the memory 510 and executable on the processor 520, wherein the processor 520 implements the aforementioned processing method for dynamically introducing Web components based on application runtime when executing the computer program 530.

[0141] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processing method for dynamically introducing a Web component based on application runtime is implemented.

[0142] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the processing method for dynamically introducing a Web component based on application runtime is implemented.

[0143] The beneficial technical effect of the processing solution based on dynamically introducing Web components during application runtime provided by the embodiment of the present invention is: compared with the technical solution in the prior art in which components are packaged into applications during the construction phase, the embodiment of the present invention can dynamically load and render different versions of Web Component components from a server with a pre-established WebComponent component library when the Web application is running according to the real-time needs of users and the different states of the Web application, thereby making the development of Web applications efficient, flexible and stable.

[0144] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0145] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0146] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0147] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0148] The specific embodiments described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A processing method for dynamically introducing a Web component during application runtime, characterized in that: include: When the Web application is running, obtain the user's demand for the Web Component and the different states of the Web application; According to the user's demand for Web Component components and different states of Web applications, a version identifier and a component script file corresponding to the current Web Component component are determined from a server with a pre-established Web Component component library; the Web Component component library pre-stores a plurality of Web Component components corresponding to different user demands and different states of Web applications, as well as a version identifier and a component script file corresponding to each component; According to the preset component version strategy and the version identifier corresponding to the current Web Component component, the component script file corresponding to the current Web Component component is dynamically loaded; the component version strategy is: according to the processing logic of the preset loading component function, the component version is dynamically introduced and the corresponding component version is dynamically rendered; According to the preset component version strategy, the current Web Component is dynamically rendered and displayed on the preset page.

2. The method according to claim 1, characterized in that According to the preset component version strategy, the current Web Component is rendered and displayed on the preset page, including: When receiving a rendering request for an HTML page, start downloading and parsing the HTML code of the page; When a custom Web Component element is detected in the HTML code, check whether the element has been registered in the client element customElements; If the component has been registered, create an instance of the component and call its constructor; In the constructor, the component creates Shadow DOM, which is a DOM subtree isolated from the main DOM of the page; The component creates and organizes the required elements in Shadow DOM, which includes: adding text nodes and other HTML elements; For styles inside components, process the styles defined in Shadow DOM to ensure that the styles are only applied to elements inside the component without affecting other parts of the page; Continue parsing the rest of the page while waiting for the resources inside the component to load; When all the resources of the component are loaded and its internal DOM structure and style are ready, the current WebComponent component is rendered to the page to make the current WebComponent component visible.

3. The method according to claim 1, characterized in that Also includes: Leverage the isolation feature of Web Component to isolate styles and scripts for each component.

4. The method according to claim 1, characterized in that The version of the Web Component is handled through a directory structure, and the component script file identifier corresponding to each component is stored in a subdirectory containing the version identifier.

5. The method according to claim 1, characterized in that Also includes: The default version of each Web Component is set through an index.js file, which is updated as needed to point to the latest version of the component or a user-specified version.

6. The method according to claim 1, characterized in that According to the preset component version strategy and the version identifier corresponding to the current WebComponent component, dynamically load the component script file corresponding to the current Web Component component, including: according to the preset component version strategy and the version identifier corresponding to the current Web Component component, use the import() function of JavaScript to dynamically load the component script file corresponding to the current Web Component component.

7. The method according to claim 1, characterized in that Also includes: In the process of dynamically loading the component script file corresponding to the current Web Component, if a network error, path error, or version error occurs, these errors are captured and recorded through the preset exception handling strategy for troubleshooting.

8. The method according to claim 1, characterized in that Also includes: Add a version identifier as a suffix to the name of the component script file to avoid conflicts between different versions of the component in the global namespace.

9. The method according to claim 1, characterized in that The Web Component library is updated independently of the applications that use the components, so that new versions of components can be released at any time and are immediately available.

10. The method according to claim 1, characterized in that The Web Component library also pre-stores the version type of each component; the version type includes: a default version type and a user-specified version type; The processing method for dynamically introducing Web components based on application runtime also includes: updating the component version according to the following component version update strategy: for applications using default version type components, when a new version is released, the Web application automatically adopts the new version, and for applications using user-specified version type components, they are not affected by the release of the new version.

11. The method according to claim 1, characterized in that It also includes hot update processing of Web Component components as follows: Simulate regular checking and updating of component versions by calling functions at regular intervals; When a new version of a component is detected, redefine and register a new Web Component class; Find the existing component instance and replace it with the new Web Component class to implement hot update processing of the Web Component component.

12. A processing device for dynamically introducing a Web component during application runtime, characterized in that: include: The acquisition unit is used to obtain the user's demand for the Web Component and different states of the Web application when the Web application is running; A determination unit is used to determine, according to user requirements for Web Component components and different states of Web applications, a version identifier and a component script file corresponding to the current Web Component component from a server that has a Web Component component library pre-established; the Web Component component library pre-stores a plurality of Web Component components corresponding to different user requirements and different states of Web applications, as well as a version identifier and a component script file corresponding to each component; A dynamic loading unit, used to dynamically load a component script file corresponding to the current Web Component component according to a preset component version strategy and a version identifier corresponding to the current Web Component component; the component version strategy is: a strategy for dynamically introducing a component version and dynamically rendering a corresponding component version according to a processing logic of a preset component loading function; The dynamic rendering unit is used to dynamically render and display the current WebComponent component on a preset page according to the preset component version strategy.

13. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 11 is implemented.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

15. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

Images