CN115586897A - Interface programming method and device and related equipment - Google Patents

Abstract

The application is applied to the technical field of computers, and provides an interface programming method, an interface programming device and related equipment, wherein the method comprises the following steps: displaying a first page, wherein the first page comprises a plurality of components, each component in the plurality of components corresponds to at least one node, and each node has a respective attribute value; acquiring an interface updating request, and determining a node with a changed first page attribute value; and updating the nodes with the changed attribute values to obtain a second page. Therefore, by the interface programming method provided by the application, only the node with the changed attribute can be updated in the interface updating process according to the node with the changed attribute, the whole interface does not need to be updated, and the interface rendering efficiency is improved.

Description

Interface programming method and device and related equipment

Technical Field

The present invention relates to the field of computer technologies, and in particular, to an interface programming method and apparatus, and a related device.

Background

In interface development, data in an interface is usually processed by a Document Object Model (DOM), and an interface can be represented as a DOM tree through the DOM, where each node of the tree represents one tag in the interface or a text item in the tag, and the structure of the DOM tree can describe the correlation between tags in the interface. The electronic device can display the corresponding interface by rendering the DOM tree.

However, each time the interface data is modified, a change of the DOM node is caused, and at this time, the electronic device re-renders the whole interface, so that the content of the interface is consistent with the content of the updated DOM. However, each time the electronic device renders the entire interface, the electronic device may sequentially call the APIs corresponding to the nodes in the DOM tree, which may cause frequent interaction between the interface and the DOM, resulting in a large overhead.

In order to reduce the invocation of DOM interfaces, in some methods, when an interface is updated, a virtual DOM (virtual DOM) tree is analyzed according to current interface data, then when the interface data changes, the changed interface data is analyzed into a new VDOM tree, then the two VDOM trees are compared to determine a node which is added, modified or deleted, and then only the API of the modified node is invoked to update the content of the node in the interface.

However, in the process of comparing the previous VDOM tree with the current VDOM tree, the corresponding relationship between the nodes needs to be sequentially confirmed through the types of the nodes in the previous VDOM tree and the current VDOM tree, and the modified nodes can be confirmed. The comparison process takes a long time, occupies more resources of the processor, and makes the interface update less efficient.

Disclosure of Invention

The application provides an interface programming method, an interface programming device and related equipment. .

In a first aspect, an interface programming method is provided, which is applied to an electronic device, and includes: displaying a first page, wherein the first page comprises a plurality of components, each component in the plurality of components corresponds to at least one node, and each node has a respective attribute value; acquiring an interface updating request, and determining a node with a changed first page attribute value; and updating the nodes with the changed attribute values to obtain a second page.

In the above solution, the interface is composed of multiple components, each component corresponds to a node, and when the interface is displayed, all nodes need to be traversed. According to the interface programming method provided by the application, only the node with the changed attribute is updated in the interface updating process according to the node with the changed attribute, the whole interface does not need to be updated, and the interface rendering efficiency is improved.

With reference to the first aspect, in some implementations, the attribute of the node includes a display attribute, and the display attribute is used to indicate whether to display the first component corresponding to the node.

In the above scheme, whether the node is displayed is marked by adding a display attribute to the node, the value of the display attribute indicates whether the node is displayed in the interface, and further, the electronic device can determine whether the node is added or deleted according to the display attribute value and a component for determining whether the interface displays the node. The stored original VDOM tree is compared with the new VDOM tree without electronic equipment to determine the added, modified or deleted nodes, and the large expense brought to a processor by comparing the VDOM trees is avoided.

With reference to the first aspect, in some implementation manners, determining a node whose display attribute does not correspond to the first page, where the determining that the display attribute does not correspond to the first page includes: the display attribute indicates that the first component is displayed and the first component is not displayed in the first page; alternatively, the display attribute indicates that the first component is not displayed and the first component is displayed in the first page.

In the above scheme, when the display attribute indicates that the node is displayed but the interface does not display the component, it indicates that the node is newly added, and when the display attribute indicates that the node is not displayed but the component is displayed in the interface, it indicates that the node is to be deleted. And the electronic equipment can determine whether the addition or deletion of the node exists according to the display attribute value and whether the interface displays the component of the node. The stored original VDOM tree is compared with the new VDOM tree without electronic equipment to determine the added or deleted nodes, and the large expense brought to a processor by comparing the VDOM trees is avoided.

With reference to the first aspect, in some implementations, the method further includes determining a node where the first attribute changes, where the first attribute is determined according to a first variable, and the first variable is associated with calculation of the first attribute.

In the above scheme, the data is defined as responsive data, where the responsive data binds to a corresponding execution function in the definition, and when the data changes, the electronic device is triggered to execute the bound function.

With reference to the first aspect, in some implementations, the method further includes automatically recalculating the first attribute of the node based on a change in the first attribute in the node; updating the node with the changed attribute value to obtain a second page, wherein the updating comprises the following steps: and displaying the first component based on the display attribute indication, and displaying the component corresponding to the node in the second page according to the node after recalculating the first attribute.

In the above scheme, when a certain attribute in a node uses the responsive data, the responsive data is bound with the attribute for calculating the node, so that the electronic device automatically recalculates the attribute of the node as long as the responsive data changes, and further, the electronic device can determine the node with the changed attribute to directly determine the node calling the responsive data through the binding relationship by determining which nodes perform recalculation, thereby realizing the monitoring of the attribute change in the node, and monitoring the modified node through the change of the responsive data. The stored original VDOM tree is compared with the new VDOM tree without electronic equipment, the node with the changed attribute is determined, and the expense of a processor is saved.

With reference to the first aspect, in some implementations, the method further includes creating a visual node tree according to attributes of the plurality of nodes, where the visual node tree includes a plurality of visual nodes, and each visual node in the plurality of visual nodes corresponds to one node; and displaying the first page according to the plurality of visual nodes.

In the above scheme, the process of displaying the interface specifically includes generating a visual node according to the node attribute, and then rendering the interface according to the visual node.

With reference to the first aspect, in some implementations, further comprising, based on the first page having displayed the first component, maintaining display of the first component in the second view; and based on the fact that the first assembly is not displayed on the first page, creating a visual node corresponding to the node in the visual node tree, and displaying the first assembly in the second page according to the visual node.

