A form dependency relationship management and form accurate rendering method and system

Abstract

The application discloses a form dependency relationship management and form accurate rendering method and system to improve form rendering performance and development efficiency.The method comprises a form dependency relationship management and form accurate rendering method: variable monitoring and dependency relationship automatic collection are realized through a responsive programming method; multi-node dependency definition is realized through path matching syntax; and a form is quickly defined through a declarative syntax reuse basic component.The method has the characteristics that the rendering performance problem of a form containing a complex dependency relationship is solved at a data model level, and an interface definition mode of form development is greatly simplified, so that the development cost of the form in performance optimization and function reuse is reduced, and the form development efficiency is improved.

Description

TECHNICAL FIELD

[0001] The application relates to a form dependency relationship management and form accurate rendering method and system, and belongs to the technical field of Web front-end development. BACKGROUND

[0002] A web form (HTML Form, or Web Form, hereinafter referred to as a form) is a special component composed of a type of control for collecting user input. The support of the form component by the browser can be traced back to 1993. To this day, the form is still an important entry for user interaction with the web page and an important part of the Web front-end development ecosystem.

[0003] The core of front-end development is the DOM API provided by the browser. Developers can manipulate page elements by calling the corresponding DOM API. However, due to the lack of modularization means, the development efficiency is limited when facing large-scale form projects. In order to improve the development efficiency, it has become a general consensus among practitioners in the field of front-end development to develop based on frameworks. The React framework, which was first published and open-sourced by Facebook (now renamed Meta), is one of the widely used frameworks.

[0004] Although the development efficiency has been greatly improved by using the React framework compared with directly using the DOM API, the difficulty of form development has also increased due to the growing scale of variables that need to be managed and the growing complexity of the dependency relationship between variables. Developers often need to invest a lot of time to implement such complex forms, and also spend additional time on performance tuning.

[0005] The open source community has contributed a series of form development tools, such as react-jsonchema-form, formik, and react-final-form. These tools provide various variable management optimization strategies to simplify the development interface, thereby greatly improving the form development efficiency in specific scenarios. However, these tools have some limitations due to the defects of their optimization strategies, which have compromised their functions. While other comprehensive tools have performance bottlenecks in large-scale form scenarios, and when the variable scale grows to a certain extent, there will be obvious lag, affecting the interaction. Therefore, the existing tools cannot effectively support complex forms. SUMMARY

[0006] Invention purposes: To solve the problems existing in the prior art, improve the form rendering performance, and improve the form development efficiency, for the form development scene with complex variable interdependence relationship, a form interdependence relationship management and form accurate rendering method and system are provided, which realizes efficient management of interdependence relationship of variables in the form and greatly improves the UI rendering performance. This method takes the model-driven development idea as the core, applies the reactive programming method to realize the automatic collection and callback registration of the interdependence relationship of variables (hereinafter referred to as the function that needs to be automatically triggered when the variable changes is called as the dependent function), and on this basis, combined with the path system, the dependence relationship definition of multiple variables is realized, and finally the React framework is adapted to realize the accurate rendering of UI.

[0007] Technical scheme: A form interdependence relationship management and form accurate rendering method, through a reactive programming method, an original object is encapsulated and its access interface is intercepted to generate a proxy object, on this basis, a dependent function call stack is maintained to realize variable monitoring and dependent relationship automatic collection of the proxy object, and two types of boundary conditions are processed, including collecting full attribute dependence in combination with a to-be-accessed keyword set, and collecting inline type dependence relationship using a set keyword, finally realizing one-to-one dependence relationship management, the generated proxy object encapsulated by this method is called a reactive data model; on the basis of the dependent relationship automatic collection mechanism, a path system is realized in combination with a message bus and a path matching syntax to support multi-node dependent relationship monitoring and callback method triggering, so as to realize the basic dependence relationship mode of one-to-many dependence and many-to-one dependence; on the basis of the basic dependence relationship mode, a reactive component is encapsulated in combination with the React framework, the React rendering trigger flow is intercepted and rewritten, and a one-to-one binding relationship between variables in the data model and the basic component is realized; finally, the data model initial state definition, the dependent relationship definition, and the basic component definition jointly constitute the form definition to generate a page UI.

