Multi-level front-end page layout and state linkage management method and system

Abstract

The invention discloses a multi-level front-end page layout and state linkage management method and a multi-level front-end page layout and state linkage management system, which belong to the technical field of front-end development, and are characterized in that page layout is configured in a declarative manner through a JSON (JavaScript Object Notation) format, and component states are automatically managed by adopting a multi-level linkage mechanism to realize front-end The JSON configuration comprises an id field definition business logic module identifier and a struct field definition layout rule; dynamic rendering and state linkage are realized by separating the business logic and the layout structure of the component and combining a hierarchical data binding mechanism; and the child hierarchy automatically triggers state emptying or data loading operation by monitoring data change of the parent hierarchy. According to the method, the problems of high page and logic coupling degree, complex state management and poor expansibility in the prior art can be solved, clear decoupling and automatic linkage are realized, and the method is easy to expand.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular to a multi-level front-end page layout and status linkage management method and system. Background Art

[0002] Existing front-end frameworks (such as React and Vue) often require hard-coding data transfer and state management between components in business code. This leads to highly coupled page layout and logic, high maintenance costs, and cross-component dependencies require the use of a global state library or event bus, increasing complexity. Furthermore, in multi-level linkage scenarios, developers often manually write a large number of event listeners and conditional branches, which is error-prone and difficult to scale. Given these issues, a unified, declarative configuration solution is urgently needed to simplify the development process and improve system maintainability. Summary of the Invention

[0003] The technical task of the present invention is to address the above shortcomings and provide a multi-level front-end page layout and status linkage management method and system, which can solve the problems of high page and logic coupling, complex status management and poor scalability in the existing technology, and achieve clear decoupling, automatic linkage, and easy expansion.

[0004] The technical solution adopted by the present invention to solve its technical problem is:

[0005] A multi-level front-end page layout and state linkage management method, which configures page layout declaratively in JSON format and uses a multi-level linkage mechanism to automatically manage component states and achieve front-end rendering;

[0006] The JSON configuration includes the id field to define the business logic module identifier, and the struct field to define the layout rules;

[0007] By separating the business logic and layout structure of components and combining them with a hierarchical data binding mechanism, dynamic rendering and state linkage are achieved;

[0008] The child layer automatically triggers state clearing or data loading operations by monitoring the data changes of the parent layer.

[0009] Furthermore, the hierarchical linkage and state management, the data loading operation includes splicing API request parameters according to the parent data and obtaining the child data.

[0010] Furthermore, the implementation of this method includes:

[0011] JSON configuration: describes the page in a JSON tree structure and configures all nodes;

[0012] Multi-level rendering: Rendering is performed by traversing the JSON tree depth through a multi-level rendering engine;

[0013] Level linkage and state management:

[0014] Further, the JSON configuration includes:

[0015] The entire page is described in a JSON tree structure, each node is divided into two categories: "structure" and "component", "structure" is responsible for layout style and child node organization, and "component" is responsible for business logic and data request;

[0016] Each node contains: node identification, node type (structure / component), style configuration, and "injection mapping" field, used to receive the parameter value passed by the upper layer.

[0017] Further, the multi-level rendering includes:

[0018] The engine renders according to the JSON tree depth: first, render the structure node to determine the layout of the child node, then render the component node and initialize its dependent value listener;

[0019] For each component node, read the dependent value, if the dependent value is empty, call the clear() method of the component to clear the state and historical data; if the dependent value is not empty, use the value as a parameter to initiate a data request through the encapsulated request module, and use the returned result for component rendering.

[0020] Further, the level linkage and state management includes:

[0021] When the configuration or data of the upper component changes, broadcast the new dependent value to the lower layer to trigger the state update or data loading of the child component.

[0022] Further, a debounce or throttle mechanism is used to avoid repeated rendering and redundant requests to improve performance.

[0023] The application also claims to protect a multi-level front-end page layout and state linkage management system, comprising:

[0024] A JSON configuration module is used to define business logic module identification and layout rule definition;

[0025] A multi-level rendering engine is used to separate the business logic of the component from the layout structure, combined with the hierarchical data binding mechanism, to realize dynamic rendering and state linkage;

[0026] A level linkage and state management module is used to automatically trigger state clearing or data loading operation;

[0027] The system realizes front-end page layout and state linkage management through the above method.

[0028] The application also claims a multi-level front-end page layout and state linkage management device, comprising at least one memory and at least one processor.

[0029] The at least one memory is used for storing machine readable programs.

[0030] The at least one processor is used for calling the machine readable programs to realize the above method.

[0031] The application also claims a computer readable medium, which stores computer instructions, and the computer instructions make the processor realize the above method when executed by the processor.

[0032] Compared with the prior art, the multi-level front-end page layout and state linkage management method and system have the following beneficial effects.