In the above solution, if the value of the display attribute indicates that the node is displayed, if the electronic device determines that the node is displayed in the previous interface display, it indicates that the display attribute of the node is not changed, and if the electronic device determines that the node is not displayed in the previous interface display, it indicates that the node is newly created, a visual node of the node is generated, and then the interface displays a component corresponding to the node. And the electronic equipment can determine whether the addition or deletion of the node exists according to the display attribute value and whether the interface displays the component of the node. The stored original VDOM tree is compared with the new VDOM tree without electronic equipment to determine the added or deleted nodes, and the large expense brought to a processor by comparing the VDOM trees is avoided.

With reference to the first aspect, in some implementations, in a case that the display attribute indicates that the first component is not displayed, further comprising: based on the first page not displaying the first component, maintaining display of the first page in the second page; and displaying the first component based on the first page, deleting the visual node corresponding to the node in the visual node tree, and not displaying the first component in the second page.

In the above scheme, when the value of the display attribute indicates that the node is not displayed, if the electronic device determines that the node is not displayed in the previous interface display, it indicates that the display attribute of the node is not changed, and if the electronic device determines that the node is displayed in the previous interface display, it indicates that the node is deleted this time, and the interface does not display the component corresponding to the node and destroy the node and its child nodes. And the electronic equipment can further determine whether the addition or deletion of the node exists according to the display attribute value and whether the interface displays the component of the node. The stored original VDOM tree is compared with the new VDOM tree without electronic equipment to determine the added or deleted nodes, and the large expense brought to a processor by comparing the VDOM trees is avoided.

With reference to the first aspect, in some implementations, if the first node has a child node, and the display attribute indicates to display the first component, the method further includes: determining whether to display a first component corresponding to the child node based on the display attribute of the child node; and based on the fact that the first component is not displayed on the first page and the display attribute indication of the child node displays the second component corresponding to the child node, creating the visual node corresponding to the first node and the child node in the visual node tree, and displaying the first component and the second component in the second page according to the first visual node.

In the above solution, if a node has a child node, if the node is to be displayed, it is also determined whether the child node is to be displayed according to the display attribute of the child node. When the display attribute of the node indicates that the first component is displayed and the display attribute of the child node indicates that the second component is not displayed, only the component corresponding to the first node can be displayed. When the display attribute of the node indicates to display the first component and the display attribute of the child node indicates to display the second component, the child node and the component corresponding to the first node can be simultaneously displayed.

With reference to the first aspect, in some implementations, in a case that the first node has a child node and the display attribute indicates that the first component is not displayed, the method further includes: based on that the first page does not display the first component and a second component corresponding to the child node, keeping the display of the first page in the second page; and displaying the first assembly and the second assembly based on the first page, deleting the visual nodes corresponding to the first node and the second node in the visual node tree, and not displaying the first assembly and the second assembly in the second page.

In the above solution, when the first node is not displayed, the child nodes of the first node are not necessarily displayed. Correspondingly, the visible node of the node and the child node is deleted together in the visible node tree.

In a second aspect, the present application provides a computing device comprising a processor and a memory, the memory being configured to store instructions, the processor being configured to execute the instructions, and the method as described in the first aspect being performed when the processor executes the instructions.

In a third aspect, the present application provides a computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium, and when the instructions are executed on a computing device, the method as described in the first aspect is performed.

In a fourth aspect, the present application provides a computer program product, characterized in that the computer program product comprises computer instructions which, when executed by a computing device, the computing device performs the method as described in the first aspect.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings used in the description of the embodiments will be briefly introduced below.

FIG. 1 is a code diagram of a VDOM model provided by an embodiment of the present application;

fig. 2 is a schematic diagram of a VDOM model comparison node according to an embodiment of the present application;

FIG. 3 is a schematic diagram illustrating a comparison between a VDOM model and a node with an altered property determined by an interface programming method according to an embodiment of the present application;

FIG. 4 is a schematic diagram illustrating comparison of a VDOM model and an interface programming method with node additions and node deletions determined according to an embodiment of the present disclosure;

FIG. 5 is a schematic structural diagram of an interface programming system according to an embodiment of the present disclosure;

FIG. 6 is a schematic diagram of an interface programming system applied to command programming according to an embodiment of the present disclosure;

FIG. 7 is a schematic diagram of an interface programming system applied to a DOM model according to an embodiment of the present application;

FIG. 8 is a schematic flowchart of an interface programming method according to an embodiment of the present disclosure;

FIG. 9 is a code diagram of a node determined to have data change in an interface programming method according to an embodiment of the present disclosure;

FIG. 10 is a schematic code diagram illustrating a method for determining to add or delete nodes in an interface programming method according to an embodiment of the present disclosure;

FIG. 11 is a schematic code diagram illustrating a determination of adding or deleting nodes in another interface programming method according to an embodiment of the present application;

FIG. 12 is a schematic flow chart diagram illustrating another interface programming method provided by embodiments of the present application;

FIG. 13 is a schematic diagram of a comparison of performance of a VDOM model and an interface programming method according to an embodiment of the present disclosure;

fig. 14 is a schematic flowchart of a view scaling method in an interface programming method according to an embodiment of the present disclosure;

FIG. 15 is a schematic diagram of code for view scaling in an interface programming method according to an embodiment of the present application;

FIG. 16 is a schematic diagram illustrating view scaling in an interface programming method according to an embodiment of the present disclosure;

FIG. 17 is a schematic diagram of an interface programming apparatus according to an embodiment of the present disclosure;

fig. 18 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

Illustrative embodiments of the present application include, but are not limited to, interface programming methods, apparatus, articles of manufacture, and media.

First, a description will be given of a related art of interface development related to the embodiment of the present application.

The software development includes two modes of command (interactive) programming and Declarative (explicit) programming. Among them, imperative programming is generally used to instruct an electronic device to perform certain operations in a specific order, and the electronic device traverses the code line by line, updating the corresponding variables. The declarative programming language is used for directly declaring the target to the electronic equipment, so that the electronic equipment determines how to finish the target according to the packaged instruction operation in the program library. That is, imperative programming is used to instruct the electronic device how to do so, regardless of the purpose of the instruction, the electronic device will implement the instruction as per the instruction. Declarative programming tells the electronic device what it wants to do, leaving the electronic device to decide how to implement it.

The above imperative and declarative programming can also be used for User Interface (UI) development of software. Imperative UI development primarily alters interface content by writing instructions that invoke APIs, while declarative UI development primarily alters interface content by writing properties of components in the interface. Compared with command UI development, the declarative UI development can describe interface contents through a more intuitive and vivid programming language, reduce code amount and enable the development efficiency of the declarative UI development to be higher. For example, swift UI, VUE, angular, and extensive Type Script (extensive TS, eTS) employ declarative programming for UI development.

