A method and system for describing page structure through JavaScript objects

Abstract

The application relates to a method and system for describing a page structure through a JavaScript object, and the method comprises the following steps: constructing a Schema structure for describing a page layout through a JavaScript Object, each node in the Schema structure being provided with a type field, a life cycle hook burying point and a business capability burying point; constructing a layout container component, constructing context information and an EventBus instance which need to be passed in the layout container component; parsing the Schema structure through the layout container component, rendering a component of a corresponding type according to the type field in the Schema structure; inheriting the context information and the EventBus instance of the layout container component for the rendered component; and executing the life cycle hook burying point and the business capability burying point in the Schema structure on the component which has inherited the context information and the EventBus instance. Compared with the prior art, the application can highly centralize the management of codes such as the structure, behavior and style of a page, does not need to pay attention to how the page is laid out and the style of each component, and avoids most redundant work.

Description

Technical Field

[0001] This invention relates to the field of front-end data processing technology, and in particular to a method and system for describing page structure using JavaScript objects. Background Technology

[0002] In front-end project development, developing a back-end management system requires creating a project from scratch. Front-end developers then break down the project according to page dimensions and implement page functionality based on UI requirements. For example, invention CN114020256A discloses a front-end page generation method, which includes: receiving a request instruction to generate a front-end page; obtaining the component layout method and component relationships between multiple components in the front-end page based on the request instruction; generating a component tree for the front-end page based on the component layout method and component relationships; recognizing user editing operations on the front-end page in a preset page editor; generating configuration information for the front-end page based on the editing operations; adding the configuration information to the component tree; parsing the component tree after adding configuration information to obtain component code; and inserting the component code into a preset front-end page template to obtain the front-end page to be generated. This solution breaks down the project according to page dimensions, generates the component layout method and component relationships, and then implements page functionality according to UI requirements.

[0003] However, in collaborative scenarios, each person has a different understanding of technology, different understanding of requirements, and different understanding of maintainability. This causes standardization, consistency, and maintainability to deteriorate over time and with changes in personnel, eventually becoming difficult to maintain. Summary of the Invention

[0004] The purpose of this invention is to overcome the shortcomings of the existing technology and provide a method and system for describing page structure using JavaScript objects.

[0005] The objective of this invention can be achieved through the following technical solutions:

[0006] A method for describing page structure using JavaScript objects includes the following steps:

[0007] A schema structure describing the page layout is constructed using JavaScript Objects. Each node in this schema structure has a type field, lifecycle hooks, and business capability points. The type field is used to describe the component type, the lifecycle hooks are used to execute corresponding processing logic during the component's lifecycle, and the business capability points are used to configure business functions for the component.

[0008] Build a layout container component, and within this layout container component, build the context information and EventBus instance that need to be passed;

[0009] The schema structure is parsed by the layout container component, and the corresponding type of component is rendered according to the type field in the schema structure;

[0010] The rendered component inherits the context information and EventBus instance from the layout container component;

[0011] Execute lifecycle hooks and business capability tracking points in the schema structure for components that inherit context information and EventBus instances.

[0012] Furthermore, the component types described by the type field include: page root structure, header, single-field search, button, dropdown list, and table.

[0013] Furthermore, each node in the schema structure also has a body field, which is used to describe the comprehensive component structure containing multiple components.

[0014] Furthermore, the lifecycle hook points include: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, and errorCaptured.

[0015] Furthermore, the business capability tracking points are the business functions configured for the component, including: enabling the table to support API calls, supporting API request interception, and supporting input / output processing.

[0016] Furthermore, the schema structure is generated by JavaScript Objects through functional programming. The schema structure describes the page structure and performs page layout through hierarchical tree nodes.

[0017] Furthermore, the functional programming structure of the Schema structure is provided with Vue, i18n, and props information input interfaces, which are used to obtain externally transmitted context information.

[0018] This invention also provides a system for describing page structure using JavaScript objects, comprising:

[0019] The Schema structure building module is used to construct a Schema structure describing the page layout using JavaScript Objects. Each node in the Schema structure has a type field, lifecycle hooks, and business capability points. The type field is used to describe the component type, the lifecycle hooks are used to execute corresponding processing logic during the component's lifecycle, and the business capability points are used to configure business functions for the component.

[0020] The layout container component building module is used to build layout container components, in which the context information and EventBus instance to be passed are built;

[0021] The component rendering module is used to parse the schema structure through the layout container component and render the corresponding type of component according to the type field in the schema structure;

[0022] The component processing module is used to allow rendered components to inherit the context information and EventBus instance of the layout container component; and to execute lifecycle hooks and business capability tracking points in the Schema structure on components that have inherited the context information and EventBus instance.

[0023] Furthermore, the component types described by the type field include: page root structure, header, single-field search, button, dropdown list, and table;

[0024] The lifecycle hooks include: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, and errorCaptured;

[0025] The business capability tracking points are the business functions configured for the components, including enabling the table to support API calls, supporting API request interception, and supporting input / output processing.

