A page quick building method based on component instance calling mechanism

Abstract

The application discloses a page quick building method based on a component instance calling mechanism, and belongs to the technical field of front-end development, and comprises the following steps: realizing page quick building through component instance calling by means of an instance tree, and solving the technical problem that in a low-code / visual development platform, through a standardized component description and an instance tree mechanism, efficient and traceable dynamic interaction logic across components and pages is realized, so that the page building efficiency and running performance are improved, the application realizes page quick generation, efficient component attribute configuration and clear component interaction logic, cross-page calling is traceable, each calling can be tracked, is easy to debug, has a low threshold, supports online modification and real-time publishing, and can quickly respond to business demand changes.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of front-end development, and particularly relates to a page rapid building method based on a component instance calling mechanism. BACKGROUND

[0002] At present, front-end page rapid building mainly relies on two types of technical solutions: one is a form + process driven system, such as a traditional OA, ERP and the like; and the other is a code generation type system, such as a part of low code platform.

[0003] The deficiencies of the prior art are specifically as follows:

[0004] The form + process driven system (such as a traditional OA / ERP system): the application range is limited, only applicable to simple form submission, approval flow and the like low interaction scene, and difficult to support the building demand of complex pages such as large portal website, e-commerce platform and the like; the interaction ability is weak, lacks advanced functions such as dynamic component linkage, cross-page communication and the like, the interaction logic is fixed, and the expansibility is poor; the visual degree is low, the configuration interface is mainly based on form attributes, and the final page effect cannot be intuitively reflected, resulting in large design and implementation deviation.

[0005] The code generation type system (such as a part of low code platform): the code readability is poor, the generated code structure is complex and the coupling degree is high, and the developer is difficult to understand and modify secondarily; the learning cost is high, and a specific DSL or template syntax needs to be mastered, and non-professional front-end personnel is difficult to start; the interaction configuration is complicated, and dynamic behavior (such as component communication) still needs to manually write logic code, and the "visual building" cannot be truly realized.

[0006] The existing systems generally have the following core problems:

[0007] Function limitation: unable to simultaneously support the large page development demand of high interaction and high customization.

[0008] Low development efficiency: complex interaction logic needs to repeatedly write glue code, and the debugging time is long.

[0009] High maintenance cost: the generated code or configuration is difficult to trace and adjust, and the system iteration is difficult.

[0010] User experience is fragmented: the form driven system interaction is stiff, and the code generation type system has steep learning curve. SUMMARY

[0011] The purpose of the application is to provide a page rapid building method based on a component instance calling mechanism, which solves the technical problem of improving the page building efficiency and running performance by realizing efficient and traceable dynamic interaction logic across components and pages through standardized component description and instance tree mechanism in a low code / visual development platform.

[0012] To achieve the above object, the application adopts the following technical solutions:

[0013] A page quick building method based on component instance calling mechanism, comprising the following steps:

[0014] Step 1: In the component definition module, predefine the capability atomic component description specification of the front-end component in the business scenario, and generate the corresponding capability atomic component descriptor;

[0015] The capability atomic component description specification is used to uniformly define the behavior mode of the component, so that different components have consistent definition structure and can be parsed in the description format;

[0016] The behavior mode includes the attribute field, callback method and triggerable event of the component;

[0017] Step 2: Establish a visual editor, which is based on the capability atomic component description specification and presets a business page prototype according to the business scenario, and the user builds a page in the editor according to the business page prototype, the specific operation including first selecting the required component by dragging, configuring the attributes, interfaces and events of the required component, and forming the page structure;

[0018] Then configure the calling relationship between components, parameter passing rules and interaction logic;

[0019] Finally, the editor generates a page description file, i.e. page JSON data, according to the user's configuration;

[0020] Step 3: The storage module predefines the component instance storage data structure specification in the initialization stage, which is used to build the component instance tree and event calling at runtime; the data structure organizes the component instances in a tree structure, including each page as a first-level node of the tree, with a unique identifier pageId; each component under the page is mounted as a child node according to the hierarchical relationship, and each component has a unique identifier uuid; the hierarchical attributes of the page, container component and ordinary component are distinguished;

