Cross-technical framework atomic component loading method and device

Abstract

The invention discloses a cross-technical-framework atomic component loading method and device, and relates to the technical field of the Internet, and the method comprises the steps: creating a user-defined component; introducing a preset loader to the target item; in the target project, registering a user-defined component based on a loader; and using the custom component in the target item. According to the method and the device, multiplexing of the component in a project of a cross-technical framework is realized, an isolated running environment is created, so that the component does not cause negative influence on a host project, a way for customizing the component during running is also provided, and the use requirements of samples can be met.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, in particular to a cross-technology framework atomic component loading method and device. BACKGROUND

[0002] With the development of Internet technology, the field of front-end development has undergone rapid evolution and innovation. Modern web applications not only need to run in different technology frameworks, but also need to adapt to multi-terminal devices (such as PC, mobile device) and complex business requirements. Traditional development patterns often face challenges such as component duplication, compatibility issues, and high maintenance costs. At the same time, users have higher expectations for application performance and experience, such as fast page loading, smooth interaction experience, etc. The background technology involved in the present application mainly includes Web Component, import-html-entry, and rollup.js.

[0003] Web Components is a set of standard technologies that allow developers to create reusable custom HTML (HyperText Markup Language, HyperText Markup Language) elements and seamlessly integrate with native HTML elements. It includes Custom Elements, Shadow DOM (Document Object Model, Document Object Model) and HTMLTemplates, providing modularity, encapsulation and reusability, allowing developers to create complex and feature-rich web applications while simplifying maintenance and testing. Custom Elements allows HTML tags to be extended to meet various needs; Shadow DOM ensures that the internal implementation details of the component are encapsulated, avoiding conflicts with other parts of the page; HTML Templates allows the definition and reuse of complex HTML structures. Web Components is also compatible with modern front-end frameworks (such as React, Vue and Angular), enhancing cross-framework component reuse capabilities, optimizing application performance, and reducing initial loading time, thereby promoting the modularization and componentization development of front-end development.

[0004] import-html-entry is a frontend library that dynamically loads and parses HTML entry files, enabling Single Page Applications (SPAs) to be modularized and loaded on-demand in a micro-frontend architecture. This library provides a convenient method for dynamically importing JavaScript and CSS (Cascading Style Sheets) resources by parsing script and link tags within HTML files, ensuring that different sub-applications do not interfere with each other during loading. It supports asynchronous loading and resource caching, improving loading performance and user experience. import-html-entry is also compatible with existing micro-frontend frameworks such as qiankun, enhancing the flexibility and extensibility of applications, allowing developers to more efficiently build and maintain complex frontend projects.

[0005] Rollup.js is an advanced JavaScript module bundler designed to help developers package multiple small ES (Expert System) modules into an efficient file. By statically analyzing import and export statements in the code, Rollup.js generates minimized and optimized code, significantly reducing the size of the bundle and improving performance. This tool is particularly suitable for library development, supporting Tree Shaking technology to effectively remove unused code and further optimize performance. Additionally, Rollup.js has a rich plugin ecosystem, supporting features such as code splitting, Babel translation, CommonJS module conversion, and is highly compatible with modern JavaScript development tools and frameworks such as React and Vue. With its efficient packaging capabilities and wide applicability, Rollup.js has become an important tool in the field of frontend development.

[0006] In view of the current technical means, an atomic component loading technology across technical frameworks is proposed. SUMMARY

[0007] In view of the defects in the prior art, the purpose of the present application is to provide a cross-technical framework atomic component loading method and device, which realizes the reuse of components in cross-technical framework projects, creates an isolated running environment to prevent components from affecting the host project, and provides a way to customize components at runtime, meeting the same use requirements.

[0008] To achieve the above purpose, the technical solution adopted by the present application is: In a first aspect, the present application provides a cross-technical framework atomic component loading method, comprising the following steps: creating a custom component; introducing a preset loader into a target project; registering the custom component in the target project based on the loader; using the custom component in the target project.