[0026] Furthermore, the schema structure is constructed from JavaScript objects through functional programming, and the schema structure describes the page structure and performs page layout through hierarchical tree nodes;

[0027] The functional programming structure of the Schema structure has Vue, i18n, and props information input interfaces, which are used to obtain context information transmitted from the outside.

[0028] Compared with the prior art, the present invention has the following advantages:

[0029] (1) This invention describes the page structure through JavaScript Objects, uses functional programming, and adopts a hierarchical tree node form. It sets the type field, lifecycle hooks and business capability tracking points in the nodes, which can manage the code of the page structure, behavior and style in a highly centralized manner. This allows developers to focus on what business logic each page component needs to implement and implement it in the corresponding page component. They do not need to worry about how the page should be laid out or the style of each component, which avoids most of the redundant work. Moreover, it will not be difficult to maintain as time and personnel change, because everyone uses this engine structure to describe the page.

[0030] (2) Every page component, including its style, has been implemented in this engine, so developers do not need to worry about how to develop the component, but can focus more on how to implement the business logic of the page component, which greatly improves the development efficiency of developers.

[0031] (3) Pages developed using this engine are basically similar to each other except for the functional aspects. This also standardizes the development team's development methods and ensures consistency and standardization.

[0032] (4) As time and personnel change, the engine structure remains unchanged, so newly recruited personnel can quickly get started and maintainability is maintained. Attached Figure Description

[0033] Figure 1 This is a flowchart illustrating a method for describing page structure using JavaScript objects, as provided in an embodiment of the present invention.

[0034] Figure 2 This is a schematic diagram illustrating the specific process of a method for describing page structure using JavaScript objects, as provided in an embodiment of the present invention. Detailed Implementation

[0035] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0036] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0037] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0038] Example 1

[0039] like Figure 1 As shown, this embodiment provides a method for describing page structure using JavaScript objects, including the following steps:

[0040] S1: Construct a schema structure describing the page layout using JavaScript Object. Each node in this schema structure has a type field, lifecycle hooks, and business capability points. The type field describes the component type, lifecycle hooks execute corresponding processing logic during the component's lifecycle, and business capability points configure business functions for the component.

[0041] S2: Construct a layout container component, and build the context information and EventBus instance that need to be passed in the layout container component;

[0042] S3: Parse the schema structure through the layout container component and render the corresponding type of component according to the type field in the schema structure;

[0043] S4: Allows rendered components to inherit the context information and EventBus instance of the layout container component, making cross-component communication easier;

[0044] S5: Execute lifecycle hooks in the schema structure for components that inherit context information and EventBus instances, handle business logic in the corresponding lifecycle, and standardize the use of component lifecycles;

[0045] S5: Execute business capability tracking points in the schema structure for components that have lifecycle hook tracking points, and configure business functions for the components, such as enabling tables to support API calls, intercept API requests, and perform input / output processing.

[0046] The following is a detailed description of each step:

[0047] In step S1, the page structure is abstracted into a JavaScript Object Schema structure. Each node has a type field to describe what kind of component it is. Type types include: page (page root structure), page-header, single-search, button, select, table, etc.

[0048] The order of each type of component is not limited and can be combined according to the page requirements. As long as it conforms to this schema structure, which standardizes the description of the page structure, you only need to remember these structures to piece together a page.

[0049] Each node in the schema structure has a body field, which describes what other components are within this component, and standardizes the structural handling of containers;

[0050] Below is a code example of the above schema structure:

[0051]

[0052]

[0053] The nodes in the schema structure have lifecycle hooks such as beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, and errorCaptured. Business logic can be handled in these corresponding lifecycles, which standardizes the use of component lifecycles.

[0054] In addition to lifecycle hooks, each node also contains business capability tracking points for each component. For example, the table can support API calls, intercept API requests, and perform input / output processing.

[0055] The schema structure is based on functional programming and allows you to pass in the Context at the outermost layer, such as Vue, i18n, props, etc. This is beneficial for obtaining external context when implementing functions, and is not limited by the internal components.

[0056] In step S2, a layout container component is implemented, and the context and EventBus instance to be passed are constructed inside the container component, and the passed-in Schema is parsed.

[0057] Each component needs to inherit the EventBus of the layout container to make cross-component communication easier;

[0058] In step S3, the outermost container component and the schema parsing engine are implemented for the above types. The components of each part can be rendered according to the structure of the schema, and the event tracking points declared in the schema component are injected into the components, which standardizes the behavior and style of each component.

[0059] The above is an introduction to the method embodiments. The following system embodiments will further illustrate the present invention.

[0060] This embodiment also provides a system for describing page structure using JavaScript objects, including:

[0061] The Schema structure building module is used to build a Schema structure that describes the page layout using JavaScript Objects. Each node in the Schema structure has a type field, lifecycle hooks, and business capability points. The type field is used to describe the component type, the lifecycle hooks are used to execute the corresponding processing logic in the component's lifecycle, and the business capability points are used to configure business functions for the component.

[0062] The layout container component building module is used to build layout container components, in which the context information and EventBus instance to be passed are built;