[0021] Step 4: The instance tree module parses and renders the component instance according to the page JSON data at runtime, specifically, maintains the instance tree of the component in the global state management object, completes the instance mounting according to the component attributes, pageId and uuid when initializing each component, establishes the calling index table between the component instances, and supports cross-component event triggering and parameter passing;

[0022] Step 5: The interaction execution module performs page interaction logic according to the calling relationship configured in the editor, which records the page identifier pageId, component type, component identifier uuid, calling event and parameter passing path of the called component.

[0023] Preferably, in the execution of step 1, the component definition module extracts the types of front-end components, including fuzzy search input box, query button, table, pop-up box and edit form, for the business scenarios of the list page and the pop-up box page;

[0024] The capability atomic component description specification includes attribute definition, method definition and event definition, the attribute definition is used for describing the static characteristics of the component, the method definition is used for defining the functional behavior of the component, and the event definition is used for describing the interactive trigger.

[0025] The capability atomic component description specification includes attribute definition, method definition and event definition, the attribute definition is used for describing the static characteristics of the component, the method definition is used for defining the functional behavior of the component, and the event definition is used for describing the interactive trigger.

[0026] The capability atomic component descriptor defines the input parameter structure and output response format of the corresponding component.

[0027] Preferably, in the execution of step 2, the specific operation includes:

[0028] Step 2-1: according to the business page prototype preset according to the business scenario, the user drags and places the required components in the editor according to the business page prototype, including fuzzy search input box, query button component, add button component, table component and pop-up box component, and preliminarily arranges the components through the visual interface to form the page basic structure;

[0029] Step 2-2: in the editor, configure the text fields to be displayed for the table component, and add edit and delete operation buttons for each row of data; at the same time, configure the internal page structure for the add / edit pop-up box to support the input and editing of the form;

[0030] Step 2-3: configure the query interface in the table component, and select multiple fuzzy search input boxes as query parameters, so that the table automatically triggers the default data query when the page is initialized; in the editor interface, bind the interface and component data through the parameter mapping relationship;

[0031] Step 2-4: for the button component, the user configures the click event logic in the editor, which specifically includes that the query button calls the query data event of the table component, the add button calls the open event of the pop-up box component, the edit button calls the edit pop-up box and inputs the row data object, and the delete button calls the delete interface and triggers the table refresh when the interface is successfully called back;

[0032] Step 2-5: the user performs page preview and event trigger test in the editor to verify the correctness of the data flow and interaction logic between the components;

[0033] Step 2-6: the editor generates a page description file according to the user's drag layout, attribute configuration, interface mapping and calling relationship to form a page JSON data.

[0034] Preferably, in the execution of step 3, the specific steps include:

[0035] Step 3-1: In the initialization phase, the storage module predefines a unified data structure according to the capability atomic component description specification provided by the component definition module, which is used to describe the hierarchical relationship between the page and the component;

[0036] The data structure adopts a tree organization method, with the page as the first-level node, and the container components and ordinary components under the first-level node mounted as child nodes in hierarchical order. The information of each child node includes component type, component identifier uuid, attribute configuration, and event binding;

[0037] Step 3-2: When the page is first loaded, the page structure is parsed according to the generated page JSON data, and the first-level node corresponding to the page is created in the storage module, and its unique pageId is registered;

[0038] The page node records the page name, the module it belongs to, and the basic information of the page-level event, providing the root node for the dynamic mounting of component instances;

[0039] Step 3-3: In the subsequent page loading process, the component configuration items defined in the page JSON data are read one by one, and component instance objects are generated in hierarchical order and written into the storage module;

[0040] Each component instance object is registered in the global instance index table through its uuid, and then it is quickly located; the parent component reference relationship is recorded through the parentId, and the component instance tree structure is constructed;

[0041] Step 3-4: After the instance tree is generated, an associated mapping table between component instances is established;

[0042] The mapping table is used to record the calling relationship between components, event dependencies, and parameter transmission paths.

[0043] Preferably, when step 4 is executed, the instance tree module specifically executes the following steps:

[0044] Step 4-1: When the page runs in the browser or the front-end framework, the page structure and component configuration are read from the page JSON data, and each component node is parsed according to the page hierarchical structure;

[0045] The page JSON data includes component type, attribute configuration, event binding, and calling relationship between components;