In UI development, data in an interface is usually processed through a Document Object Model (DOM), and an interface can be represented as a DOM tree through the DOM, where each node of the tree represents a tag or a text item in the tag in the interface, and the structure of the DOM tree can describe the correlation between tags in the interface.

For example, hypertext markup language (HTML) or extensible markup language (XML) in interface development belongs to the DOM. For example, HTML tags can be classified into 5 classes according to their role, including tags describing title and page summary information: such as title < title >, body > and the like, a label describing the layout of a web page: such as table, tr, td, p, div, etc., describing display characteristics, such as b, I, strongg, h1, h6, etc., related to hyperlinks for representing content-related information between interfaces, and other tags, such as image-setting tag img. Attributes such as a category (category) of the HTML tag, a non-link Wen Zishu (wordNum), a number of hyperlinks (linkNum), an attribute set (attribute), and an influence factor (influence) may be stored in the DOM node.

The process of converting the HTML or XML document into the DOM tree by the electronic device is called parsing (parse), and the HTML or XML document is converted into the DOM tree after being parsed. Furthermore, developers can delete and add nodes in the DOM tree and access and modify the contents of the nodes by modifying HTML or XML documents. The electronic device may obtain content of each node by calling an Application Programming Interface (API) corresponding to each node in the DOM tree, and present the interface by rendering the content of the node in the DOM tree.

For the following description of an example of modifying a node in the DOM by using declarative programming, as shown in fig. 1, declarative programming codes are exemplarily shown, and the codes in fig. 1 define the text "Number: (value)" and the button "+" arranged horizontally, and define the text "bottom", the button "-" and so on, and specific contents can refer to the annotations of the codes in fig. 1, and are not described herein again. The organization structure of the code can be called a component, the component corresponds to a node in the DOM, the attribute data of the component is determined in the component, the component view forms and binds the component data, wherein, as shown in FIG. 1, value is the attribute data, if the value of the value is changed, recalculation of the body component is caused, and further, a node in the DOM tree is changed, so that a DOM tree can be re-analyzed.

However, each time the interface data is modified, a change of the DOM node is caused, and the electronic device re-renders the whole interface, so that the content of the interface is consistent with the content of the updated DOM. However, when the electronic device renders the entire interface, the electronic device may sequentially call the APIs corresponding to the nodes in the DOM tree, and there may be frequent interaction between the interface and the DOM, which may generate a large overhead, and may cause the efficiency of interface update to be low.

In order to reduce the invocation of the DOM interface and improve the efficiency of interface update, in some embodiments, a Virtual DOM (VDOM) model is provided, and when an HTML or XML document is modified, a new VDOM tree is parsed by storing an original VDOM tree of an interface, and then the stored original VDOM tree is compared with the new VDOM tree to determine a new node to be added, modified or deleted, and then only the API of the modified node is invoked to update the content of the node in the interface. Therefore, the interface can be updated only by calling the API of the modified node, the expense generated by calling the API interface is reduced, and the efficiency of updating the interface is improved.

Therefore, in interface development, developers generally adopt declarative programming in order to reduce the amount of code and improve development efficiency. In order to reduce the overhead of API call brought by interface update and improve the efficiency of interface update, developers usually select a VDOM model.

The VDOM update interface is illustrated below. As shown in fig. 2, an example of the original VDOM tree saved by the electronic device before the interface update is shown, where node 0 has 3 child nodes: node 1, node 2 and node 3, node 1 having child nodes: node 5 and node 6.

After the interface acquires the user operation or the developer modifies the interface data through the programming code, a virtual DOM tree (VDOM tree) can be parsed through the modified data, for example, in the VDOM tree, the node 7 has a child node of node 8, the node 9 has a child node a, the node 8 has a child node b, and the node 9 has a child node c.

The VDOM model firstly determines the direct corresponding relation of the nodes, and then determines whether the nodes are modified, deleted or added, so as to compare the difference between the original VDOM tree and the VDOM tree. Specifically, the electronic device determines the correspondence between the original VDOM tree and the VDOM tree according to the type of the node, the node attribute, the node creation order, the position of the node, and the like, for example, in fig. 2, the node 8 of the VDOM tree corresponds to the node 1 of the original VDOM, the node b of the VDOM tree corresponds to the node 6 of the original VDOM, and the like. Further, it can be determined that the node 5 in the original VDOM is deleted, the node c is newly created, and the attribute of the node 0 in the original VDOM tree is modified, so that part of the attributes of the node 1, the node 2 and the node 3 are also modified correspondingly.

Therefore, although the VDOM can determine the changed nodes by comparing the original VDOM with the new VDOM tree and then correspondingly update the changed nodes in the interface, the node correspondence relationship between the original VDOM tree and the new VDOM tree needs to be sequentially confirmed according to the type of the nodes. If the types of the nodes in the original VDOM are different, the corresponding relationship of the nodes can be easily determined by comparing the node types. However, if most of the nodes in the original VDOM are of the same type, the corresponding relationship between the nodes needs to be determined in other ways, which may take much time and occupy more resources of the processor of the electronic device, and may cause an error in interface display due to a judgment error. Moreover, when the electronic device cannot accurately determine the corresponding relationship of the nodes, the nodes for which the corresponding relationship cannot be determined are re-rendered before the interface is displayed, which may generate overhead of API interface call, resulting in low efficiency of interface update.

In order to solve the problems that comparing the VDOM nodes takes much time, occupies more resources of a processor of the electronic device, and is prone to errors in judgment, the application provides an interface programming method based on the VDOM, data is defined as response data, wherein the response data binds corresponding execution functions in the definition, and when the data changes, the electronic device is triggered to execute the bound functions. According to the scheme, when certain attribute in the node uses the responsive data, the responsive data and the attribute for calculating the node are bound, so that the electronic equipment can automatically recalculate the attribute of the node as long as the responsive data is changed, and further, the electronic equipment can determine the node with the changed attribute to directly determine the node calling the responsive data through the binding relationship by determining which nodes are recalculated, so that the monitoring of the attribute change in the node is realized, and the modified node can be monitored through the change of the responsive data. Then, in the interface display, only the nodes with the changed attributes are re-rendered, and the nodes with the changed attributes do not need to be determined by comparing the original VDOM with the new VDOM.

In addition, each node is added with a display attribute for indicating whether the node is displayed or not, the value of the display attribute indicates whether the node is displayed in the interface or not, and the electronic equipment can determine whether the addition or deletion of the node exists or not according to the display attribute value and the component for indicating whether the node is displayed in the interface or not.

