Method and device for dynamically loading layout theme in front-end web project and medium

Abstract

The invention relates to a method and equipment for dynamically loading a layout theme in a front-end web project and a medium. The method comprises the following steps: defining layout type objects corresponding to layout types; in a Web project initialization stage, a theme management center is registered through a singleton mode, and a layout controller is initialized; obtaining a current layout theme type in the environment variables, and inputting the current layout theme type into a layout controller; the layout controller generates and updates a corresponding layout type object according to the current layout theme type; performing dependency injection on the layout type object from the project outer-layer component to all sub-components through a layout Provider, responding to update of the layout type object and synchronizing the layout type object to each component; and each component dynamically renders the corresponding component type, layout type setting and interaction style based on the injected layout type object. Compared with the prior art, the method has the advantages of low redundancy, high flexibility, high resource utilization rate and the like.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method, device and medium for dynamically loading layout themes in a front-end web project. Background Art

[0002] In front-end web project development, dynamically loading layout themes to adapt to diverse needs is a key approach to improving user experience. Existing technologies typically implement switching between different layout themes by directly embedding conditionals within component rendering logic. For example, developers must write conditional statements within each relevant component based on environment variables or configuration parameters to determine the current layout type and execute the corresponding rendering logic. While this approach can achieve basic layout switching functionality, it has significant drawbacks. First, with each new layout theme type, developers must repeatedly add conditional logic to all components that use that theme, resulting in redundant and bloated code, significantly increasing maintenance costs and the risk of errors. Second, conditionals distributed across components lead to repeated computations, particularly during component tree rendering, requiring multiple checks of layout type status. This not only increases runtime overhead but can also reduce rendering efficiency due to frequent Virtual DOM (VDOM) diffs. Furthermore, this implementation approach limits system scalability, as adding or adjusting layout themes requires simultaneous modifications across multiple components, severely restricting development flexibility and maintainability.

[0003] Chinese patent application CN114547515A is a page generation method, system, device, equipment and storage medium, including a display layer, an editing layer and a rendering layer that can be dynamically connected to the page generation system, and the dynamic configuration and real-time rendering of components are realized by decoupling the editing layer and the rendering layer. However, the application does not involve the ability to dynamically switch the overall page layout theme. If the layout theme needs to be switched, it is still necessary to manually adjust the properties of each component or reconfigure the component library, resulting in insufficient scalability and inability to achieve unified switching of the global layout. Therefore, how to implement a layout theme dynamic loading method that is efficient, low-coupling and easy to expand is a technical problem that needs to be solved. Summary of the Invention

[0004] The purpose of the present invention is to overcome the defects of the above-mentioned prior art and provide a method, device and medium for dynamically loading layout themes in front-end web projects, which determines whether updates and rendering are required based on the standard structure of layout type objects, reduces code risks and redundancy.

[0005] The purpose of the present invention can be achieved by the following technical solutions:

[0006] According to one aspect of the present invention, a method for dynamically loading layout themes in a front-end web project is provided, the specific steps comprising:

[0007] S1. Define a layout type object corresponding to each layout type, wherein the layout type object includes a component layer and a style layer;

[0008] S2. During the initialization phase of the Web project, register the theme management center through the singleton mode, and initialize the layout controller in the theme management center. The layout controller is used to store the current layout theme type and its corresponding layout type object;

[0009] S3. Obtain the current layout theme type from the environment variable, and input the current layout theme type into the layout controller; the layout controller generates and updates the corresponding layout type object according to the current layout theme type;

[0010] S4. Dependency injection of the layout type object from the project outer component to all subcomponents is performed through the layout provider. The layout provider responds to updates of the layout type object and synchronizes them to each component.

[0011] S5. Each component dynamically renders the corresponding component type, layout layout, and interaction style based on the injected layout type object, where component rendering adopts on-demand loading.

[0012] Furthermore, the component layer and style layer of the layout type object in S1 are both nested multi-level structures, the fields of the component layer include the class name of the component and the sub-element rendering logic, and the fields of the style layer include CSS variables and dynamic interaction logic.

[0013] Furthermore, the component layer is used to define the component type to be rendered under the current layout theme type; the style layer is used to define the layout and typesetting rules and interaction style of the component.

[0014] Furthermore, in S2, the theme management center is integrated into the front-end framework in the form of a plug-in and mounted to the global instance through the Vuex state management mode. The theme management center includes controllers for color, layout and version.

[0015] Furthermore, the environment variable in S3 includes a configuration file, a user setting, or a layout identifier returned by a dynamic request, and the layout controller matches a predefined layout type object according to the identifier.

[0016] Furthermore, in S4, the layout provider implements cross-level data transfer through the dependency injection mechanism of the front-end framework, and triggers responsive updates of the component tree when the layout type object is updated.

[0017] Furthermore, in S5, the on-demand loading method includes dynamically importing asynchronous components based on component layer fields, and injecting CSS variables into the component scope according to style layer fields.