[0008] The reactive data model path system and the reactive component are as follows:

[0009] The steps of the reactive data model construction part are as follows:

[0010] Step 10: Initialize the dependent function call stack, which is used to maintain the order of dependent function calls during the registration of multiple dependent functions, initialize the three-level mapping dictionary, which is used to maintain the mapping relationship of original object-keyword-callback function, and initialize the two-level mapping dictionary, which is used to maintain the bidirectional mapping relationship of original object-proxy object.

[0011] Step 11: Encapsulate the original object using the API, intercept and rewrite the access method, and generate the proxy object, such proxy object is called a reactive data model.

[0012] Step 12: Register the target dependency function, push the target dependency function into the dependency function call stack described in step 10, and if a read operation of the proxy object is triggered during the execution of the dependency function, determine the target attribute type. For general attribute dependency (non-full attribute dependency and inline dependency), full attribute dependency (object type that needs to be traversed), and inline dependency (function type marked as inline dependency), directly register, keyword statistics registration, and recursive registration, respectively. The specific registration method is to register the original object-keyword-dependency function in the three-level mapping dictionary described in step 10. When the attribute of any proxy object changes, the registered dependency function list in the three-level mapping dictionary is automatically collected and triggered one by one.

[0013] The steps of the path system construction part are as follows:

[0014] Step 20: Initialize the message bus, which provides two types of operation interfaces, subscription and publication. By calling the subscription interface to specify the event name, path matching mode, and callback method, a subscription source can be created. By calling the publication interface, a message with specified event name and path is published to the message bus, which will broadcast the message to all subscription sources. The subscription sources that correctly match the event name and path will automatically call the registered callback method.

[0015] Step 21: Register the multi-node dependency function, register the subscription source in the form of path matching mode-callback function mapping on the message bus. The path matching mode of this method includes wildcard, reverse matching, and range matching syntax. Regular expressions can also be used directly to describe the matching path. When the attribute of any proxy object changes, a message containing the change event name and the proxy object path information is automatically sent to the message bus. After comparing with the subscription sources one by one, the callback function list of the subscription sources that correctly match the event name and path matching mode is collected and triggered one by one.

[0016] The steps of the responsive component construction part are as follows:

[0017] Step 30: Responsively encapsulate the basic components (a type of reusable page rendering function) under the React framework. Use the memo API provided by the React framework to intercept the default re-rendering process. Encapsulate the basic component as a dependency function and register it. Refer to the execution process described in step 12. After registration, when the target attribute of the proxy object accessed directly during the execution of the dependency function changes (since there is a call stack, the proxy object accessed in the recursively registered dependency function will not generate a mapping relationship), the original basic component will automatically trigger a re-render, without affecting other page content. The basic component encapsulated by the method described in step 30 is called a responsive component.

[0018] Step 31: A series of base component declarations are generated for their corresponding composite components, and the base components contained in the declarations are encapsulated one by one to form a composite component of the target base component in the order of the declarations. In step 31, a base component composite mechanism is provided, which is different from the general component development process. The mechanism does not need to explicitly declare the binding relationship between the component and the data, but only needs to declare a series of base components to automatically complete the reactive encapsulation process and generate the corresponding composite component.

[0019] The step 12 divides the trigger types of the dependent functions into three types. The general attribute dependency refers to the dependency on a specified attribute of the target object, which does not require special processing. The full attribute dependency refers to the dependency on all attributes of the target object, that is, when any attribute of the target object changes, the target dependent function is triggered. To prevent redundant registration of all keywords, the automatic collection of this type of dependency needs to initialize the set of all attribute keywords of the current object and exclude the accessed keywords one by one in the subsequent access process. When the set is empty, the dependent function registration is performed. The inline dependency refers to the context-independent dependency defined directly on the data model, that is, when the value of the dependent attribute inside the target object changes, the value of the dependent source is modified accordingly. To implement the inline definition interface, this type of dependency uses the set keyword Dep to distinguish. When the target keyword Dep is detected, the assignment method of the target attribute is registered by recursively encapsulating it.