If the value of the display attribute indicates that the node is displayed, if the electronic device determines that the node is displayed in the previous interface display, it indicates that the display attribute of the node is not changed, and if the electronic device determines that the node is not displayed in the previous interface display, it indicates that the node is newly created, and the interface displays the component corresponding to the node. When the value of the display attribute indicates that the node is not displayed, if the electronic device determines that the node is not displayed in the previous interface display, it indicates that the display attribute of the node is not changed, and if the electronic device determines that the node is displayed in the previous interface display, it indicates that the node is deleted this time, the interface does not display the component corresponding to the node, and destroys the node and its child nodes.

Therefore, by the interface programming method provided by the application, the nodes with the changed attributes can be determined according to the response data, the deletion and the addition of the nodes can be determined through the values of the display attributes, and then the electronic equipment can acquire all the changed nodes and re-render the changed nodes in the interface. The nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and without the large overhead of the processor caused by comparing the VDOM trees. In addition, the method determines the changed nodes according to the binding relationship of the responsive data and the value of the display attribute, so that the problem of error comparison between the nodes of the original VDOM tree and the new VDOM tree is solved, and the efficiency of updating the interface is improved.

For example, as shown in fig. 3 (a), the VDOM tree has an attribute or value changed in node 1, and node 1 is denoted as node 8 after being changed. When the VDOM method is adopted, the corresponding relation of each node in the original VDOM tree and the new VDOM tree is compared, the node 1 in the original VDOM is determined to be changed into the node 8, and then the node 1 (the node 8) can be re-rendered. However, according to the interface programming method provided by the present application, as shown in fig. 3 (B), the type of the data called by the node 1 is determined as the responsive data, and when the data called by the node 1 changes, the electronic device can acquire that the node 1 is modified.

For another example, as shown in fig. 4 (a), the node 1 and its child nodes are deleted from the VDOM tree, and the child node 7 is newly created under the node 2. The electronic device compares the attributes of each node in the original VDOM tree and the new VDOM tree, and then determines that the node 1 is deleted, and creates a new node 7 under the node 2. However, with the method provided by the present application, the electronic device can know which nodes have been added and deleted by modifying the values of the display attributes of node 1 and node 2. For example, as shown in fig. 4 (B), the display attribute is denoted by vif, the default value of vif is true, that is, each node is defaulted to display the node and its child nodes, while the value of vif is false denotes that the node and its child nodes are not displayed, when the vif value of the node 1 becomes false, it denotes that the node is not displayed in the interface, that is, the node is not expanded, and the electronic device does not display the corresponding parts of the node 1 and its child nodes 5 and 6 in the interface rendering. And the electronic device detects that the vif value of the newly added node 7 is true, and the content of the node 7 can be correspondingly displayed in the interface display.

In some embodiments, the value of the display attribute defaults to displaying the node. When the value of the display attribute is that the node is not displayed, a virtual node is also reserved in the VDOM at the node, and only the node is not displayed in the interface rendering, and the attribute of the virtual node is that the node is not displayed, so that the electronic device can determine that the node and the component thereof are to be deleted according to the display attribute of the node and whether the component corresponding to the node is displayed in the interface.

The interface programming system provided by the present application is described below with reference to fig. 5. As shown in fig. 5, the interface programming system includes a componentized programming provided by a developer, a declarative engine for converting the componentized programming into a VDOM tree, wherein the declarative engine includes a component parsing module, a data change node locating module, a data add/delete node locating module, and a VDOM tree building module, and the system further includes a UI rendering module for generating a view, and the UI rendering module includes a visual DOM tree rendering module.

The developer can perform declarative UI development through componentized programming, then codes of the developer are loaded into a declarative engine, the declarative engine analyzes the codes written by the developer to generate a VDOM tree, then the VDOM tree can be converted into a visual node tree (a visual DOM tree) by a UI rendering module, and then an interface view is obtained through the visual DOM tree. Wherein, the data will be defined as responsive data in the componentized programming, a display attribute will be added to each node in the declarative engine, and the default value of the display attribute may be true, that is, the default node will be displayed.

When code for deleting, adding or modifying the node is provided in the componentized programming or an interface is obtained to be changed by user operation, the declarative engine positions the modified node through the positioning data change module, specifically determined by the binding relationship between the responsive data and the node. The declarative engine will also determine whether each node is to be expanded, i.e., whether each node will be displayed, by locating add-drop node modules, specifically by the value of the display attribute of the node. And then after the modified nodes are determined based on the positioning data change module and the positioning add-delete node module, a new visual DOM tree can be obtained, and then a new interface can be obtained through rendering by the UI rendering module according to the new visual DOM tree.

In some embodiments, the interface programming system can also be applied to command-type programming UI development, wherein the command-type programming UI development is that code for calling a corresponding interface is directly written, and the command-type programming code can correspond to a rendering tree. The method also needs to convert the imperative programming statements into declarative programming through attribution packaging. As shown in fig. 6, the apparatus further includes an attribution encapsulation module, which is configured to perform attribution encapsulation on the command type programming, so as to parse the rendering tree corresponding to the command type programming into a VDOM tree of the declarative engine, and the rest of the modules may refer to fig. 5 and the related description thereof, which are not repeated herein. For example, in imperative programming, the interface controlling the Text display content can be Text ui, settext (std:: string const & Text), and through attribution packaging, it can be abstracted to attributive control, i.e. the code corresponding to declarative programming is Text (Text = "…"), where ellipses are used to represent the concrete content of display. When the attribute text attribute is changed, the attribution package can automatically call the corresponding setText command, and the changed attribute is updated to the interface.

In other embodiments, the interface programming system can also be applied to the DOM model, and since the scheme does not involve the comparison between the new VDOM and the original VDOM, the interface programming system can be directly applied to the DOM model. As shown in FIG. 7, the parsed VDOM from the componentized programming can be directly used by the UI rendering module for rendering.

As described in detail below, the interface programming method provided in the present application may include the following steps, as shown in fig. 8:

s810: the components are loaded and the VDOM tree is built.

The electronic equipment acquires the components compiled by a developer through declarative programming, analyzes each component in a declarative engine, generates corresponding nodes in the VDOM by each component, and finally obtains a VDOM tree containing each node and the relationship between the nodes.

The component may receive data or attributes transmitted from the outside, for example, the component may be a button that can adjust the individual display based on the acquired user click operation. And the electronic device also creates a pre-creation event (before-creation) in the life cycle events for the components, wherein the life cycle refers to some key events from creation to destruction of one component, and the developer can freely select whether to perform corresponding business processing in the periods, and commonly used events comprise two events of "creation completed" (created) or "destruction completed" (destroyed).