[0046] Step 4-2: For each parsed component node, an instance object is created according to its capability atomic component descriptor. Each instance object includes component type, uuid, attribute configuration, event method, and callback function. When the instance object is initialized, the behavior of the component is bound to the front-end framework lifecycle;

[0047] Step 4-3: According to the page as a primary node, all components are mounted to the corresponding page node according to the parent-child hierarchical relationship, and the sub-components inside the container component continue to be recursively mounted according to the page JSON data definition. A complete component instance tree is maintained in the global state management object for cross-level calling between components.

[0048] Step 4-4: Traverse each component instance, generate a component call index table according to the call relationship information in the page JSON data, and record the event triggering relationship and parameter path between components. Through the index table, the target component instance is quickly located and the corresponding method is executed when the event is triggered.

[0049] Preferably, in the execution of step 5, the following steps are specifically included:

[0050] Step 5-1: When the user operates the component on the page, the front-end framework captures the event, and the interactive execution module identifies the component instance that triggers the event and its corresponding page according to the component instance tree and event binding relationship, and passes the event type and call parameter transmission information as the event trigger object;

[0051] Step 5-2: The interactive execution module quickly locates the called target component instance according to the call index table of the component obtained in step 4;

[0052] The interactive execution module matches the target component according to the call index;

[0053] Step 5-3: The interactive execution module executes the corresponding method of the target component according to the call relationship. If there are multiple call relationships in the method execution, the interactive execution module executes in queue order. If an exception occurs, subsequent calls are interrupted;

[0054] Step 5-4: The interactive execution module extracts parameter values from the triggering component or event according to the call relationship and passes them to the target component instance;

[0055] Backfill parameter data in the pop-up box or form, perform form initialization or row data loading;

[0056] Step 5-5: If the page is bound to a lifecycle event, perform initialization data loading and component backfill when the event is triggered;

[0057] After the form is submitted or the pop-up box is closed, the interactive execution module triggers the refresh of the parent page.

[0058] The page rapid building method based on the component instance calling mechanism solves the technical problem of improving the page building efficiency and the running performance in a low code / visual development platform by a standardized component description and an instance tree mechanism to realize efficient and traceable dynamic interaction logic across components and pages, realizes page rapid generation, efficient component attribute configuration and clear component interaction logic, traceable cross-page calling, easy debugging and low threshold, supports online modification and real-time publishing, can quickly respond to business demand changes, has a full-link parameter control mechanism, realizes the cooperation of the standardized JSONPath parameter and the tree-shaped instance storage structure, realizes the visual configuration of the cross-component parameter transmission path, dynamically adjusts the runtime parameter mapping relationship, has a declarative instance calling system, realizes the "page ID-component UUID-parameter path" addressing scheme, greatly reduces the code amount of complex calling relationship configuration, supports static type checking, and the calling link tracking accuracy reaches the component instance level, the performance of the application is breakthroughly improved, the component communication delay is reduced by more than twice compared with the traditional event bus scheme, the memory occupation is reduced by about 40% (the instance tree replaces the redundant listener), and there is no performance degradation in the running of a large application (1000+ components), the application has an open capability expansion architecture, based on the reflective instance access, all public methods / state variables of the component can be obtained through the standardized API, supports seamless access of third-party components (compatible with the WebComponents specification), and has a dynamic capability registration mechanism (hot update without restarting the application), the application has a full life cycle management system, realizes the binding of the page life cycle and the instance tree state, automatically synchronizes the component mounting / unloading, supports batch injection of life cycle hooks, automatically recycles the instance reference, and reduces the risk of memory leakage. BRIEF DESCRIPTION OF DRAWINGS

[0059] Fig. 1 is the main flowchart of the application;

[0060] Fig. 2 is the flowchart of steps 100 to 800 in the embodiment. DETAILED DESCRIPTION

[0061] The page rapid building method based on the component instance calling mechanism shown in Figs. 1-2 includes the following steps:

[0062] Step 1: In the component definition module, for the front-end components in the business scenario, predefine the capability atomic component description specification of the front-end components, and generate the corresponding capability atomic component descriptor;

[0063] The capability atomic component description specification is used to uniformly define the behavior mode of the component, so that different components have consistent definition structures and can be parsed in the description format;