[0020] In step 21, the message bus and the reactive data model are combined to implement multi-node dependency relationship management. Specifically, the original object is encapsulated and the value attribute assignment operation of the object is registered as a callback method of the message bus. When the multi-node dependency callback method is triggered, the value attribute assignment operation of the original object is automatically triggered and the corresponding dependent function is triggered.

[0021] A form dependency relationship management and form accurate rendering system includes a reactive data model construction module, a path system construction module, and a reactive component construction module.

[0022] The reactive data model construction module encapsulates the original object and intercepts its access interface to generate a proxy object by using the reactive programming method, and performs special processing on two types of boundary conditions. Finally, the one-to-one dependency relationship management is realized. On this basis, the dependent function call stack is maintained to realize variable monitoring and automatic collection of the dependency relationship of the proxy object, and special processing is performed on two types of boundary conditions. Finally, the one-to-one dependency relationship management is realized.

[0023] The path system construction module, on the basis of the dependency automatic collection mechanism, realizes the path system to support the listening and callback method triggering of multi-node dependency in combination with the message bus and path matching syntax, thereby realizing the basic dependency relationship mode of one-to-many dependency and one-to-many dependency.

[0024] The responsive component construction module, on the basis of the basic dependency relationship mode, encapsulates the responsive component in combination with the React framework, intercepts and rewrites the React rendering triggering flow, realizes the one-to-one binding relationship between the variable in the data model and the basic component, and generates the page UI by defining the initial state of the data model, the dependency relationship, and the basic component.

[0025] 1) Key data structure initialization of the responsive data model construction module, including:

[0026] a) dependency function registration stack;

[0027] b) three-level dictionary of object, keyword and dependency function list;

[0028] c) message bus;

[0029] d) bidirectional mapping dictionary of original object and proxy object;

[0030] 2) Responsive data model encapsulation, including:

[0031] a) using JavaScript Proxy API to intercept and rewrite the access method of the original object to generate a proxy object;

[0032] b) registering the mapping relationship between the original object and the proxy object;

[0033] 3) Dependency function registration, including:

[0034] a) pushing the dependency function into the registration stack;

[0035] b) calling the dependency function;

[0036] c) if the proxy object get method call occurs during the callback function execution, registering the mapping relationship of the original object, property keyword and stack top callback function;

[0037] d) end of dependency function call;

[0038] e) dependency function stack;

[0039] 4) Responsive component registration:

[0040] a) encapsulating the original component using the memo method provided by the React framework, and rewriting its update flow;

[0041] b) encapsulate the forceUpdate method and register as a dependent function in the reactive data model factory;

[0042] 5) base component composition:

[0043] a) traverse the target component list for reactive component registration;

[0044] b) encapsulate function to implement nested composition of base components.

[0045] A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor executing the computer program to implement the form dependency relationship management and form accurate rendering method as described above.

[0046] A computer readable storage medium storing a computer program for executing the form dependency relationship management and form accurate rendering method as described above.

[0047] Advantages: Compared with the prior art, the form dependency relationship management and form accurate rendering method and system provided by the present application have the following advantages:

[0048] 1) excellent rendering performance, realizing the minimum closure update based on dependency relationship;

[0049] 2) strong scalability, no preset keywords, allowing developers to listen to any variable;

[0050] 3) high development efficiency, automatically completing component composition and variable and component binding, while simplifying the declaration method of variables and dependency relationships, greatly reducing development cost. BRIEF DESCRIPTION OF DRAWINGS

[0051] Figure 1 is the overall execution flowchart of the method in the embodiment of the present application;

[0052] Figure 2 is the reactive data model registration principle diagram in the embodiment of the present application;

[0053] Figure 3 is the multi-node dependency relationship implementation principle diagram in the embodiment of the present application. DETAILED DESCRIPTION