[0009] On the basis of the above technical solutions, the entry of the custom component is HTML or JavaScript; The life cycle of the custom component includes startup completion, after loading, after updating, and after uninstalling.

[0010] On the basis of the above technical solutions, the step of introducing the preset loader into the target project comprises the following steps: Compiling the loader into a library that can be directly run, and introducing the compiled library into the target project based on a preset mode.

[0011] On the basis of the above technical solutions, the preset mode comprises an NPM (Node Package Manager) mode, an UMD (Universal Module Definition) mode, and an ES Module mode.

[0012] On the basis of the above technical solutions, the step of registering the custom component in the target project based on the loader comprises the following steps: Based on the loader, analyzing the custom component to obtain codes corresponding to templates, scripts, and style sheets of the custom component; Collecting the codes corresponding to the templates, scripts, and style sheets of the custom component based on the loader; Processing the codes corresponding to the templates, scripts, and style sheets of the custom component based on the loader, and registering the custom component.

[0013] In a second aspect, the application provides a cross-technology framework atomic component loading system, which comprises: a component creation module for creating a custom component; a loader introduction module for introducing a preset loader into a target project; a component registration module for registering the custom component in the target project based on the loader; a component usage module for using the custom component in the target project.

[0014] On the basis of the above technical solutions, the entry of the custom component is HTML or JavaScript; The life cycle of the custom component includes start-up completion, after loading, after updating, and after uninstalling.

[0015] On the basis of the above technical solution, the loader introduction module is further configured to compile the loader into a library that can be directly run, and introduce the compiled library into the target project based on a preset mode.

[0016] On the basis of the above technical solution, the preset mode includes an NPM mode, a UMD mode, and an ES Module mode.

[0017] On the basis of the above technical solution, the component registration module is further configured to analyze the custom component based on the loader, and obtain codes corresponding to a template, a script, and a style sheet of the custom component; The component registration module is further configured to collect the codes corresponding to the template, the script, and the style sheet of the custom component based on the loader; The component registration module is further configured to process the codes corresponding to the template, the script, and the style sheet of the custom component based on the loader, and register the custom component.

[0018] Compared with the prior art, the application has the following advantages: The application realizes the reuse of components in projects across technical frameworks, creates an isolated running environment so that the components do not have a negative impact on the host project, and provides a way to customize the components at runtime, which can meet the use requirements of the same type. BRIEF DESCRIPTION OF DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the application, the following will briefly introduce the drawings needed to be used in the embodiment description. Obviously, the drawings in the following description are only some embodiments of the application, and other drawings can be obtained by those skilled in the art without creative labor.

[0020] Figure 1 The step flow chart of the cross-technical framework atomic component loading method of the embodiment of the application; Figure 2 The loading flowchart of the custom component in the cross-technical framework atomic component loading method of the embodiment of the application; Figure 3 The running flowchart of the custom component in the cross-technical framework atomic component loading method of the embodiment of the application; Figure 4 The structural block diagram of the cross-technical framework atomic component loading system of the embodiment of the application. DETAILED DESCRIPTION

[0021] To make the purposes, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are some but not all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by a person of ordinary skill in the art without creative work fall within the protection scope of the present application.

[0022] The embodiments of the present application are further described below in detail with reference to the drawings.

[0023] The embodiments of the present application provide a cross-technology framework atomic component loading method and device, which realizes reuse of components in projects across technology frameworks, creates an isolated running environment so that the components do not have negative effects on host projects, and provides a way to customize components at runtime, which can meet the same use demand.

[0024] To achieve the above technical effects, the general idea of the present application is as follows: A cross-technology framework atomic component loading method, the method comprising the following steps: S1, creating a custom component; S2, introducing a preset loader to a target project; S3, registering the custom component based on the loader in the target project; S4, using the custom component in the target project.

[0025] The embodiments of the present application are further described below in detail with reference to the drawings.

[0026] In a first aspect, referring to Figures 1-3 The embodiments of the present application provide a cross-technology framework atomic component loading method, the method comprising the following steps: S1, creating a custom component; S2, introducing a preset loader to a target project; S3, registering the custom component based on the loader in the target project; S4, using the custom component in the target project.