S820: monitoring the data change of the nodes and determining the nodes with the data change.

The electronic equipment defines data used by the attribute of the node in assignment as responsive data, and then the node automatically establishes a binding relationship with the responsive data, when the responsive data changes, the electronic equipment can automatically recalculate the attribute of the node, and then the node with the changed attribute can be directly determined through the recalculated data, so that the monitoring of the attribute change in the node is realized. The electronic device can listen to the node with the modified attribute through the change of the responsive data.

For example, as shown in FIG. 9, line 2 and line 3 of FIG. 9 define both the string name and font size myFontSize as responsive data, and the component BUILD defines the display of the name (name) at the size of myFontSize on line 8 and the string name on line 9. Therefore, the component BUILD uses the responsive data string name and the value myFontSize, which will establish a binding relationship with the component BUILD. And a button capable of changing the value of the myFontSize is further defined in the component BUILD, when the button is pressed, the value of the myFontSize is changed, and the node corresponding to the component BUILD bound by the myFontSize belongs to the node with data change.

S830: and judging whether the added node or the deleted node exists according to the display attribute of the node.

The electronic device adds a display attribute to each node, and the electronic device determines whether there are newly added and deleted nodes according to the display attribute and whether the component is displayed in the interface. When the electronic device determines that the display attribute of the node indicates that the node will be displayed, and no component corresponding to the node is displayed in the interface, the node is the newly added node. When the electronic device determines that the display attribute of the node is that the node cannot be displayed, and a component corresponding to the node is displayed in the interface, the node is a deleted node.

When the electronic device needs to delete a node, the node is not directly deleted in the VDOM, but a virtual node is reserved, and the display attribute of the node is that the node is not displayed, so that the electronic device can determine that the node is to be deleted according to the display attribute of the node and whether an interface displays a component corresponding to the node. If the electronic device deletes the node directly, the electronic device cannot acquire the deleted node because the VDOM and the original VDOM cannot be compared by the method, and the component corresponding to the node is displayed in the interface all the time.

For example, in some implementations, adding specific code for display attributes to a node may refer to FIG. 10. Therein, referring to line 3 in fig. 10, a boolean variable showName is defined, which has a default value of true. Then, referring to line 7, the variable is added as a display attribute to the component BUILD, and a button is specified in lines 12 and 13, and when the button is clicked, the value of showName changes, thereby affecting the display of the contents defined in lines 8 and 9 of the code. When the button ' Toggle Name ' is pressed, the value of the showName is changed to false, and the ' Name: ' string Name ' will not be displayed.

In other embodiments, the code may also be written as shown in fig. 11, where, as shown in line 5 in fig. 11, whether to display the corresponding content is determined by an if statement. The writing mode can also define other functions by adding an else statement under the condition that other contents of the component need to be displayed.

S840: and rendering to obtain a new interface according to the nodes with the data change and the nodes with the addition and the deletion.

The electronic equipment obtains all updated nodes in the VDOM according to the nodes with data change and the nodes with data addition and deletion, then obtains the data of the nodes by calling the node APIs, and then renders the updated nodes in the interface.

In summary, according to the interface programming method provided by the application, a node with a changed attribute can be determined according to the response data, deletion and addition of the node can be determined by displaying the value of the attribute, and then the electronic device can acquire all the changed nodes and re-render the changed nodes in the interface. The nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and without the large overhead of the processor caused by comparing the VDOM trees. In addition, the method determines the changed nodes according to the binding relationship of the response data and the value of the display attribute, so that the problem of error comparison between the original VDOM tree and the new VDOM tree nodes is solved, and the efficiency of interface updating is improved.

In some embodiments, as shown in fig. 12, the interface programming method may include the steps of:

s1201: and loading the component.

The electronic device will first obtain the components that the developer has compiled through declarative programming, and then parse each component through a declarative engine.

S1202: component virtual nodes are created.

And the electronic equipment generates corresponding nodes in the VDOM by each component according to the analysis result of each component, and finally obtains a VDOM tree containing each node and the relationship between the nodes.

S1203: the receiving component passes data in.

The component may receive externally incoming data or attributes, for example, the component may be a button that can adjust individual displays based on the obtained user click operation.

S1204: a lifecycle is created for the node.

The electronic device may also create a pre-creation event (before) of the lifecycle events for the component.

It should be understood that, for the specific contents of the above steps S1201 to S1204, reference may also be made to the related description about step S810 in fig. 8, and details are not repeated here.

S1205: and monitoring data change.

The electronic equipment defines the data used by the attribute of the node in the assignment as responsive data, and then the node automatically establishes a binding relationship with the responsive data, and the electronic equipment monitors whether the responsive data changes.

S1206: and determining nodes with changed data.

When the electronic equipment monitors that the responsive data changes, the electronic equipment can determine the node calling the responsive data directly through the binding relationship between the node and the responsive data, and further realize the monitoring of the attribute change in the node. The electronic device can listen to the node with the modified attribute through the change of the responsive data.

S1207: and recalculating the nodes with changed data.

The electronic device will substitute the changed responsive data into the node to re-determine the node's attributes.

S1208: listening for node data usage is started.

The electronic equipment starts to monitor the node data for use when the node assigns the attribute, and ensures that data monitoring is only generated in the attribute assignment process.

S1209: and obtaining the node attribute assignment.

The electronic device will assign the changed data to the attributes of the node. The reason why the developer may change a plurality of data at the same time is that if the data is changed once, the node is operated once again, and a large overhead is generated. After asynchronous recalculation is used, a developer can process data needing to be changed, then calculate all the affected nodes at one time, and the interface can respond to a plurality of data changes of the developer only once.

S1210: and ending the data use of the listening node.

And after the electronic equipment correspondingly recalculates all the data needing to be changed in the attributes of the nodes, the use of the data of the monitoring nodes is finished. The calculated data is also used for the next data monitoring and for the current interface updating, that is, used in step S1205 and step S1220.

It should be understood that the detailed contents of the above steps S1205 to S1207 may refer to the related description of step S820 in fig. 8, and are not repeated herein.

S1211: it is determined whether to display the component corresponding to the node.

The electronic equipment adds a display attribute to each node, and the electronic equipment determines whether to display the component corresponding to the node according to the display attribute. When the display attribute indicates that the component corresponding to the node is not displayed, i.e., the node is not expanded, step S1212 is executed. When the display attribute indicates that the component corresponding to the node is displayed, i.e., the node is expanded, step S1216 will be performed.