[0033] 1. Clear decoupling: the layout and business logic are separated through JSON configuration, and developers can adjust the page structure and style without modifying the business code.

[0034] 2. Easy to extend: new components only need to add node configuration in JSON, and the rendering engine automatically identifies and loads.

[0035] 3. Automatic linkage: multi-level dependent value changes automatically drive component state updates without manually writing a large number of event processing.

[0036] 4. Performance optimization: combined with debounce / throttle and hierarchical rendering strategy, performance loss caused by high-frequency updates is avoided. BRIEF DESCRIPTION OF DRAWINGS

[0037] Figure 1 It is a multi-level front-end page layout and state linkage management method flowchart provided by the embodiment of the application.

[0038] Figure 2 It is a code example diagram provided by the embodiment of the application. DETAILED DESCRIPTION

[0039] The application will be further described below in combination with specific embodiments.

[0040] The embodiment of the application provides a multi-level front-end page layout and state linkage management method, which declares the page layout through JSON format declarative configuration and realizes front-end rendering by using a multi-level linkage mechanism to automatically manage component states.

[0041] The JSON configuration contains an id field to define the business logic module identifier and a struct field to define the layout rule.

[0042] By separating the business logic of the component from the layout structure, combined with the hierarchical data binding mechanism, dynamic rendering and state linkage are realized.

[0043] The child level automatically triggers state emptying or data loading operations by listening to parent level data changes.

[0044] The hierarchical linkage and state management, data loading operation includes concatenating API request parameters according to parent data and obtaining child data.

[0045] The implementation of the method includes the following steps:

[0046] 1. JSON configuration:

[0047] The entire page is described in a JSON tree structure, each node is divided into "structure" (Structure) and "component" (Component), "structure" is responsible for layout style and child node organization, "component" is responsible for business logic and data request.

[0048] Each node contains: node identification, node type (structure / component), style configuration, and "injection mapping" field, used to receive parameter values passed from the upper layer.

[0049] 2. Multi-level rendering:

[0050] The multi-level rendering engine renders according to the JSON tree depth: first render the structure node, determine the layout of the child node, then render the component node and initialize its "dependent value" listener.

[0051] For each component node, read the "dependent value", if the dependent value is empty, call the clear() method of the component to empty the state and historical data; if the dependent value is not empty, use the value as a parameter, initiate a data request through the encapsulated request module, and use the returned result for component rendering.

[0052] 3. Hierarchical linkage and state management:

[0053] When the configuration or data of the upper component changes, broadcast the new "dependent value" to the lower layer, triggering the state update or data loading of the child component.

[0054] Use the debounce or throttle mechanism to avoid repeated rendering and unnecessary requests to improve performance.

[0055] The method solves the problems of high coupling between page and logic, complex state management and poor scalability in the prior art by declaratively configuring page layout in JSON format and using a multi-level linkage mechanism to automatically manage component state in front-end rendering.

[0056] The embodiment of the present application also provides a multi-level front-end page layout and state linkage management system, which realizes front-end page layout and state linkage management through the multi-level front-end page layout and state linkage management method in the above embodiment. Through separation of the business logic and the layout structure of components, dynamic rendering and state linkage are realized in combination with a hierarchical data binding mechanism.

[0057] The JSON configuration includes an id field for defining a business logic module identifier and a struct field for defining a layout rule.

[0058] A child level triggers a state emptying or data loading operation automatically by listening to parent level data changes. The hierarchical linkage and state management include data loading operations, such as splicing API request parameters according to parent data and obtaining child data.

[0059] The system includes:

[0060] 1. A JSON configuration module, including:

[0061] The entire page is described in a JSON tree structure, each node is divided into two categories, namely, a structure and a component, the structure is responsible for layout styles and child node organization, and the component is responsible for business logic and data requests.

[0062] Each node includes a node identifier, a node type (structure / component), a style configuration, and an injection mapping field for receiving parameter values passed from an upper layer.

[0063] 2. A multi-level rendering engine:

[0064] The engine renders according to JSON tree depth: first, structure nodes are rendered to determine child node layout, and then component nodes are rendered and initialized with a dependency value listener.

[0065] For each component node, the dependency value is read, if the dependency value is empty, the clear() method of the component is called to empty the state and historical data, if the dependency value is not empty, the value is used as a parameter to initiate a data request through an encapsulated request module, and the returned result is used for component rendering.

[0066] 3. A hierarchical linkage and state management module:

[0067] When the configuration or data of an upper layer component changes, a new dependency value is broadcast to a lower layer to trigger state updating or data loading of a child layer component.

[0068] A debounce or throttle mechanism is adopted to avoid repeated rendering and redundant requests to improve performance.

[0069] The embodiment of the present application also provides a multi-level front-end page layout and state linkage management device, comprising at least one memory and at least one processor.