[0027] In the embodiments of the present application, reuse of components in projects across technology frameworks is realized, an isolated running environment is created so that the components do not have negative effects on host projects, and a way to customize components at runtime is provided, which can meet the same use demand; Specifically, in use, the front-end page can be atomized, and different business demands and display demands of different terminal devices can be met through arrangement and combination.

[0028] Further, the entry of the custom component is HTML or JavaScript; The life cycle of the custom component includes startup completion, after loading, after updating, and after uninstallation.

[0029] Further, the preset loader is introduced into the target project, including the following steps: The loader is compiled into a directly executable library, and the compiled library is introduced into the target project based on a preset manner.

[0030] Further, the preset manner includes NPM, UMD, and ES Module.

[0031] Further, in the target project, the custom component is registered based on the loader, including the following steps: Based on the loader, the custom component is analyzed to obtain the code corresponding to the template, script, and style sheet of the custom component; Based on the loader, the code corresponding to the template, script, and style sheet of the custom component is collected; Based on the loader, the code corresponding to the template, script, and style sheet of the custom component is processed, and the custom component is registered.

[0032] Specifically, based on the technical solutions of the embodiments of the present application, the following situations occur in specific implementation: Step S1, creating a custom component: The component has two forms, one is a component with HTML as the entry, which is a traditional front-end page and can be rendered independently. The second is a component with JavaScript as the entry, which must have a host environment, so it can only be used as a component. Regardless of the form of the component, four life cycles, "startup completion", "after loading", "after updating", and "after uninstallation", need to be defined in the design process. The four life cycles are an abstraction of the general state of the component in front-end rendering, and custom logic can be added to meet business requirements. Among them, "after loading" and "after updating" can obtain the container node provided by the component user and the properties passed in, where the container node is the position where the custom component will be rendered, and the properties are a way for the user to customize the custom component due to different business requirements.

[0033] Step S2, introducing a loader into the user project: Rollup is used to compile the loader source code into a directly executable library, and upload it to the CDN or package management server according to the usage requirements. There are three ways to introduce the loader: the first is the NPM way, which supports the introduction through the current popular library management tool. The second is the UMD way, which can be introduced through the native script tag, suitable for projects that do not use modular management tools. The third is the ES Module way, suitable for modern browsers, which provides natural modular support and isolation.

[0034] Step S3, register the custom component in the project of the use side: Register through the registration function provided by the loader, and pass the configuration item to the loader. During the registration process, the loader will analyze, collect and process the component. HTML components and JavaScript components will be extracted into three parts of code, namely templates, scripts and style sheets. If there are external references in the component, they will also be collected during this process. After the code processing is completed, the loader will create a document fragment and mount the extracted code to the document fragment. Finally, the customElements.define Register the component.

[0035] Step S4, use the custom component: Use the custom component in the project, just like using the native HTML element. When the interface data changes or the presentation needs to be changed, you can control its behavior by updating the properties passed to the component. In addition, the loader will create a sandbox environment for the custom component to avoid conflicts with other components in the project code, ensuring that the component runs in isolation, thereby avoiding unexpected results.

[0036] As shown in the Figure 2 and Figure 3 of the accompanying drawings, Figure 2 the loading process of the custom component, i.e. the micro-component, Figure 3 the running process of the custom component, i.e. the micro-component.

[0037] The technical effects of the technical solutions of the embodiments of the present application are as follows: 1. Component reuse: the present application supports the reuse of components in different technical framework projects, including PC and mobile applications, and even supports micro-component nesting, reducing the workload of repeated development and improving the development efficiency.

[0038] 2. Hot update: during development, hot updates of components can be implemented, and developers can see the modification effect without restarting the application, thereby speeding up the development speed and iteration cycle.

[0039] 3. Isolation from the host: the component executes in an independent running environment, does not interfere or affect the stability of the host application, and ensures that the main application will not crash due to component problems.

[0040] 4. Server-side rendering (SSR, Server-Side Rendering): support for server-side rendering, speeding up the first screen rendering of single-page applications, and improving the first loading experience of users.