For example, if "vif = true", it indicates that the node needs to be expanded, that is, the node is displayed, and step S1216 is executed. When "vif = false", it indicates that the node is not expanded, that is, the node is not displayed in the interface, that is, step S1212 is performed.

S1212: it is determined whether the non-displayed component is already displayed in the interface.

The electronic device will first determine whether nodes that will not be expanded, i.e., components that are not displayed, have a display in the last rendered interface. When the component which is not displayed in the interface, the node is not expanded last time, namely the component is not displayed in the previous interface rendering, and the node is considered not to update the display attribute. When the component that is not displayed has been displayed in the previous interface rendering, indicating that the node has been expanded last time, and the component also has been displayed in the interface, the node is considered to have updated the display attribute, and step S1213 is executed.

S1213: and destroying the visual nodes.

When the electronic device determines that the node which is not expanded has been expanded last time, that is, the component is displayed in the last interface, the electronic device deletes the visible node corresponding to the node on the interface first, and the virtual node can be retained in the VDOM.

S1214: and destroying the descendant node of the node.

Since the node is deleted, the descendant nodes under the node are also deleted.

S1215: ending the node's lifecycle.

Meanwhile, the electronic device will generate a lifecycle event "deleted" during the lifecycle of the node.

S1216: it is determined whether the component to be displayed is already displayed in the interface.

When the electronic device determines that the node needs to be expanded, that is, a visible node is generated, the electronic device also confirms whether the node is displayed in the previous interface. If there is already a display, the display attribute of the node is not changed, step S1220 is executed directly: and displaying the node content according to the node attribute value. If the node is not displayed in the last interface, the node is newly added.

S1217: a visible node is created.

The electronic device correspondingly creates a visual node corresponding to the node, and the visual node is a node displayed in the interface.

S1218: and loading the virtual child node.

After the electronic device creates the visual node, the child node of the node is also added to the VDOM, and the like.

S1219: a lifecycle is created for the node.

When all nodes are loaded, the electronic device will also generate a component lifecycle event "created".

It should be understood that the detailed contents of the steps S1211 to S1219 may also refer to the related description of the step S830 in fig. 8, and are not repeated herein.

S1220: and displaying the node content according to the node attribute value.

The electronic equipment obtains all updated nodes in the VDOM according to the nodes with data changes and the nodes with data addition and deletion, then obtains the data of the nodes by calling the node APIs, and then renders the updated nodes in the interface.

It should be understood that, for the specific content of the step S1220, reference may also be made to the related description about the step S840 in fig. 8, and details are not repeated here.

In summary, according to the interface programming method provided by the application, a node with a changed attribute can be determined according to the response data, deletion and addition of the node can be determined by displaying the value of the attribute, and then the electronic device can acquire all the changed nodes and re-render the changed nodes in the interface. The nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and without the large overhead of the processor caused by comparing the VDOM trees. In addition, the method determines the changed nodes according to the binding relationship of the responsive data and the value of the display attribute, so that the problem of error comparison between the nodes of the original VDOM tree and the new VDOM tree is solved, and the efficiency of updating the interface is improved.

As shown in fig. 13, fig. 13 exemplarily shows a case where the interface programming method monitors the node data change to monitor the node data change, and then updates to the view, and performs the performance test with the method of the original VDOM model to obtain the test result in fig. 13, where the time for the interface programming method to trigger the interface data change event (e.g., emit) is 0.073 ms, and the time for recalculating the value of the current node and updating the interface (e.g., rebind, set nodevalue) operation takes 0.093 ms, that is, it takes 0.166 ms. While the events and other operations (such as incoker, callwithasynchandling) for triggering the interface data change by the original VDOM model take 0.78 ms, and the operations (such as run) for comparing the VDOM tree and updating the interface take 0.88 ms, i.e. take 1.66 ms. That is, the present application improves the efficiency of interface update.

The following describes in detail the view expansion and contraction caused by the display attribute change with reference to fig. 14, that is, the above step S830 and steps S1211 to S1219, wherein the view expansion corresponds to the node expansion and displays the component corresponding to the node, and the view contraction corresponds to the node destruction and does not display the component corresponding to the node. The display attribute is vif, the default of vif is true, and vif is changed into false.

S1401: an interface view is created. The electronic device first defines a view according to creating a view application.

S1402: a root component is constructed. A root component is defined in the view, and the root component is used for mounting the component.

S1403: a component is created. After the components are created, the data related to the attribute can be bound by the corresponding node of each component, wherein because the data is defined as responsive data, a binding relationship can be established between the node and the data.

S1404: and judging whether the value of vif is true. The default of vif is true, which means that the component is displayed, and the modified vif is false, which means that the component is not displayed. When the value of vif is true, step S1407 is executed: and constructing child nodes one by one. When the value of vif is false, step S1405 is executed: it is determined whether a node has created a visible node.

S1405: it is determined whether a node has created a visible node. The electronic device will first determine whether nodes that will not be expanded, i.e., components that are not displayed, have a display in the last rendered interface. When the node has created a visible node, step S1406 is executed: and destroying all descendant visible nodes.

S1406: and destroying all the descendant visible nodes. When the electronic device determines that the node which is not expanded has been expanded last time, that is, the component is displayed in the last interface, the electronic device deletes the visible node corresponding to the node on the interface first, and the virtual node can be retained in the VDOM.

S1407: and constructing child nodes one by one. When the value of vif is true, indicating that the component is to be unfolded, the electronic device will build the child nodes under the component one by one.

S1408: and judging whether the child node is a component. When the child node is also a component, the processing is performed in the manner of creation of the component, that is, step S1403 and the subsequent operations thereof are performed, and when the child node is not a component, step S1409 is performed: and judging whether the value of the vif of the child node is true.

S1409: and judging whether the value of the vif of the child node is true. When vif of the child node is true, then step S1410 is executed: and updating the visual nodes. When vif of the child node is false, step S1411 is executed: it is determined whether a child node has created a visible node.

S1410: and updating the visual nodes. And assigning values to the nodes according to the data changes, and updating the nodes in the interface.

S1411: it is determined whether a child node has created a visible node. The electronic device will first determine whether the child node has been displayed in the last rendered interface. When the child node has created a visible node, step S1412 is executed: and destroying the child visual node.

S1412: and destroying the child visual node. When the electronic device determines that the child node is expanded last time, that is, the node is displayed in the last interface, the electronic device deletes the visible node corresponding to the node on the interface first, and the virtual node may be retained in the VDOM.

The expansion and contraction of the view caused by the above-described change in the display properties is exemplified below.