[0054] The present application will be further illustrated below in conjunction with specific embodiments, which should be understood as merely illustrating the present application and not limiting the scope of the present application. After reading the present application, those skilled in the art can make various equivalent modifications to the present application, which all fall within the scope defined by the claims attached hereto.

[0055] A form dependency relationship management and form accurate rendering method, by using a responsive programming method to encapsulate an original object and intercept an access interface thereof to generate a proxy object, on the basis of which a dependency function call stack is maintained to realize variable monitoring and automatic collection of dependency relationships of the proxy object, and two types of boundary conditions are specially processed, so that one-to-one dependency relationship management is finally realized; on the basis of the automatic collection mechanism of the dependency relationship, a path system is realized by combining a message bus and a path matching syntax to support the monitoring and callback method triggering of a multi-node dependency relationship, so that a one-to-many dependency and a one-to-many dependency basic dependency relationship mode are realized; on the basis of the basic dependency relationship mode, a responsive component is encapsulated by combining a React framework, a React rendering triggering process is intercepted and rewritten, and a one-to-one binding relationship between variables in a data model and a basic component is realized; finally, a form definition is composed of a data model initial state definition, a dependency relationship definition and a basic component definition to generate a page UI.

[0056] Figure 1 The overall execution flowchart of the application is described, including factory class initialization instance, responsive data model encapsulation, dependency function registration and responsive component encapsulation.

[0057] The specific implementation is described below. First, the factory class initialization instance part is described:

[0058] Step one: initializing the factory class instance of the responsive data model to complete the subsequent encapsulation operation, the data structures that need to be initialized include a dependency function registration stack, a three-level mapping dictionary of original object-attribute keyword-dependency function list, a message bus for multi-node communication, a mapping dictionary of original object and proxy object, the instance provides a reactive method for responsive data model encapsulation, an observe method for general dependency function registration, a query method for node query, a watch method for multi-node dependency function registration, and a memo method for responsive component encapsulation.

[0059] Then, the responsive data model encapsulation part is described:

[0060] Step two: calling the reactive method of the factory class instance described in step one to encapsulate the original object into a proxy object. The reactive method uses the JavaScript Proxy API to intercept and rewrite the access operations of the original object, including the get, set, ownKeys and deleteProperty methods, which correspond to the read attribute, write attribute, get all attribute keywords and delete attribute operations of the object respectively. Finally, the corresponding proxy object is generated, and the mapping relationship between the original object and the proxy object is registered. These proxy objects are organized into a tree according to the specified hierarchical relationship, and each proxy object takes its path from the root node as the unique identifier;

[0061] Next is the dependent function registration part:

[0062] Step three: for the dependent function f, call the observe method of the factory class instance described in step one to complete the registration. The observe method will push the target function into the registration stack and call it. If the get method of the a attribute of the agent object A is triggered during the execution of the target function, the mapping relationship registration of (A, a, f) is performed in the three-level mapping dictionary of the original object-attribute key-dependent function list described in step one. There are two boundary conditions in this step, which are handled by steps four and five.

[0063] Step four: for the Array type of agent object, if the class specific

[0064] method, such as map, filter, is accessed, initialize the unvisited key set unvisited_set with all the keys of the original object. When the get method of a certain key is triggered, delete the key from unvisited_set until unvisited_set is empty. At this time, the dependent function registration is performed, and the special key iterate is used to mark this type of dependence.

[0065] Step five: for the function type of attribute value a, if the set key Dep is marked, it is regarded as an inline dependent function. Encapsulate a new function dependency_a with the inline dependent function inner_a corresponding to the attribute a, which is used to express the dependent relationship A.a = inner_a(), and recursively register the dependent function of dependency_a.

[0066] Step six: for the multi-node type dependent function definition, the query method can be used to implement the query operation of nodes. The watch method can be used to register the subscription source in the message bus in the form of path matching pattern-callback function mapping. The path matching pattern preset by this method includes wildcard, reverse matching, range matching syntax, and regular expression can also be used to describe the matching path. When the attribute of any agent object changes, the rewritten set method will be triggered to automatically publish the message to the message bus, and the dependent function in the correctly matched subscription source can be triggered.