[0041] 5. Unified interaction: through standardized and unified component interaction design, reduce the user's mental burden, make users more easily adapt and use the application, and improve the overall user experience.

[0042] In summary, the present application has significant advantages in improving team development efficiency and improving user experience. Component reuse and hot update function optimize the development process, reduce the workload and speed up the iteration speed, and the independent running environment and the support of server-side rendering ensure the stability and performance of the application. The unified interaction design further improves the user's experience.

[0043] In a second aspect, referring to Figure 4 The embodiment of the present application provides a cross-technology framework atomic component loading system, which comprises: a component creation module for creating a custom component; a loader introduction module for introducing a preset loader into a target project; a component registration module for registering the custom component in the target project based on the loader; a component usage module for using the custom component in the target project.

[0044] In the embodiment of the present application, the reuse of components in cross-technology framework projects is realized, which not only creates an isolated running environment to prevent components from affecting the host project, but also provides a way to customize components at runtime to meet similar usage needs. Specifically, in use, the front-end page can be atomized, and different business needs and display needs of different terminal devices can be met through arrangement and combination.

[0045] Further, the entry of the custom component is HTML or JavaScript. The life cycle of the custom component includes startup completion, after loading, after updating, and after uninstalling.

[0046] Further, the loader introduction module is also used to compile the loader into a library that can be directly run, and introduce the compiled library into the target project based on a preset method.

[0047] Furthermore, the preset methods include NPM method, UMD method, and ES Module method.

[0048] Furthermore, the component registration module is also used to analyze the custom component based on the loader to obtain the code corresponding to the template, script and style sheet of the custom component; The component registration module is also used to collect the code corresponding to the template, script and style sheet of the custom component based on the loader; The component registration module is also used to process the code corresponding to the template, script and style sheet of the custom component based on the loader, and register the custom component.

[0049] Specifically, the technical solution based on the embodiments of this application is implemented as follows: Step S1, create a custom component: There are two types of components: one is an HTML component, similar to a traditional front-end page, which can be rendered independently. The second type is a JavaScript component, which requires a host environment and can only be used as a component. Regardless of the type, components need to define four lifecycles during the design process: "After Startup," "After Loading," "After Update," and "After Unloading." These four lifecycles are abstractions of the common states of a component during front-end rendering, allowing for the integration of custom logic to meet business needs. The "After Loading" and "After Update" lifecycles can obtain the container node provided by the component user and the passed attributes. The container node indicates the location where the custom component will be rendered, while the attributes provide a way for users to customize the component according to different business requirements.

[0050] Step S2, import the loader into the user's project: Rollup is used to compile the loader source code into a directly executable library and upload it to a CDN or package management server as needed. There are three ways to include a loader: First, NPM, which supports inclusion through popular library management tools. Second, UMD, which can be included via native script tags and is suitable for projects that don't use modularity management tools. Third, ES Modules, which is suitable for modern browsers and provides natural modularity support and isolation.

[0051] Step S3: Register the custom component in the user's project: Registration is performed using the registration function provided by the loader, along with passing configuration items to the loader. During registration, the loader analyzes, collects, and processes the component. Both HTML and JavaScript components are extracted into three parts: template, script, and stylesheet. External references to the component are also collected during this process. After code processing, the loader creates a document fragment and mounts the extracted code to that fragment. Finally, the Web component is used... customElements.define Register the component.

[0052] Step S4, using a custom component: Using custom components in a project is just like using native HTML elements. When API data changes or the presentation needs to be altered, you can control the component's behavior by updating the properties passed to it. Furthermore, the loader creates a sandbox environment for custom components to avoid conflicts with the code of other components in the project, ensuring that the component runs in isolation and thus preventing unexpected results.

[0053] The technical effects of the technical solution in this application embodiment are as follows: 1. Component reuse: This application supports the reuse of components in projects with different technical frameworks, including PC and mobile applications, and even supports nested micro-components, reducing the workload of repetitive development and improving development efficiency.

[0054] 2. Hot update: During development, components can be hot-updated, allowing developers to see the changes without restarting the application, thereby speeding up development and iteration cycles.