[0064] The behavior mode includes the attribute field, callback method and triggerable event of the component;

[0065] For example, the attribute set and event interface of components such as input box, button, table, pop-up box, etc. are defined to form a set of basic component capabilities that can be recognized by the system;

[0066] When step 1 is executed, the component definition module extracts the types of front-end components for the business scenarios of list pages and pop-up box pages, including fuzzy search input box, query button, table, pop-up box and edit form;

[0067] The capability atomic component description specification includes attribute definition, method definition and event definition. The attribute definition is used to describe the static characteristics of the component; for example, the placeholder of the input box, the columns of the table, and the text of the button.

[0068] The method definition is used to define the functional behavior of the component; for example, open(), query(), submit().

[0069] The event definition is used to describe the interactive trigger; for example, onClick, onChange, onLoad.

[0070] The input parameter structure and output response format of the corresponding component are defined in the capability atomic component descriptor.

[0071] For example:

[0072] Input box component descriptor: contains attributes {placeholder, value}, events {onChange};

[0073] Query button component descriptor: contains attributes {text}, events {onClick}, methods {triggerQuery()};

[0074] Table component descriptor: contains attributes {columns, dataSource, apiUrl}, events {onRowClick, onDelete};

[0075] Pop-up box component descriptor: contains attributes {title, visible}, methods {open(), close()}.

[0076] The call relationship format is defined as follows:

[0077] page: the page identifier where the call occurs;

[0078] type: the type of the called object (component, page or form);

[0079] component: called component name;

[0080] event: target event triggered;

[0081] jsonpath: parameter path, used to specify the data object passed.

[0082] For example:

[0083] Query button click triggers table query:

[0084] {page: "current page", type: "component", component: "table", event: "query data", jsonpath: ""};

[0085] Edit button triggers the opening of the pop-up box and passes in the current row data:

[0086] {page: "current page", type: "component", component: "edit pop-up box", event: "open", jsonpath: "$.row"}.

[0087] In this embodiment, the call relationship can be embedded in each component descriptor to form a complete event triggering chain.

[0088] Step 2: Establish a visual editor, the editor is based on the capability atomic component description specification, and a business page prototype is preset according to the business scenario. The user builds a page in the editor according to the business page prototype. The specific operation includes first selecting the required components by dragging, configuring the attributes, interfaces and events of the required components, and forming the page structure;

[0089] Then configure the calling relationship between components, parameter passing rules and interaction logic;

[0090] Finally, the editor generates a page description file, i.e. page JSON data, according to the user's configuration;

[0091] When performing step 2, the specific operation includes:

[0092] Step 2-1: According to the business scenario, a business page prototype is preset. The user drags and places the required components in the editor according to the business page prototype, including a fuzzy search input box, a query button component, an add button component, a table component and a pop-up box component. The components are preliminarily arranged through the visual interface to form the basic structure of the page;

[0093] Step 2-2: In the editor, configure the text fields to be displayed for the table component, and add edit and delete operation buttons for each row of data. At the same time, configure the internal page structure for the add / edit pop-up box to support the input and editing of the form;

[0094] Step 2-3: Configure the query interface in the table component and select multiple fuzzy search input boxes as query parameters to automatically trigger the default data query when the table is initialized on the page; In the editor interface, bind the interface and component data through parameter mapping relationship;

[0095] Step 2-4: For the button component, the user configures the click event logic in the editor, which includes querying the table component's query data event for the query button, opening the pop-up component for the add button, editing the pop-up component for the edit button and passing in the row data object, and deleting the interface for the delete button, and triggering the table refresh when the interface callback is successful;

[0096] Step 2-5: The user performs page preview and event triggering test in the editor to verify the correctness of data flow and interaction logic between components; For example, automatically refreshing the table after editing, reloading data after deleting, etc.

[0097] Step 2-6: The editor generates a page description file based on the user's drag layout, property configuration, interface mapping, and calling relationship, forming a page JSON data.