[0067] Finally, the responsive component encapsulation part:

[0068] Step seven: encapsulate the input base component list using the instance method memo described in step one. Use the memo method provided by the React framework to intercept the default rendering process and encapsulate the process of redrawing the UI into the forceUpdate function, which is registered as a dependent function. When the proxy object property accessed by the forceUpdate function call process changes, the original base component will automatically trigger a re-render without affecting other components in the page.

[0069] Step eight: integrate the base component list to composite the base components in a nested form.

[0070] A form dependency management and form accurate rendering system, including a responsive data model construction module, a path system construction module, and a responsive component construction module;

[0071] The responsive data model construction module encapsulates the original object and intercepts its access interface to generate a proxy object through a responsive programming method, and makes special processing for two types of boundary conditions, finally realizes the management of one-to-one dependency relationship. On this basis, the dependent function call stack is maintained to realize variable monitoring and automatic collection of dependency relationship, and special processing is made for two types of boundary conditions, finally realizing the management of one-to-one dependency relationship;

[0072] The path system construction module, based on the automatic dependency collection mechanism, combines the message bus and path matching syntax to realize the path system to support the monitoring of multi-node dependency relationship and the triggering of callback method, thereby realizing the basic dependency relationship mode of one-to-many dependency and many-to-one dependency;

[0073] The responsive component construction module, based on the basic dependency relationship mode, encapsulates the responsive component combined with the React framework, intercepts and rewrites the React rendering trigger process, realizes the one-to-one binding relationship between the variables in the data model and the base component; the initial state definition of the data model, the dependency relationship definition, and the base component definition together constitute the form definition to generate the page UI.

[0074] In the responsive data model construction module, the initialization dependency function call stack is used to maintain the order of the dependency function call during the nested registration of multiple dependency functions, the three-level mapping dictionary is used to maintain the mapping relationship of the original object-key-callback function, and the two-level mapping dictionary is used to maintain the bidirectional mapping relationship of the original object-proxy object. The original object is encapsulated using the API, the access method is intercepted and rewritten, and the proxy object is generated. Such proxy objects are called responsive data models. The target dependency function is registered, and the target dependency function is pushed into the dependency function call stack. If it is detected that the read operation of the proxy object is triggered during the execution of the dependency function, the target attribute type is judged. For general attribute dependency (no special marked type), full attribute dependency (object type that needs to be traversed and listened to), and inline dependency (function type marked as inline dependency), direct registration, keyword statistical registration, and recursive registration are performed respectively. The specific registration method is to register the original object-key-dependency function in the three-level mapping dictionary. When the attribute of any proxy object changes, the registered dependency function list in the three-level mapping dictionary is automatically collected and triggered one by one.

[0075] In the path system construction module, the message bus is initialized, which provides two types of operation interfaces, subscription and publication. The subscription interface is called to specify the event name, path matching mode, and callback method to create a subscription source. The publication interface is called to specify the event name and path. The message bus will broadcast the message to all subscription sources. The correctly matched subscription sources will automatically call the registered callback method. The multi-node dependency function is registered in the form of path matching mode-callback function mapping on the message bus. The path matching mode of this method contains wildcard, reverse matching, and range matching syntax. Regular expressions can also be used directly to describe the matching path. When the attribute of any proxy object changes, the change information is automatically sent to the message bus. After comparison with the subscription sources, the effective callback function list is determined and triggered one by one.

[0076] In the responsive component construction module, the basic components (a type of reusable page rendering function) under the React framework are encapsulated responsively, the default re-rendering process is intercepted using the memo API provided by the React framework, the basic components are encapsulated as dependency functions and registered, and when the target attribute of the proxy object (since there is a call stack, the proxy object accessed in the recursively registered dependency function will not generate a mapping relationship) directly accessed during the execution of the dependency function is changed, the re-rendering of the original basic component is automatically triggered without affecting other page content. The basic component encapsulated by the above steps is called a responsive component. A series of basic components are declared to generate the corresponding composite components, the responsive component encapsulation is performed on the basic components contained in the declaration one by one, and the encapsulation is performed layer by layer according to the order of declaration, and finally the composite component of the target basic component is generated.