[0055] 3. Isolation from the host: The component executes in an independent runtime environment, which will not interfere with or affect the stability of the host application, ensuring that the main application will not crash due to component issues.

[0056] 4. Server-Side Rendering (SSR): Supports server-side rendering, speeding up the first-screen rendering of single-page applications and improving the user's initial loading experience.

[0057] 5. Unified Interaction: By standardizing and unifying the component interaction design, the mental burden on users is reduced, making it easier for users to adapt to and use the application, thereby improving the overall user experience.

[0058] In summary, this application has significant advantages in improving team development efficiency and enhancing user experience. Component reuse and hot update functions optimize the development process, reduce workload and accelerate iteration speed, while the support for independent running environment and server-side rendering ensures application stability and performance, and the unified interaction design further enhances the user experience.

[0059] In summary, the cross-technology framework atomic component loading system provided in this application embodiment has the same technical principles as the cross-technology framework atomic component loading method provided in the first aspect in terms of technical problems, technical solutions and technical effects, so it will not be described in detail here.

[0060] In the description of this application, it should be noted that the terms "upper," "lower," etc., indicating the orientation or positional relationship are based on the orientation or positional relationship shown in the accompanying drawings, and are only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this application. Unless otherwise expressly specified and limited, the terms "installed," "connected," and "linked" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; they can refer to the internal communication between two elements. For those skilled in the art, the specific meaning of the above terms in this application can be understood according to the specific circumstances.

[0061] It should be noted that in this application, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0062] The above description is merely a specific embodiment of this application, enabling those skilled in the art to understand or implement this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for loading atomic components across technology frameworks, characterized in that, The method includes the following steps: Create a custom component; Introduce a pre-defined loader to the target project; In the target project, the custom component is registered based on the loader; Use the custom component in the target project.

2. The cross-technology framework atomic component loading method as described in claim 1, characterized in that: The entry point for the custom component is either HTML or JavaScript; The lifecycle of the custom component includes startup completion, loading, updating, and uninstallation.

3. The cross-technology framework atomic component loading method as described in claim 1, characterized in that, The process of introducing a preset loader into the target project includes the following steps: The loader is compiled into a directly executable library, and the compiled library is imported into the target project according to a preset method.

4. The cross-technology framework atomic component loading method as described in claim 3, characterized in that: The preset methods include NPM, UMD, and ES Module.

5. The cross-technology framework atomic component loading method as described in claim 1, characterized in that, Registering the custom component in the target project based on the loader includes the following steps: Based on the loader, the custom component is analyzed to obtain the code corresponding to the template, script, and style sheet of the custom component; The loader collects the code corresponding to the templates, scripts, and style sheets of the custom component. The loader processes the code corresponding to the template, script, and style sheet of the custom component and registers the custom component.

6. A cross-technology framework atomic component loading system, characterized in that, The system includes: The component creation module is used to create a custom component; The loader import module is used to import a pre-defined loader into the target project; A component registration module, used to register the custom component in the target project based on the loader; The component uses a module that is used to use the custom component in the target project.

7. The cross-technology framework atomic component loading system as described in claim 6, characterized in that: The entry point for the custom component is either HTML or JavaScript; The lifecycle of the custom component includes startup completion, loading, updating, and uninstallation.

8. The cross-technology framework atomic component loading system as described in claim 6, characterized in that: The loader import module is also used to compile the loader into a library that can be run directly, and to import the loader compiled into a library into the target project according to a preset method.

9. The cross-technology framework atomic component loading system as described in claim 8, characterized in that: The preset methods include NPM, UMD, and ES Module.

10. The cross-technology framework atomic component loading system as described in claim 6, characterized in that: The component registration module is also used to analyze the custom component based on the loader to obtain the code corresponding to the template, script and style sheet of the custom component; The component registration module is also used to collect the code corresponding to the template, script and style sheet of the custom component based on the loader; The component registration module is also used to process the code corresponding to the template, script and style sheet of the custom component based on the loader, and register the custom component.

Images