As shown in FIG. 15, FIG. 15 illustrates view-telescoping code for a child component contained in a parent component. In which, in line 3 of FIG. 15, a display attribute showSub is defined and added to the parent component's name ("hello world"). The parent component also defines a button Toggle, which can change the value of showSub. The sub-component defines the display size of the parent component name ("hello world") and defines the button "+ FontSize" that can change the font size.

Therefore, as shown in fig. 16, the VDOM tree of the above codes has a default value of true, and the SubComp node expands to expand corresponding to the view, i.e. displaying "hello world", button + FontSize, and button Toggle Sub. After the button Toggle Sub is clicked, the value of SubComp becomes false, the SubComp node does not expand, and only the button Toggle Sub is displayed corresponding to the view contraction. After clicking the button Toggle again, the value of SubComp changes back to true, and the SubComp node expands to correspond to the view expansion, i.e., the display "hello world", button + FontSize, and button Toggle are displayed again.

Therefore, by the interface programming method provided by the application, the deletion and the addition of the nodes can be determined through the values of the display attributes, and then the electronic equipment can acquire the changed nodes and re-render the changed nodes in the interface. The nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and without the large overhead of the processor caused by comparing the VDOM trees. In addition, the method determines the changed nodes according to the binding relationship of the response data and the value of the display attribute, so that the problem of error comparison between the original VDOM tree and the new VDOM tree nodes is solved, and the efficiency of interface updating is improved.

In order to solve the problems that comparing VDOM nodes takes much time, occupies more resources of a processor of an electronic device, and is prone to error determination, the present application provides an interface programming apparatus 1700 based on VDOM, which includes a display unit 1710, an obtaining unit 1720, and a determining unit 1730.

A display unit 1710 is configured to display a first page, where the first page includes a plurality of components, each of the plurality of components corresponds to at least one node, and each node has a respective attribute value; the obtaining unit 1720 is configured to obtain an interface update request, and the determining unit 1730 is configured to determine a node where a first page attribute value changes; the display unit 1710 is further configured to update the node with the changed attribute value, so as to obtain a second page.

In some embodiments, the attribute of the node includes a display attribute indicating whether to display the first component corresponding to the node.

In other embodiments, the determining unit 1730 is further configured to determine a node having a display attribute that does not correspond to the first page, where the determining the display attribute that does not correspond to the first page includes: the display attribute indicates that the first component is displayed and the first component is not displayed in the first page; alternatively, the display attribute indicates that the first component is not displayed and the first component is displayed in the first page.

In other embodiments, the determining unit 1730 is further configured to determine a node where the first attribute is changed, where the first attribute is determined according to a first variable, and the first variable is associated with the calculation of the first attribute.

In other embodiments, the determining unit 1730 is further configured to automatically recalculate the first attribute of the node based on the change of the first attribute in the node; the determining unit 1730 is further configured to display the first component based on the display attribute indication, and according to the node after recalculating the first attribute, the displaying unit 1710 is further configured to display the component corresponding to the node in the second page.

In other embodiments, the determining unit 1730 is further configured to create a visual node tree according to attributes of a plurality of nodes, where the visual node tree includes a plurality of visual nodes, and each visual node in the plurality of visual nodes corresponds to one node; the display unit 1710 is further configured to display the first page according to the plurality of visual nodes.

In other embodiments, the display unit 1710 is further configured to maintain display of the first component in the second view based on the first page having displayed the first component; the display unit 1710 is further configured to create a visual node corresponding to the node in the visual node tree based on the first page not displaying the first component, and display the first component in the second page according to the visual node.

In other embodiments, in the event that the display attribute indicates that the first component is not displayed, the display unit 1710 is further configured to maintain display of the first page in the second page based on the first page not displaying the first component; the display unit 1710 is further configured to display the first component based on the first page, delete a visual node corresponding to the node in the visual node tree, and not display the first component in the second page.

In other embodiments, in the case where the first node has a child node and the display attribute indicates that the first component is displayed, the method further comprises: the determining unit 1730 is further configured to determine whether to display the first component corresponding to the child node based on the display attribute of the child node; the display unit 1710 is further configured to indicate to display a second component corresponding to the child node based on the display attribute of the child node and the first page does not display the first component, create a visual node corresponding to the first node and the child node in the visual node tree, and display the first component and the second component in the second page according to the first visual node.

In other embodiments, in a case that the first node has a child node and the display attribute indicates that the first component is not displayed, the display unit 1710 is further configured to maintain the display of the first page in the second page based on that the first component is not displayed on the first page and a second component corresponding to the child node; the display unit 1710 is further configured to display the first component and the second component based on the first page, delete a visual node corresponding to the first node and the second node in the visual node tree, and not display the first component and the second component in the second page.

Therefore, the interface programming device provided by the application can determine the nodes with the changed attributes according to the response data, can determine the deletion and the addition of the nodes by displaying the values of the attributes, and further the electronic equipment can acquire all the changed nodes and then re-render the changed nodes in the interface. The nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and without the large overhead of the processor caused by comparing the VDOM trees. In addition, the method determines the changed nodes according to the binding relationship of the response data and the value of the display attribute, so that the problem of error comparison between the original VDOM tree and the new VDOM tree nodes is solved, and the efficiency of interface updating is improved.

The method of the embodiments of the present application is described above in detail, and in order to better implement the above-mentioned aspects of the embodiments of the present application, the following also provides related apparatuses for implementing the above-mentioned aspects.

Fig. 18 is a schematic structural diagram of a computing device 1800 provided in the present application, where the computing device 1800 may be the interface programming device 800 in the foregoing. As shown in fig. 18, computing device 1800 includes: a processor 1810, a communication interface 1820, and a memory 1830. The processor 1810, the communication interface 1820, and the memory 1830 may be connected to each other via an internal bus 1840, or may communicate with each other via other means such as wireless transmission. In the embodiment of the application, for example, the bus 1840 is connected, and the bus 1840 may be a peripheral component interconnect Express (PCIe) bus, or an Enhanced Industry Standard Architecture (EISA) bus, a unified bus (UBs or UBs), a computer Express link (CXL), a cache coherent interconnect protocol (CCIX), or the like. The bus 1840 may be divided into an address bus, a data bus, a control bus, and the like. The bus 1840 may include a power bus, a control bus, a status signal bus, and the like, in addition to a data bus. But for clarity of illustration the various busses are labeled in the drawings as busses 1840.