[0098] Step 3: The storage module predefines the component instance storage data structure specification in the initialization phase, which is used to build the component instance tree and event call at runtime; The data structure organizes component instances in a tree structure, including each page as a tree level node with a unique identifier pageId; The components under the page are mounted as child nodes according to the hierarchical relationship, and each component has a unique identifier uuid; The hierarchical attributes of pages, container components, and ordinary components are distinguished;

[0099] When performing step 3, the following steps are included:

[0100] Step 3-1: In the initialization phase, the storage module predefines a unified data structure according to the capability atomic component description specification provided by the component definition module, which is used to describe the hierarchical relationship between pages and components;

[0101] The data structure uses a tree organization method, with pages as the first level nodes, and container components and ordinary components under the first level nodes mounted as child nodes in hierarchical order; The information of each child node includes component type, component identifier uuid, property configuration, and event binding;

[0102] Step 3-2: When the page is first loaded, parse the page structure according to the generated page JSON data, create the first level node corresponding to the page in the storage module, and register its unique pageId;

[0103] The page node records the page name, the module to which the page belongs, and basic information of page-level events (such as a page initialization event), and provides a root node for dynamic mounting of component instances;

[0104] Step 3-3: In the subsequent page loading process, the component configuration items defined in the page JSON data are read one by one, and component instance objects are generated in a hierarchical relationship and written into the storage module;

[0105] Each component instance object is registered in the global instance index table through its uuid, and is quickly located; the parent component reference relationship is recorded through the parentId, and a component instance tree structure is constructed.

[0106] Step 3-4: After the instance tree is generated, an association mapping table between component instances is established.

[0107] The mapping table is used to record the calling relationship between components, event dependencies, and parameter passing paths (jsonpath).

[0108] Step 4: The instance tree module parses and renders component instances according to the page JSON data during page runtime, specifically maintaining the instance tree of components in the global state management object, mounting instances according to component properties, pageId, and uuid during initialization of each component, and establishing a calling index table between component instances to support cross-component event triggering and parameter passing;

[0109] The instance tree is used for unified management and dynamic parsing of component instances in the system.

[0110] The page instance is mounted as a first-level node; container components and ordinary components are mounted under the corresponding page node.

[0111] When step 4 is executed, the instance tree module specifically performs the following steps:

[0112] Step 4-1: When the page runs in the browser or the front-end framework, read the page structure and component configuration from the page JSON data, and parse each component node according to the page hierarchical structure;

[0113] The page JSON data includes component types, property configurations, event bindings, and inter-component calling relationships.

[0114] Step 4-2: For each parsed component node, create an instance object according to its capability atomic component descriptor, each instance object including component type, uuid, property configuration, event method, and callback function. During initialization of the instance object, bind the component behavior and event to the front-end framework lifecycle, such as mounted in Vue or useEffect in React.

[0115] Step 4-3: According to the page as a primary node, all components are mounted to the corresponding page node according to the parent-child hierarchical relationship, and the child components inside the container component continue to be recursively mounted according to the page JSON data definition. The complete component instance tree is maintained in the global state management object (such as Vuex, Redux) for cross-level calling between components.

[0116] Step 4-4: Traverse each component instance, generate a component call index table according to the call relationship information in the page JSON data, and record the event triggering relationship and parameter path (jsonpath) between components. Through the index table, quickly locate the target component instance and execute the corresponding method when the event is triggered; realize cross-component event transmission and interaction.

[0117] Step 5: The interaction execution module performs page interaction logic according to the call relationship configured in the editor, which records the page identifier pageId, component type, component identifier uuid, call event, and parameter transmission path (jsonpath) of the called component.

[0118] When the trigger event (such as adding, editing, querying, deleting) occurs, the target component instance is located through the instance tree and the corresponding method is executed;

[0119] Page lifecycle events (such as "when the page is loaded") can also be bound to component calls for data initialization, form backfill, and page refresh linkage.

[0120] Support parameter transmission (for example, extract $.row from table row data and pass it into the popup component), multiple call queue execution, and exception interruption mechanism.

[0121] In step 5, the following steps are included:

[0122] Step 5-1: When the user operates the component on the page (such as clicking the button, editing the table row, or deleting the operation), the front-end framework captures the event, and the interaction execution module identifies the component instance and its belonging page (pageId) according to the component instance tree and event binding relationship, and takes the event type (such as click, submit, query) and call parameter transmission information (jsonpath) as the event trigger object;