[0018] Furthermore, the layout provider monitors the state changes of the layout controller and triggers responsive rendering of components when the layout type object is updated.

[0019] According to a second aspect of the present invention, an electronic device is provided, comprising a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the method when executing the program.

[0020] According to a third aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the method described above is implemented.

[0021] Compared with the prior art, the present invention has the following beneficial effects:

[0022] (1) Reduce code redundancy and maintenance costs: By defining layout type objects, the component layer and the style layer are separated, and the rendering logic of different layout themes is unified and abstracted into a standardized configuration. When adding a new layout type, you only need to expand the definition of the layout type object, without having to repeatedly add conditional judgment logic in the component, thereby effectively avoiding code bloat and reducing maintenance risks.

[0023] (2) Improve system scalability and development flexibility: Based on the design of the theme management center and layout provider, the layout controller centrally manages the configuration of all layout themes and implements global responsive updates through the dependency injection mechanism. When adding or adjusting layout themes, only the configuration needs to be modified in the layout controller, without the need for synchronized adjustments across components, significantly improving system scalability and development efficiency.

[0024] (3) Optimize rendering performance and resource utilization: Dynamically render components using on-demand loading, combined with the global responsive update mechanism of the layout provider, to avoid layer-by-layer recursive verification and redundant calculations of the component tree. At the same time, through dynamic CSS variable injection and asynchronous component loading, runtime overhead is reduced, improving page rendering efficiency and resource utilization. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 A flowchart of a method for dynamically loading layout themes in a front-end web project;

[0026] Figure 2 A framework diagram for a method of dynamically loading layout themes in front-end web projects. DETAILED DESCRIPTION

[0027] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts should fall within the scope of protection of the present invention.

[0028] like Figure 1 As shown, a method for dynamically loading layout themes in a front-end web project is provided. The specific steps include:

[0029] S1. Define layout type objects corresponding to each layout type. The layout type objects include a component layer and a style layer.

[0030] S2. During the initialization phase of the Web project, register the theme management center through the singleton mode and initialize the layout controller in the theme management center. The layout controller is used to store the current layout theme type and its corresponding layout type object.

[0031] S3. Obtain the current layout theme type from the environment variable and input the current layout theme type into the layout controller; the layout controller generates and updates the corresponding layout type object according to the current layout theme type;

[0032] S4. Dependency injection of layout type objects from the project's outer components to all subcomponents is performed through the layout provider. The layout provider responds to updates of the layout type objects and synchronizes them to each component.

[0033] S5. Each component dynamically renders the corresponding component type, layout layout, and interaction style based on the injected layout type object, where component rendering adopts on-demand loading.

[0034] In S1, the component layer and style layer of layout type objects are both nested multi-level structures. The fields of the component layer include the component class name and sub-element rendering logic, and the fields of the style layer include CSS variables and dynamic interaction logic. The component layer is used to define the component type to be rendered under the current layout theme type; the style layer is used to define the layout layout rules and interaction style of the component. For example, the component layer of the compact layout specifies the header component as CompactHeader, the sidebar uses the compact-sidebar class name, and renders the menu and search sub-elements; the style layer defines the CSS variable --primary-color as dark blue, and the layout rule is a single-column grid.

[0035] The structure of a layout type object, for example:

[0036] Whether to add compact layout style;

[0037] Whether to display the approval status in the drawer header;

[0038] Whether the comment box expands after being focused;

[0039] Whether to use compact layout icons;

[0040] Approval component related styles;

[0041] Form drawer related styles.

[0042] In S2, during the web project initialization phase, the Theme Management Center plugin is registered using a singleton pattern to ensure a globally unique instance. The Theme Management Center is integrated into the front-end framework and mounted to the global instance via the state management library. The layout controller, the core module of the Theme Management Center, stores the current layout theme type and its corresponding layout type object. The singleton pattern avoids duplicate instantiation and reduces memory usage. Centralized layout configuration management addresses the maintenance challenges associated with decentralized logic in existing technologies.

[0043] Environment variables in S3 include configuration files, user settings, or layout identifiers returned by dynamic requests. The layout controller matches predefined layout type objects based on the identifiers. Figure 2 As shown in the figure, the Theme Management Center is a theme-related plug-in, including controllers for colors, layouts, and versions. The Layout Controller is a layout controller within the Theme Management Center that generates layout type objects based on the layout theme type and manages and maintains the current layout type objects. The Layout Provider is a mechanism for cross-layer communication between components. The Layout Controller uses the Provider to responsively update the layout type objects in the component. The Provider implements data communication between components through dependency injection. The Business Component Layer is the basic component of the page, rendering different styles and sub-components based on the layout theme object.