[0077] Through the above method, the application realizes a data model driven form development method, which uses the responsive programming idea to realize a data model dependency relationship management and UI management scheme, and designs a high-performance form development tool with complete functions in the current form demand scene.

[0078] Obviously, those skilled in the art should understand that the steps of the form dependency relationship management and form accurate rendering method of the above-mentioned embodiments of the application or the modules of the form dependency relationship management and form accurate rendering system can be realized by general computing devices, which can be concentrated on a single computing device or distributed on a network composed of multiple computing devices. Optionally, they can be realized by program codes executable by computing devices, so that they can be stored in storage devices and executed by computing devices, and in some cases, the steps shown or described here can be executed in different order, or they can be manufactured into individual integrated circuit modules, or multiple modules or steps among them can be manufactured into a single integrated circuit module. Thus, the embodiments of the application are not limited to any specific combination of hardware and software.

Claims

1. A form dependency relationship management and form accurate rendering method, characterized in that, The original object is encapsulated and the access interface thereof is intercepted to generate a proxy object by a responsive programming method, variable monitoring and dependency automatic collection of the proxy object are implemented by maintaining a dependency function call stack, and two types of boundary conditions are processed, including collecting full attribute dependency by combining a set of to-be-accessed keywords and collecting inline dependency by using a set keyword, so that one-to-one dependency relationship management is implemented; on the basis of the dependency automatic collection, a path system is implemented by combining a message bus and a path matching syntax to support multi-node dependency monitoring and callback method triggering, so that one-to-many dependency and many-to-one dependency are implemented; On the basis of the basic dependency mode, a responsive component is encapsulated, a rendering triggering process is intercepted and rewritten, and a one-to-one binding relationship between variables in a data model and a basic component is implemented; Finally, a form definition is formed by a data model initial state definition, a dependency relationship definition and a basic component definition to generate a page UI. The steps of constructing the path system are as follows: Step 20: initializing a message bus, the bus providing two types of operation interfaces of subscription and publishing, calling a subscription interface to specify an event name, a path matching mode and a callback method to create a subscription source, calling a publishing interface to publish a message with a specified event name and path to the message bus, the message bus broadcasting the message to all subscription sources, and the subscription sources correctly matching the event name and path automatically calling the registered callback method; Step 21: registering a multi-node dependency function, registering the subscription source in the form of a path matching mode-callback function mapping on the message bus, when a property of any proxy object changes, automatically sending a message containing a change event name and path information of the proxy object to the message bus, comparing the subscription sources one by one, collecting a callback function list of the subscription sources correctly matching the event name and path matching mode, and triggering the callback functions one by one.

2. The form dependency management and form precision rendering method of claim 1, wherein, The steps of constructing the responsive data model are as follows: Step 10: initializing a dependency function call stack, the call stack being used to maintain the order of dependency function calls during the nested registration of multiple dependency functions, initializing a three-level mapping dictionary, the three-level mapping dictionary being used to maintain the mapping relationship of original objects-keywords-callback functions, and initializing a two-level mapping dictionary, the two-level mapping dictionary being used to maintain the bidirectional mapping relationship of original objects-proxy objects; Step 11: encapsulating an original object by using an API, intercepting and rewriting an access method, and generating a proxy object, the proxy object being called a responsive data model; Step 12: register the target dependent function, push the target dependent function into the dependent function call stack in step 10, if the read operation of the proxy object is triggered during the execution of the dependent function, judge the target attribute type, and perform direct registration, keyword statistical registration, and recursive registration for the three target attribute types of general attribute dependency, full attribute dependency, and inline dependency, respectively. The specific registration method is to register the original object-keyword-dependent function in the three-level mapping dictionary in step 10. When the attribute of any proxy object changes, the dependent function list registered in the three-level mapping dictionary is automatically collected and triggered one by one.