[0123] Step 5-2: The interaction execution module quickly locates the called target component instance according to the component call index table obtained in step 4.

[0124] In this embodiment, the call relationship information includes: the pageId of the called component, the component type (such as form, popup, table), uuid, called method or event, and parameter transmission path jsonpath.

[0125] The interaction execution module matches the target component according to the call index; and ensures correct cross-page or cross-container calling.

[0126] Step 5-3: The interaction execution module executes the method corresponding to the target component according to the call relationship; if there are multiple call relationships in the method execution, the interaction execution module executes in the order of the queue; if an exception occurs, subsequent calling is interrupted.

[0127] The method corresponding to the target component is as follows:

[0128] The new button opens the new pop-up component;

[0129] The edit button opens the edit pop-up and backfills the current row data (jsonpath: $.row);

[0130] The query button calls the table component query interface;

[0131] The delete button calls the delete interface and refreshes the table.

[0132] Step 5-4: The interaction execution module extracts parameter values from the trigger component or event according to the call relationship (specifically, the jsonpath therein), and passes them to the target component instance;

[0133] Backfill parameter data in the pop-up or form, perform form initialization or row data loading;

[0134] In this embodiment, parameter transmission between multiple components is supported, for example: passing $.row from table row data to pop-up form.

[0135] Step 5-5: If the page is bound to a lifecycle event (such as "when the page is loaded"), perform initialization data loading and component backfill when the event is triggered;

[0136] When the form is submitted or the pop-up is closed, the interaction execution module triggers the refresh of the parent page.

[0137] In this embodiment, the page display is consistent with the component state, for example, after the add, edit, and delete operations, the table is refreshed to display the latest data.

[0138] The following is an operation example of a specific business scenario in this embodiment:

[0139] Step 100: In the visual editor, configure the list page according to the page prototype, including necessary components such as fuzzy search input box, query button component, new button component, table component, pop-up component, etc.

[0140] Configure the corresponding text field in the table component for display, and add edit and delete operation buttons for each row of data.

[0141] Step 200: In the visualization editor, configure the newly added / edit pop-up page inside the pop-up component according to the page prototype configuration for placement in the pop-up component.

[0142] Step 300: Configure the query interface in the table component of the list page, and use multiple fuzzy search input boxes as query parameters. At this time, when the page is initialized, the table will automatically trigger the default data query, and the interface and component data will be bound through the parameter mapping relationship in the editor interface.

[0143] Step 400: Configure the click event of the add button on the list page, and call the open event of the add pop-up component through the interactive execution module.

[0144] Because it is an add operation, the form parameters do not need to be configured, and the previously configured add / edit page is selected in the add pop-up component.

[0145] Step 500: Configure the click event of the query button on the list page, and call the query data event of the table component through the interactive execution module.

[0146] The parameters have been configured in the query interface of the table, so no additional parameters are needed here.

[0147] Step 600: Configure the click event of the edit button in the table operation column of the list page, and call the open event of the edit pop-up component through the interactive execution module, and pass in the current row data (jsonpath: $.row).

[0148] The operation button is in the same row as the row data, and when the event is triggered, it will automatically carry the data object row of this row.

[0149] Step 700: Configure the page load event in the edit pop-up page, which is used to backfill the data passed by the component call relationship when initialized.

[0150] After modifying the form data, call the update interface through the interactive execution module, and trigger the list page refresh event.

[0151] After the interface call is successful, configure the component call relationship as follows: page: current page, type: form, component: main form, event: close the current pop-up and refresh the parent page, jsonpath: empty.

[0152] Step 800: Configure the click event of the delete button in the table operation column of the list page, and call the delete interface through the interactive execution module, and refresh the table after the interface call is successful.

[0153] Configure the component call relationship as follows: page: current page, type: component, component: table, event: query data, jsonpath: empty.