The processor 1810 may be formed of at least one general-purpose processor, such as a Central Processing Unit (CPU), or a combination of a CPU and a hardware chip. The hardware chip may be an Application-Specific Integrated Circuit (ASIC), a Programmable Logic Device (PLD), or a combination thereof. The PLD may be a Complex Programmable Logic Device (CPLD), a Field-Programmable Gate Array (FPGA), general Array Logic (GAL), or any combination thereof. Processor 1810 executes various types of digitally stored instructions, such as software or firmware programs stored in memory 1830, which enable computing device 1800 to provide a variety of services.

The memory 1830 is used for storing program codes and is controlled by the processor 1810 to execute the processing steps of the interface programming method in the above embodiments. One or more software modules may be included in the program code, and may be the software modules provided in the embodiment of fig. 17.

It should be noted that the present embodiment may be implemented by a general physical server, for example, an ARM server or an X86 server, or may also be implemented by a virtual machine implemented based on the general physical server and combining with the NFV technology, where the virtual machine refers to a complete computer system that has a complete hardware system function and runs in a completely isolated environment through software simulation, and the present application is not limited in particular.

The memory 1830 may include volatile memory (volatile memory), such as Random Access Memory (RAM); the memory 1830 may also include a non-volatile memory (non-volatile memory), such as a read-only memory (ROM), a flash memory (flash memory), a Hard Disk Drive (HDD), or a solid-state drive (SSD); the memory 1830 may also include a combination of the above categories. The memory 1830 may store program codes, and specifically executes the steps S810 to S840 and optional steps thereof in the embodiment in fig. 8, or executes the steps S1201 to S1220 and optional steps thereof in the embodiment in fig. 12, which are not described herein again.

The communication interface 1820 may be a wired interface (e.g., an ethernet interface), may be an internal interface (e.g., a peripheral component interconnect express (PCIe) bus interface), a wired interface (e.g., an ethernet interface), or a wireless interface (e.g., a cellular network interface or using a wireless local area network interface) for communicating with other devices or modules.

It should be noted that fig. 18 is only one possible implementation manner of the embodiment of the present application, and in practical applications, the computing device 1800 may also include more or less components, which is not limited herein. For the content that is not shown or described in the embodiment of the present application, reference may be made to the related explanation in the foregoing embodiment of fig. 8 or fig. 12, which is not described herein again.

It should be understood that the computing device shown in fig. 18 may also be a computer cluster of at least one server, and the application is not particularly limited.

Embodiments of the present application also provide a computer-readable storage medium, in which instructions are stored, and when the computer-readable storage medium is executed on a processor, the method flow shown in fig. 8 or fig. 12 is implemented.

Embodiments of the present application also provide a computer program product, and when the computer program product is run on a processor, the method flow shown in fig. 8 or fig. 12 is implemented.

The above embodiments may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, the above-described embodiments may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded or executed on a computer, the procedures or functions according to the embodiments of the present invention are wholly or partially generated. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in or transmitted from a computer-readable storage medium to another computer-readable storage medium, e.g., from one website, computer, server, or data center, over a wired (e.g., coaxial cable, fiber optic, digital Subscriber Line (DSL), or wireless (e.g., infrared, wireless, microwave, etc.) network, to another website, computer, server, or data center.

While the invention has been described with reference to specific embodiments, the invention is not limited thereto, and various equivalent modifications and substitutions can be easily made by those skilled in the art within the technical scope of the invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims (12)

1. An interface programming method applied to electronic equipment is characterized by comprising the following steps:

displaying a first page, wherein the first page comprises a plurality of components, each component in the plurality of components corresponds to at least one node, and each node has a respective attribute value;

acquiring an interface updating request, and determining a node of which the first page attribute value changes;

and updating the nodes with the changed attribute values to obtain a second page.

2. The method of claim 1, wherein the attribute of the node comprises a display attribute indicating whether to display the first component corresponding to the node.

3. The method of claim 2, wherein said determining the node at which the value of the first page attribute changes comprises:

determining a node where the display attribute does not correspond to the first page, wherein the determining that the display attribute does not correspond to the first page comprises: the display attribute indicates that the first component is displayed and the first component is not displayed in the first page; alternatively, the display attribute indicates that the first component is not displayed and the first component is displayed in the first page.

4. The method according to claim 3, wherein said determining the node where the value of the first page attribute changes comprises:

and determining a node with a changed first attribute, wherein the first attribute is determined according to a first variable, and the first variable is related to the calculation of the first attribute.

5. The method of any of claim 4, further comprising:

automatically recalculating the first attribute of the node based on the change of the first attribute in the node;

the updating the node with the changed attribute value to obtain a second page includes: and displaying the first component based on the display attribute indication, and displaying the component corresponding to the node in the second page according to the node after recalculating the first attribute.

6. The method of claim 5, wherein displaying the first page comprises:

creating a visual node tree according to the attributes of the plurality of nodes, wherein the visual node tree comprises a plurality of visual nodes, and each visual node in the plurality of visual nodes corresponds to one node;

and displaying the first page according to the plurality of visual nodes.

7. The method of claim 6, wherein if the display attribute indicates that the first component is displayed, the method further comprises:

based on the first page having displayed the first component, maintaining display of the first component in the second view;

based on the fact that the first component is not displayed on the first page, a visual node corresponding to the node is created in the visual node tree, and the first component is displayed in the second page according to the visual node.

8. The method of claim 6, wherein in the event that the display attribute indicates that the first component is not to be displayed, the method further comprises:

maintaining display of the first page in the second page based on the first page not displaying the first component;

and displaying the first assembly on the basis of the first page, deleting the visual node corresponding to the node in the visual node tree, and not displaying the first assembly in the second page.

9. The method of claim 7, wherein the first node has a child node, and wherein the display attribute indicates that the first component is displayed, the method further comprising:

determining whether to display a first component corresponding to the child node based on the display attribute of the child node;

and based on the fact that the first component is not displayed on the first page and the display attribute of the child node indicates that a second component corresponding to the child node is displayed, creating visual nodes corresponding to the first node and the child node in the visual node tree, and displaying the first component and the second component in the second page according to the first visual node.

10. The method of claim 8, wherein the first node has a child node and the display attribute indicates that the first component is not displayed, the method further comprising:

based on the first page not displaying the first component and a second component corresponding to the child node, keeping the display of the first page in the second page;

and displaying the first component and the second component based on the first page, deleting the visual nodes corresponding to the first node and the second node in the visual node tree, and not displaying the first component and the second component in the second page.

11. A computing system comprising a processor and a memory, the memory for storing instructions, the processor for executing the instructions, the processor when executing the instructions performing the method of any of claims 1 to 10.

12. A computer program product, characterized in that the computer program product comprises computer instructions which, when executed by a computing device, the computing device performs the method according to any one of claims 1 to 10.

Images