3. The form dependency management and form precision rendering method of claim 1, wherein, The steps of constructing a responsive component are as follows: Step 30: responsive packaging of the base component, intercepting the default re-rendering process, packaging the base component into a dependent function and registering it. After registration, when the target attribute of the proxy object accessed directly during the execution of the dependent function changes, the re-rendering of the original base component is automatically triggered. The packaged base component is called a responsive component; Step 31: declare a series of base components to generate their corresponding composite components, and perform responsive component packaging on the base components contained in the declaration one by one, and perform layer-by-layer packaging according to the order of declaration, to finally generate the composite component of the target base component.

4. The form dependency management and form precision rendering method of claim 2, wherein, In step 12, the trigger type of the dependent function is divided into three types. The general attribute dependency refers to the existence of a dependency on a specified attribute of the target object. The full attribute dependency refers to the need to apply a dependency to all attributes of the target object, i.e., when any attribute of the target object changes, the target dependent function is triggered. The automatic collection of full attribute dependency needs to initialize the attribute keyword set of the current object, and in the subsequent access process, the accessed keywords are removed one by one. When the set is empty, the formal dependent function registration is performed. Inline dependency refers to the context-independent dependency defined directly on the data model, i.e., when the value of the dependent attribute inside the target object changes, the value of the dependent source is modified accordingly. Inline dependency uses a specified keyword to distinguish between different types of dependencies. When the target keyword is detected, the target attribute assignment method is registered by recursively packaging.

5. The form dependency management and form precision rendering method of claim 2, wherein, In step 21, the message bus and the responsive data model are combined to realize multi-node dependency relationship management. Specifically, the original object is packaged, and the value attribute assignment operation of the object is registered as a callback method of the message bus. When the multi-node dependency callback method is triggered, the value attribute assignment operation of the original object is automatically triggered, and the corresponding dependent function is triggered.

6. The form dependency management and form precision rendering method of claim 1, wherein, In step 21, the multi-node dependent function is registered in the form of path matching mode-callback function mapping on the message bus. The preset path matching mode includes wildcard, reverse matching, and range matching syntax, or a regular expression is directly used to describe the matching path.

7. A form dependency management and form precision rendering system, comprising: It includes a responsive data model construction module, a path system construction module, and a responsive component construction module. The reactive data model construction module encapsulates the original object and intercepts the access interface thereof to generate a proxy object by using a reactive programming method, and performs special processing on two types of boundary conditions, so that the management of one-to-one dependency relationship is realized. The path system construction module, on the basis of the automatic dependency relationship collection mechanism, combines a message bus and a path matching syntax to implement a path system to support the listening of multi-node dependency relationship and the triggering of a callback method, so that the basic dependency relationship modes of one-to-many dependency and many-to-one dependency are realized. The reactive component construction module, on the basis of the basic dependency relationship mode, encapsulates a reactive component by combining a React framework, intercepts and rewrites a React rendering triggering flow, and realizes the one-to-one binding relationship between the variables in the data model and the basic components. The initial state definition of the data model, the dependency relationship definition, and the basic component definition jointly constitute the form definition to generate a page UI. The path system construction module is used to implement: Initializing a message bus, the bus providing two types of operation interfaces of subscription and publishing, calling the subscription interface to specify an event name, a path matching mode, and a callback method to create a subscription source, calling the publishing interface to publish a message with a specified event name and path to the message bus, the message bus broadcasting the message to all subscription sources, and the subscription sources correctly matching the event name and path automatically calling the registered callback method; Registering multi-node dependency functions in the form of a path matching mode-callback function mapping on the message bus, when the attributes of any proxy object change, automatically sending a message containing a change event name and path information of the proxy object to the message bus, comparing with the subscription sources one by one, collecting the callback function list of the subscription sources correctly matching the event name and path matching mode, and triggering them one by one.

8. A computer device, comprising: The computer device includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor executes the computer program to realize the form dependency relationship management and form accurate rendering method in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that: The computer readable storage medium stores a computer program for executing the form dependency relationship management and form accurate rendering method in any one of claims 1-6.

Images