[0154] The page rapid building method based on the component instance calling mechanism solves the technical problem of improving the page building efficiency and the running performance in a low code / visual development platform through the standardized component description and the instance tree mechanism to realize the efficient and traceable dynamic interaction logic across components and pages, the application realizes the page rapid generation, the efficient component attribute configuration and the clear component interaction logic, the cross-page calling is traceable, each calling has a trace, is easy to debug, has a low threshold, supports the online modification and the real-time publishing, can quickly respond to the business demand changes, the application has the whole-link parameter control mechanism, realizes the cooperation of the standardized JSONPath parameter and the tree-shaped instance storage structure, realizes the visual configuration of the cross-component parameter transmission path, dynamically adjusts the runtime parameter mapping relationship, the application has the declarative instance calling system, realizes the "page ID-component UUID-parameter path" addressing scheme, makes the code amount of the complex calling relationship configuration greatly reduced, supports the static type detection, the calling link tracking precision reaches the component instance level, the performance of the application is breakthroughly improved, compared with the traditional event bus scheme, the component communication delay is reduced by more than two times, the memory occupation is reduced by about 40% (the instance tree replaces the redundant listener), the large-scale application (1000+ components) runs without performance attenuation, the application has the open ability expansion architecture, based on the reflective instance access, all the public methods / state variables of the component can be obtained through the standardized API, supports the seamless access of the third-party component (compatible with the WebComponents specification), the dynamic ability registration mechanism (hot update without restarting the application), the application has the whole life cycle management system, realizes the binding of the page life cycle and the instance tree state, automatically synchronizes the component mounting / unloading, supports the batch injection of the life cycle hook, automatically recycles the instance reference, reduces the memory leakage risk.

Claims

1. A page quick building method based on a component instance calling mechanism, characterized in that: Comprise the following steps: Step 1: In the component definition module, for the front-end components in the business scenario, predefine the capability atomic component description specification of the front-end components, and generate the corresponding capability atomic component descriptor; The capability atomic component description specification is used to uniformly define the behavior mode of the component, so that different components have consistent definition structure and can be parsed description format; The behavior mode includes the attribute field, callback method and triggerable event of the component; Step 2: Establish a visual editor, which is based on the capability atomic component description specification and presets a business page prototype according to the business scenario; the user builds a page in the editor according to the business page prototype, the specific operation includes first selecting the required components by dragging, configuring the attributes, interfaces and events of the required components, and forming the page structure; Then configure the calling relationship between components, parameter passing rules and interaction logic; Finally, the editor generates a page description file, namely page JSON data, according to the user's configuration; Step 3: The storage module predefines the component instance storage data structure specification in the initialization stage, which is used to build the component instance tree and event call at runtime; the data structure organizes the component instances in a tree structure, including each page as a first-level node of the tree, with a unique identifier pageId; The components under the page are mounted as child nodes according to the hierarchical relationship, and each component has a unique identifier uuid; distinguish the hierarchical attributes of the page, container component and ordinary component; Step 4: The instance tree module parses and renders the component instance according to the page JSON data at page runtime, specifically, maintain the instance tree of the component in the global state management object, complete the instance mounting according to the component attribute, pageId and uuid when initializing each component, and establish the calling index table between the component instances, which is used to support cross-component event triggering and parameter passing; Step 5: The interaction execution module performs page interaction logic according to the calling relationship configured in the editor, which records the page identifier pageId, component type, component identifier uuid, calling event and parameter passing path of the called component.

2. The page quick building method based on the component instance calling mechanism according to claim 1, characterized in that: In step 1, the component definition module extracts the types of front-end components for the business scenarios of list page and pop-up page, including fuzzy search input box, query button, table, pop-up and edit form; The capability atomic component description specification includes attribute definition, method definition and event definition, the attribute definition is used to describe the static characteristics of the component; the method definition is used to define the functional behavior of the component; Event definition is used to describe the interaction trigger; The input parameter structure and output response format of the corresponding component are defined in the capability atomic component descriptor.