[0070] The at least one memory is used for storing machine readable programs.

[0071] The at least one processor is used for calling the machine readable programs, and realizing the multi-level front-end page layout and state linkage management method in the above embodiment.

[0072] The embodiment of the present application also provides a computer readable medium, wherein the computer readable medium stores computer instructions, and the computer instructions make the processor execute the multi-level front-end page layout and state linkage management method in the above embodiment when the processor executes the computer instructions. Specifically, a system or device provided with a storage medium can be provided, wherein the storage medium stores software program codes realizing the functions of any one of the above embodiments, and the computer (or CPU or MPU) of the system or device reads and executes the program codes stored in the storage medium.

[0073] In this case, the program codes read from the storage medium can realize the functions of any one of the above embodiments, and therefore the program codes and the storage medium storing the program codes constitute a part of the present application.

[0074] The storage medium embodiments for providing the program codes include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), magnetic tapes, nonvolatile memory cards and ROM. Alternatively, the program codes can be downloaded from a server computer through a communication network.

[0075] In addition, it should be clear that not only the program codes read by the computer can be executed, but also part or all of the actual operations can be completed by operating systems and the like operating on the computer based on the instructions of the program codes, so as to realize the functions of any one of the above embodiments.

[0076] In addition, it can be understood that the program codes read from the storage medium are written into the memory provided in the expansion board inserted into the computer or the memory provided in the expansion unit connected with the computer, and then part or all of the actual operations are executed by the CPU and the like installed on the expansion board or the expansion unit based on the instructions of the program codes, so as to realize the functions of any one of the above embodiments.

[0077] The present application is illustrated and described in detail by the above drawings and preferred embodiments, however, the present application is not limited to these disclosed embodiments, and based on the above embodiments, those skilled in the art can know that the code review means in different embodiments can be combined to obtain more embodiments of the present application, and these embodiments are also within the protection scope of the present application.

Claims

1. A multi-level front-end page layout and state linkage management method, characterized in that, A front-end rendering is implemented by declaring a page layout in a JSON format and automatically managing component states by using a multi-level linkage mechanism; The JSON configuration includes an id field for defining a business logic module identifier and a struct field for defining a layout rule; Dynamic rendering and state linkage are realized by separating the business logic and layout structure of a component and combining a hierarchical data binding mechanism; A child level automatically triggers a state clearing or data loading operation by listening to parent level data changes.

2. The method of claim 1, wherein, The hierarchical linkage and state management and data loading operation include concatenating API request parameters according to parent data and obtaining child data.

3. The method of claim 1, wherein, The method includes the following steps: JSON configuration: describing a page in a JSON tree structure and configuring all nodes; Multi-level rendering: rendering according to a JSON tree depth by using a multi-level rendering engine; Hierarchical linkage and state management.

4. The method of claim 3, wherein, The JSON configuration includes the following steps: Describing an entire page in a JSON tree structure, and dividing each node into two categories of structure and component, the structure category being responsible for layout styles and child node organization, and the component category being responsible for business logic and data requests; Each node includes a node identifier, a node type, a style configuration, and an "injection mapping" field for receiving parameter values passed from an upper layer.

5. The method of claim 3, wherein, The multi-level rendering includes the following steps: The engine renders according to a JSON tree depth: first, rendering a structure node to determine child node layout, and then rendering a component node and initializing a dependent value listener thereof; For each component node, reading the dependent value, if the dependent value is empty, calling a clear() method of the component to clear state and historical data, and if the dependent value is not empty, using the value as a parameter to initiate a data request through an encapsulated request module, and using a returned result for component rendering.

6. The method of claim 5, wherein, The hierarchical linkage and state management includes the following steps: When the configuration or data of an upper layer component changes, a new dependent value is broadcast to a lower layer to trigger state updating or data loading of a child layer component.

7. The method of claim 6, wherein, A debounce or throttle mechanism is used to avoid repeated rendering and redundant requests to improve performance.

8. A multi-level front-end page layout and state linkage management system, characterized in that, The system includes the following modules: A JSON configuration module for defining a business logic module identifier and a layout rule; A multi-level rendering engine for realizing dynamic rendering and state linkage by separating the business logic and layout structure of a component and combining a hierarchical data binding mechanism; A hierarchical linkage and state management module for automatically triggering state clearing or data loading operations. The system realizes front-end page layout and state linkage management by the method of any one of claims 1 to 7.

9. A multi-level front-end page layout and state linkage management device, characterized in that, The system includes at least one memory and at least one processor; The at least one memory is used to store a machine readable program; The at least one processor is used to call the machine readable program to realize the method of any one of claims 1 to 7.

10. A computer readable medium characterized by The computer readable medium stores computer instructions, and the computer instructions make the processor realize the method of any one of claims 1 to 7 when executed by the processor.

Images