[0044] S3 retrieves the current layout theme type from the environment variable and injects it into the layout controller. The layout controller then calls the constructor or update method to generate a layout type object. To add a new layout theme type, simply add the relevant logic to the layout controller. Each layout theme type has a corresponding layout type object. Layout type objects are multi-layered objects. The component layer controls the components that need to be rendered for the current layout theme type, while the style layer determines the layout layout and specific interaction styles within the rendered components.

[0045] In S4, the layout provider implements cross-level data transfer through the dependency injection mechanism of the front-end framework, and triggers responsive updates of the component tree when the layout type object is updated.

[0046] In S5, on-demand loading involves dynamically importing asynchronous components based on component-level fields and injecting CSS variables into the component scope based on style-level fields. This on-demand loading of components during rendering improves rendering performance and ultimately completes the display of layout theme types.

[0047] At the same time, the layout provider monitors the state changes of the layout controller and triggers responsive rendering of components when the layout type object is updated.

[0048] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the described module can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0049] The electronic device of the present invention includes a central processing unit (CPU), which can perform various appropriate actions and processes according to computer program instructions stored in a read-only memory (ROM) or loaded from a storage unit into a random access memory (RAM). In the RAM, various programs and data required for device operation can also be stored. The CPU, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0050] Multiple components in the device are connected to the I / O interface, including: input units, such as a keyboard and mouse; output units, such as various types of displays and speakers; storage units, such as magnetic disks and optical disks; and communication units, such as network cards, modems, and wireless communication transceivers. The communication unit allows the device to exchange information / data with other devices via computer networks such as the Internet and / or various telecommunications networks. The processing unit performs the various methods and processes described above, such as the method of the present invention. For example, in some embodiments, the method of the present invention can be implemented as a computer software program that is tangibly contained in a machine-readable medium, such as a storage unit. In some embodiments, part or all of the computer program can be loaded and / or installed onto the device via ROM and / or the communication unit. When the computer program is loaded into RAM and executed by the CPU, one or more steps of the method of the present invention described above can be performed. Alternatively, in other embodiments, the CPU can be configured to perform the method of the present invention by any other suitable means (e.g., by means of firmware).

[0051] The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, and without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chip (SOCs), complex programmable logic devices (CPLDs), and the like.

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

[0053] In the context of the present invention, machine-readable medium can be a tangible medium that can contain or store a program for use with an instruction execution system, device or equipment or used in combination with an instruction execution system, device or equipment. Machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. Machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared or semiconductor systems, devices or equipment, or any suitable combination of the foregoing. More specific examples of machine-readable storage media can include electrical connections based on one or more lines, portable computer disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), optical fibers, portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0054] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in the present invention, and such modifications or substitutions are intended to be within the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be subject to the scope of protection of the claims.

Claims

1. A method for dynamically loading layout themes in a front-end web project, characterized in that: The specific steps include: S1. Define a layout type object corresponding to each layout type, wherein the layout type object includes a component layer and a style layer; S2. During the initialization phase of the Web project, register the theme management center through the singleton mode, and initialize the layout controller in the theme management center. The layout controller is used to store the current layout theme type and its corresponding layout type object; S3. Obtain the current layout theme type from the environment variable, and input the current layout theme type into the layout controller; the layout controller generates and updates the corresponding layout type object according to the current layout theme type; S4. Dependency injection of the layout type object from the project outer component to all subcomponents is performed through the layout provider. The layout provider responds to updates of the layout type object and synchronizes them to each component. S5. Each component dynamically renders the corresponding component type, layout layout, and interaction style based on the injected layout type object, where component rendering adopts on-demand loading.

2. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: The component layer and style layer of the layout type object in S1 are both nested multi-level structures. The fields of the component layer include the class name of the component and the sub-element rendering logic, and the fields of the style layer include CSS variables and dynamic interaction logic.

3. A method for dynamically loading layout themes in a front-end web project according to claim 2, characterized in that: The component layer is used to define the component type to be rendered under the current layout theme type; the style layer is used to define the layout and typesetting rules and interaction style of the component.

4. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: In the S2, the theme management center is integrated into the front-end framework in the form of a plug-in and mounted to the global instance through the Vuex state management mode. The theme management center includes controllers for color, layout and version.

5. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: The environment variables in S3 include a configuration file, a user setting, or a layout identifier returned by a dynamic request, and the layout controller matches a predefined layout type object according to the identifier.

6. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: In S4, the layout provider implements cross-level data transfer through the dependency injection mechanism of the front-end framework, and triggers responsive updates of the component tree when the layout type object is updated.

7. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: In S5, the on-demand loading method includes dynamically importing asynchronous components based on component layer fields, and injecting CSS variables into the component scope based on style layer fields.

8. A method for dynamically loading layout themes in a front-end web project according to claim 1, characterized in that: The layout provider monitors the state changes of the layout controller and triggers responsive rendering of components when the layout type object is updated.

9. An electronic device comprising a memory and a processor, wherein a computer program is stored in the memory, wherein: When the processor executes the program, the method according to any one of claims 1 to 8 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 8 is implemented.

Images