[0063] The component rendering module is used to parse the schema structure through the layout container component and render the corresponding type of component according to the type field in the schema structure;

[0064] The component processing module is used to inherit the context information and EventBus instance of the layout container component for the rendered component; and to execute lifecycle hooks and business capability tracking points in the schema structure for the component that inherits the context information and EventBus instance.

[0065] It should be noted that the specific content and beneficial effects of the system in this application can be found in the above method embodiments, and will not be repeated here.

[0066] The following is a specific example of the above scheme.

[0067] like Figure 2 As shown, this is an engine that describes the page structure using JavaScript Objects. In the following description of the specific steps, they will all be referred to as the numbers in the above process steps, such as: 001;

[0068] The schema for the page layout is constructed in 001. The schema structure is provided in the first section of the technical solution.

[0069] In 002, implement a layout container component, build the context and EventBus instance that need to be passed in inside the container component, and parse the passed-in Schema;

[0070] In 003, the `type` field is evaluated using the following logic:

[0071] 1) If it is a table, then render the table component;

[0072] 2) The same applies to other components; each component renders its corresponding value.

[0073] In 004, components inherit the EventBus and context APIs from the layout container;

[0074] In 005, the component declaration lifecycle function declared in the Schema is executed for the component;

[0075] In 006, the component's business capability functions declared in the Schema are executed for the component.

[0076] The preferred embodiments of the present invention have been described in detail above. It should be understood that those skilled in the art can make numerous modifications and variations based on the concept of the present invention without creative effort. Therefore, all technical solutions that can be obtained by those skilled in the art based on the concept of the present invention through logical analysis, reasoning, or limited experimentation on the basis of existing technology should be within the scope of protection defined by the claims.

Claims

1. A method for describing page structure using JavaScript objects, characterized in that, Includes the following steps: A schema structure describing the page layout is constructed using JavaScript Objects. Each node in this schema structure has a type field, lifecycle hooks, and business capability points. The type field is used to describe the component type, the lifecycle hooks are used to execute corresponding processing logic during the component's lifecycle, and the business capability points are used to configure business functions for the component. Build a layout container component, and within this layout container component, build the context information and EventBus instance that need to be passed; The schema structure is parsed by the layout container component, and the corresponding type of component is rendered according to the type field in the schema structure; The rendered component inherits the context information and EventBus instance from the layout container component; Execute lifecycle hooks and business capability tracking points in the schema structure for components that inherit context information and EventBus instances.

2. The method for describing page structure using JavaScript objects according to claim 1, characterized in that, The component types described by the type field include: page root structure, page header, single-field search, button, dropdown list, and table.

3. The method for describing page structure using JavaScript objects according to claim 1, characterized in that, Each node in the schema structure also has a body field, which is used to describe the comprehensive component structure containing multiple components.

4. The method for describing page structure using JavaScript objects according to claim 1, characterized in that, The lifecycle hooks include: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, and errorCaptured.

5. The method for describing page structure using JavaScript objects according to claim 1, characterized in that, The business capability tracking points are the business functions configured for the components, including enabling the table to support API calls, supporting API request interception, and supporting input / output processing.

6. The method for describing page structure using JavaScript objects according to claim 1, characterized in that, The schema structure is constructed using JavaScript objects through functional programming. The schema structure describes the page structure and performs page layout through hierarchical tree nodes.

7. The method for describing page structure using JavaScript objects according to claim 6, characterized in that, The functional programming structure of the Schema structure has Vue, i18n, and props information input interfaces, which are used to obtain context information transmitted from the outside.

8. A system for describing page structure using JavaScript objects, characterized in that, include: The Schema structure building module is used to construct a Schema structure describing the page layout using JavaScript Objects. Each node in the Schema structure has a type field, lifecycle hooks, and business capability points. The type field is used to describe the component type, the lifecycle hooks are used to execute corresponding processing logic during the component's lifecycle, and the business capability points are used to configure business functions for the component. The layout container component building module is used to build layout container components, in which the context information and EventBus instance to be passed are built; The component rendering module is used to parse the schema structure through the layout container component and render the corresponding type of component according to the type field in the schema structure; The component processing module is used to allow rendered components to inherit the context information and EventBus instance of the layout container component; and to execute lifecycle hooks and business capability tracking points in the Schema structure on components that have inherited the context information and EventBus instance.

9. A system for describing page structure using JavaScript objects according to claim 8, characterized in that, The component types described by the type field include: page root structure, page header, single-field search, button, dropdown list, and table; The lifecycle hooks include: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, and errorCaptured; The business capability tracking points are the business functions configured for the components, including enabling the table to support API calls, supporting API request interception, and supporting input / output processing.

10. A system for describing page structure using JavaScript objects according to claim 8, characterized in that, The schema structure is constructed using JavaScript Objects through functional programming. The schema structure describes the page structure and performs page layout through hierarchical tree nodes. The functional programming structure of the Schema structure has Vue, i18n, and props information input interfaces, which are used to obtain context information transmitted from the outside.

Images