3. The page quick building method based on the component instance calling mechanism according to claim 2, characterized in that: In step 2, the specific operation includes: Step 2-1: According to the business scenario, preset the business page prototype, the user drags and places the required components in the editor according to the business page prototype, including fuzzy search input box, query button component, add button component, table component and pop-up component, and preliminarily arranges the components through the visual interface to form the page basic structure; Step 2-2: In the editor, configure the table component with the text fields to be displayed, and add edit and delete operation buttons for each row of data. Also, configure the internal page structure for the add / edit popup to support input and editing of the form. Step 2-3: In the table component, configure the query interface and select multiple fuzzy search input boxes as query parameters to automatically trigger the default data query when the page initializes. In the editor interface, bind the interface and component data through parameter mapping relationships. Step 2-4: For the button component, configure the click event logic in the editor, which includes calling the table component's query data event for the query button, calling the popup component's open event for the add button, calling the edit popup and passing in the row data object for the edit button, and calling the delete interface and triggering the table refresh when the interface callback is successful for the delete button. Step 2-5: In the editor, perform page preview and event trigger testing to verify the correctness of data flow and interaction logic between components. Step 2-6: The editor generates a page description file based on the user's drag-and-drop layout, property configuration, interface mapping, and calling relationships, forming page JSON data.

4. The page quick building method based on the component instance calling mechanism according to claim 1, characterized in that: When performing step 3, the following steps are included: Step 3-1: In the initialization phase, the storage module predefines a unified data structure based on the capability atomic component description specification provided by the component definition module. This data structure is used to describe the hierarchical relationship between pages and components. The data structure uses a tree organization method, with pages as the first-level nodes, and container components and ordinary components under the first-level nodes mounted as child nodes in hierarchical order. Each child node's information includes component type, component identifier uuid, property configuration, and event binding. Step 3-2: When the page is first loaded, parse the page structure based on the generated page JSON data, create the first-level node corresponding to the page in the storage module, and register its unique pageId. The page node records the page name, module it belongs to, and basic information of page-level events, providing a root node for dynamic mounting of component instances. Step 3-3: In the subsequent page loading process, read each component configuration item in the page JSON data one by one, generate component instance objects in hierarchical order, and write them into the storage module. Each component instance object is registered in the global instance index table through its uuid, and then quickly located. The parentComponent reference relationship is recorded through parentId to construct the component instance tree structure. Step 3-4: After the instance tree is generated, establish the associated mapping table between component instances. The mapping table records the calling relationship between components, event dependencies, and parameter transmission paths.

5. The page quick building method based on the component instance calling mechanism according to claim 1, characterized in that: When performing step 4, the instance tree module specifically performs the following steps: Step 4-1: When the page runs in the browser or front-end framework, read the page structure and component configuration from the page JSON data, and parse each component node according to the page hierarchical structure. The page JSON data includes component type, property configuration, event binding, and inter-component calling relationships. Step 4-2: For each parsed component node, create an instance object based on its capability atomic component descriptor, each instance object containing component type, uuid, property configuration, event method, and callback function. When the instance object is initialized, bind the component's behavior and events to the front-end framework lifecycle. Step 4-3: According to the page as a primary node, all components are mounted to the corresponding page node according to the parent-child hierarchical relationship. The child components inside the container component continue to be recursively mounted according to the page JSON data definition. The complete component instance tree is maintained in the global state management object for cross-level calling between components. Step 4-4: Traverse each component instance and generate a component call index table based on the call relationship information in the page JSON data. The index table records the event triggering relationship and parameter path between components. Through the index table, the target component instance is quickly located and the corresponding method is executed when the event is triggered.

6. The page quick building method based on the component instance calling mechanism according to claim 1, characterized in that: When performing step 5, the following steps are included: Step 5-1: When the user operates the component on the page, the front-end framework captures the event. The interaction execution module identifies the component instance that triggers the event and its corresponding page based on the component instance tree and event binding relationship. The event type and call parameter transmission information are passed as the event trigger object. Step 5-2: The interaction execution module quickly locates the called target component instance based on the component call index table obtained in step 4. The interaction execution module matches the target component according to the call index. Step 5-3: The interaction execution module executes the target component's corresponding method according to the call relationship. If there are multiple call relationships in the method execution, the interaction execution module executes them in queue order. If an exception occurs, subsequent calls are interrupted. Step 5-4: The interaction execution module extracts parameter values from the triggering component or event according to the call relationship and passes them to the target component instance. Parameter data is backfilled in pop-ups or forms, and form initialization or row data loading is performed. Step 5-5: If the page is bound to a lifecycle event, perform initialization data loading and component backfilling when the event is triggered. When the form is submitted or the pop-up is closed, the interaction execution module triggers the parent page to refresh.

Images