CN115586897A - An interface programming method, device and related equipment - Google Patents

Abstract

The application is applied in the field of computer technology, and provides an interface programming method, device and related equipment, wherein the method includes: displaying a first page, wherein the first page includes a plurality of components, and each component in the plurality of components corresponds to at least one Each node has its own attribute value; the interface update request is obtained, and the node whose attribute value changes on the first page is determined; the node whose attribute value changes is updated to obtain the second page. In this way, through the interface programming method provided by the present application, according to the nodes with attribute changes, only the nodes whose attributes change can be updated in the interface update, without updating the entire interface, which improves the interface rendering efficiency.

Description

An interface programming method, device and related equipment

technical field

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

Background technique

In interface development, the data in the interface is usually processed with a document object model (document object model, DOM), through which an interface can be represented as a DOM tree, and each node of the tree represents a label or The text item in the label, the structure of the DOM tree can describe the interrelationship between the various labels in the interface. The electronic device can display the corresponding interface by rendering the DOM tree.

However, every time interface data is modified, DOM nodes will be changed, and the electronic device will re-render the entire interface at this time, so that the content of the interface is consistent with the content of the updated DOM. However, every time the electronic device renders the entire interface, it will sequentially call APIs corresponding to each node in the DOM tree, resulting in frequent interaction between the interface and the DOM, resulting in relatively large overhead.

In order to reduce the calls of the DOM interface, in some methods, when the interface is updated, a virtual DOM (virtual DOM, VDOM) tree will be parsed out according to the current interface data, and then when the interface data changes, the changed The interface data is parsed into a new VDOM tree, and then the two VDOM trees are compared to determine the newly added, modified or deleted nodes, and then only the API of the above modified node is called to update the node in the interface. content.

However, in the process of comparing the previous VDOM tree and the current VDOM tree, it is necessary to confirm the corresponding relationship of the nodes through the types of nodes in the previous VDOM tree and the current VDOM tree, and then confirm the changed nodes. The comparison process will take a long time, occupy more resources of the processor, and make the interface updating efficiency lower.

Contents of the invention

The present application provides an interface programming method, device and related equipment. Nodes with attribute changes can be determined through responsive data, and the deletion and addition of nodes can be determined by displaying attribute values, so that electronic equipment can obtain all changed nodes. , and then re-render the changed nodes in the interface, which improves the efficiency of interface update. .

In a first aspect, an interface programming method is provided, which is applied to an electronic device, including: displaying a first page, wherein the first page includes a plurality of components, and each component in the plurality of components corresponds to at least one node, and each node has its own attribute value; obtain the interface update request, and determine the node whose attribute value changes on the first page; update the node whose attribute value changes to obtain the second page.

In the above solution, the interface is composed of multiple components, each component corresponds to a node, and all nodes need to be traversed when the interface is displayed. Through the interface programming method provided by the present application, according to the nodes with attribute changes, only the nodes whose attributes change can be updated in the interface update without updating the entire interface, which improves the interface rendering efficiency.

With reference to the first aspect, in some implementation manners, 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 solution, by adding a display attribute to the node, it is marked whether the node is displayed, and the value of the display attribute indicates whether the node is displayed in the interface, and then the electronic device can display the node according to the value of the display attribute and the interface. The component determines if there are additions or deletions of nodes. There is no need for electronic devices to compare the stored original VDOM tree with the new VDOM tree to determine the newly added, modified or deleted nodes, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree.

In combination with the first aspect, in some implementations, it also includes determining that the display attribute does not correspond to the first page node, wherein the display attribute does not correspond to the first page includes: the display attribute indicates that the first component is displayed and the first page The first component is not displayed; or, the display attribute indicates that the first component is not displayed and the first component is displayed on the first page.

In the above solution, when the display attribute indicates that the node is displayed, but the interface does not display the component, it means that the node is newly added; 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. Furthermore, the electronic device can determine whether there is addition or deletion of nodes according to the display attribute value and whether the interface displays the component of the node. There is no need for electronic devices to compare the stored original VDOM tree with the new VDOM tree to determine the newly added or deleted nodes, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree.

With reference to the first aspect, in some implementation manners, the method further includes determining a node whose 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 solution, the data is defined as responsive data, wherein the responsive data is bound to a corresponding execution function in the definition, and when the data changes, the electronic device will be triggered to execute the bound function.

In combination with the first aspect, in some implementations, it also includes automatically recalculating the first attribute of the node based on the change of the first attribute in the node; updating the node whose attribute value has changed to obtain the second page, including: based on The display attribute indicates to display the first component, and according to the node after recalculating the first attribute, the component corresponding to the node is displayed on the second page.

In the above solution, when a certain property in a node uses the responsive data, the responsive data is bound to the calculated property of the node, so as long as the responsive data changes, the electronic device will automatically The properties of the nodes are recalculated, and then the electronic device can determine which nodes have been recalculated to determine the nodes whose properties have changed and directly determine the nodes that call the responsive data through the binding relationship, thereby realizing the control of property changes in the nodes. Monitoring, the modified nodes can be monitored through changes in responsive data. There is no need for electronic devices to compare the stored original VDOM tree with the new VDOM tree to determine nodes with changed attributes, which saves processor overhead.

In combination with the first aspect, in some implementations, it also includes, according to the attributes of multiple nodes, creating a visual node tree, where the visual node tree includes multiple visual nodes, and each visual node in the multiple visual nodes All correspond to a node; according to multiple visible nodes, the first page is displayed.

In the above scheme, the process of displaying the interface is specifically to generate visible nodes according to the attributes of the nodes, and then render the interface according to the visible nodes.

In combination with the first aspect, in some implementations, it also includes, based on the first component being displayed on the first page, maintaining the display of the first component in the second view; based on the first page not displaying the first component, in the visible node A visible node corresponding to the node is created in the tree, and the first component is displayed on the second page according to the visible 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 was displayed in the last interface display, it means that the display attribute of the node has not changed. If the node is not displayed in the display, it means that the node is newly created, and the visible node of the node will be generated, and then the interface will display the corresponding components of the node. Furthermore, the electronic device can determine whether there is addition or deletion of nodes according to the display attribute value and whether the interface displays the component of the node. There is no need for electronic devices to compare the stored original VDOM tree with the new VDOM tree to determine the newly added or deleted nodes, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree.

With reference to the first aspect, in some implementations, when the display attribute indicates that the first component is not displayed, the method further includes: maintaining the display of the first page on the second page based on the fact that the first component is not displayed on the first page; The first page displays the first component, deletes the visible node corresponding to the node in the visible node tree, and does not display the first component on the second page.

In the above solution, when the value of the display attribute indicates that the node is not displayed, if the electronic device determines that the node was not displayed in the last interface display, it means that the display attribute of the node has not changed. If the node is displayed in the interface display, it means that the node is deleted this time, the interface will not display the corresponding component of the node, and the node and its sub-nodes will be destroyed. Furthermore, the electronic device can determine whether there is addition or deletion of nodes according to the display attribute value and whether the interface displays the component of the node. There is no need for electronic devices to compare the stored original VDOM tree with the new VDOM tree to determine the newly added or deleted nodes, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree.

In conjunction with the first aspect, in some implementations, when the first node has child nodes, and the display attribute indicates that the first component is displayed, the method further includes: based on the display attribute of the child node, determining whether to display the first component corresponding to the child node ;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 the second component corresponding to the child node is displayed, the first node and the visible node corresponding to the child node are created in the visual node tree, and according to the first visual The node displays the first component and the second component in the second page.

In the above solution, if the node also has child nodes, if the node is to be displayed, it is also determined whether to display the child node according to the display attribute of the child node. When the display attribute of the node indicates to display the first component, and the display attribute of the child node indicates not to display the second component, only the component corresponding to the first node can be used. Only 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 can the child node and the corresponding component of the first node be displayed at the same time.

In combination with the first aspect, in some implementations, when the first node has child nodes, and the display attribute indicates that the first component is not displayed, the method further includes: not displaying the first component and the second component corresponding to the child node based on the first page , keep the display of the first page in the second page; based on the display of the first component and the second component on the first page, delete the visible nodes corresponding to the first node and the second node in the visible node tree, and The first component and the second component are not displayed on the second page.

In the above solution, if the first node will not be displayed, the child nodes of the first node will also not be displayed. Correspondingly, the node and the visible nodes of the child nodes will be deleted together in the visible node tree.

In a second aspect, the present application provides a computing device, which is characterized in that it includes a processor and a memory, the memory is used to store instructions, and the processor is used to execute the instructions. When the processor executes the instructions, the execution is as described in the first aspect. Methods.

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 run on a computing device, the method described in the first aspect is executed.

In a fourth aspect, the present application provides a computer program product, which is characterized in that the computer program product includes computer instructions, and when executed by a computing device, the computing device executes the method described in the first aspect.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings that need to be used in the description of the embodiments.

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

Fig. 2 is a schematic diagram of a VDOM model comparison node provided by the embodiment of the present application;

Fig. 3 is a kind of VDOM model provided by the embodiment of the present application and the interface programming method determine the comparative schematic diagram of the node that property has changed;

Fig. 4 is a kind of VDOM model provided by the embodiment of the present application and the interface programming method determine that there is a comparative schematic diagram of adding and deleting nodes;

Fig. 5 is a schematic structural diagram of an interface programming system provided by an embodiment of the present application;

Fig. 6 is a schematic diagram of an interface programming system provided by an embodiment of the present application applied to imperative programming;

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

Fig. 8 is a schematic flowchart of an interface programming method provided by an embodiment of the present application;

Fig. 9 is a schematic diagram of codes for determining nodes with data changes in an interface programming method provided by an embodiment of the present application;

Fig. 10 is a schematic diagram of the code for determining to add or delete nodes in an interface programming method provided by the embodiment of the present application;

Fig. 11 is a schematic diagram of the code for determining to add or delete nodes in another interface programming method provided by the embodiment of the present application;

Fig. 12 is a schematic flowchart of another interface programming method provided by the embodiment of the present application;

Fig. 13 is a schematic diagram of performance comparison between a VDOM model and an interface programming method provided by the embodiment of the present application;

Fig. 14 is a schematic flowchart of a view scaling method in an interface programming method provided by an embodiment of the present application;

Fig. 15 is a schematic diagram of codes for view expansion and contraction in an interface programming method provided by an embodiment of the present application;

Fig. 16 is a schematic diagram of view expansion and contraction in an interface programming method provided by an embodiment of the present application;

Fig. 17 is a schematic diagram of an interface programming device provided by an embodiment of the present application;

FIG. 18 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.

detailed description

Illustrative embodiments of the present application include, but are not limited to, interface programming methods, devices, products, and media.

First, the related technologies of interface development involved in the embodiment of the present application are introduced.

In software development, there are two modes of imperative programming and declarative programming. Among them, imperative programming is usually used to command electronic equipment to perform certain operations in a specific order, and electronic equipment traverses the code line by line to update corresponding variables. The declarative programming language is used to directly declare the goal to the electronic device, and let the electronic device decide how to complete the goal according to the instructions encapsulated in the program library. That is to say, imperative programming is used to instruct electronic equipment how to do it, no matter what the purpose of the instruction is, the electronic equipment will follow the instruction. Declarative programming is to tell the electronic device what it wants, and let the electronic device decide how to achieve it.

The above imperative programming and declarative programming can also be used in software user interface (user interface, UI) development. Imperative UI development mainly changes the content of the interface by writing instructions to call APIs, while declarative UI development mainly changes the content of the interface by writing the properties of components in the interface. Compared with imperative UI development, declarative UI development can describe interface content through a more intuitive and vivid programming language, which can reduce the amount of code and make declarative UI development more efficient. For example, SwiftUI, VUE, Angular and extensibility TypeScript (expansibility TS, eTS) use declarative programming for UI development.

In UI development, the data in the interface is usually processed through the Document Object Model (DOM), through which an interface can be represented as a DOM tree, and each node of the tree represents a label in the interface Or the text items in the tags, the structure of the DOM tree can describe the interrelationship between the tags in the interface.

For example, hypertext markup language (hyper text markup language, HTML) or extensible markup language (extensible markup language, XML) in interface development belongs to DOM. For example, HTML tags can be divided into five categories according to their functions, including tags describing titles and page summary information: such as title <title>, subject <body>, etc., tags describing web page layout: such as <table>, < tr>, <td>, <p>, <div>, etc., tags describing the display characteristics: such as <b>, <I>, <strong>, <h1>-<h6>, etc., used to represent the interface between Hyperlink-related tags for content-related information, and other tags, such as <img> for setting images. Attributes such as category of HTML tags, number of non-link texts (wordNum), number of hyperlinks (linkNum), attribute set (attribution) and influence factor (influence) can be stored in the DOM node.

The process of converting an HTML or XML document into a DOM tree by an electronic device is called parsing, and the HTML or XML document will be converted into a DOM tree after being parsed. Furthermore, developers can delete and add nodes in the DOM tree, as well as access and modify node content, by modifying HTML or XML documents. The electronic device can obtain the content of each node by calling an application programming interface (application programming interface, API) corresponding to each node in the DOM tree, and present an interface by rendering the content of the node in the DOM tree.

The following is an example of using declarative programming to modify a node in the DOM. As shown in Figure 1, it exemplarily shows the code of declarative programming. The code in Figure 1 defines the horizontally arranged text "Number:\( value)" and the button "+", as well as the definition of the text "bottom", the button "-", etc. For details, please refer to the comments in the code in Figure 1, which will not be repeated here. The organizational structure of the above code can be called a component. The component corresponds to a node in the DOM. The attribute data of the component is defined in the component. The component view is composed and bound to the component data. As shown in Figure 1, the value is the attribute data. If the value of value changes, it will cause the recalculation of the body component, which will cause another node in the DOM tree to change, so that a DOM tree will be re-parsed.

However, every time the interface data is modified, the DOM nodes will change, and the electronic device will re-render the entire interface, so that the content of the interface is consistent with the content of the updated DOM. However, every time the electronic device renders the entire interface, it will sequentially call the API corresponding to each node in the DOM tree, and there will be frequent interaction between the interface and the DOM, which will generate a large overhead and make the interface update efficiency low. .

In order to reduce the calls of DOM interfaces and improve the efficiency of interface updates, in some embodiments, a virtual DOM (virtual DOM, VDOM) model is provided. By storing the original VDOM tree of the interface, there are modified HTML or XML documents. At this time, a new VDOM tree will be parsed first, and then the stored original VDOM tree will be compared with the new VDOM tree to determine the newly added, modified or deleted nodes, and then only the API of the above-mentioned modified nodes will be called to update the VDOM tree. The content of the node in the interface. In this way, the interface can be updated only by calling the API of the modified node, which reduces the overhead of calling the API interface and improves the efficiency of the interface update.

Therefore, in interface development, in order to reduce the amount of code and improve development efficiency, developers usually use declarative programming. In order to reduce the overhead of API calls brought by interface updates and improve the efficiency of interface updates, developers usually choose the VDOM model.

The following describes the VDOM update interface with an example. As shown in Figure 2, it exemplarily shows the original VDOM tree saved by the electronic device before the interface is updated, wherein node 0 has three child nodes: node 1, node 2, and node 3, and node 1 has child nodes: node 5 and node 6.

After the user operation is acquired on the interface, or the developer changes the interface data through the programming code, a virtual DOM tree (VDOM tree) can be parsed out through the changed data. For example, in the VDOM tree, node 7 has child nodes as Nodes 8 and 9 have child node a, node 8 has child node b, and node 9 has child node c.

The VDOM model will first determine the direct correspondence of the nodes, and then determine whether the nodes have been modified, deleted or added, and then compare the difference between the original VDOM tree and the VDOM tree. Specifically, the electronic device determines the corresponding relationship between the original VDOM tree and the nodes between the VDOM tree through the type of node, node attribute, node creation order, and node position. For example, node 8 of the VDOM tree in FIG. 2 corresponds to the node of the original VDOM 1. Node b of the VDOM tree corresponds to node 6 of the original VDOM and so on. Furthermore, it can be determined that node 5 in the original VDOM is deleted, node c is newly created, and the attributes of node 0 in the original VDOM tree are modified, so that some attributes of nodes 1, 2 and 3 are also affected and modified accordingly.

It can be seen that although the VDOM can determine the changed nodes by comparing the original VDOM and the new VDOM tree, and then update the changed nodes in the interface, the nodes in the original VDOM tree and the new VDOM tree The corresponding relationship needs to be confirmed sequentially through the type of the node and so on. If the types of each node in the original VDOM are mostly different, it is easy to determine the corresponding relationship of the nodes by comparing the node types. However, if most of the nodes in the original VDOM are of the same type, then other methods are needed to determine the corresponding relationship of the nodes, which will take more time and occupy more resources of the processor of the electronic device, and is prone to judgment errors. Causes an error in the interface display. Moreover, when the electronic device cannot accurately determine the corresponding relationship of the nodes, the nodes whose corresponding relationship cannot be determined will be re-rendered before the interface is displayed, which will generate the overhead of API interface calls, resulting in low interface update efficiency.

In order to solve the above problems that comparing VDOM nodes will take more time, occupy more resources of the electronic device processor, and be prone to judgment errors, this application provides an interface programming method based on VDOM, defining data as responsive data , wherein the definition of responsive data will bind the corresponding execution function, and when the data changes, the electronic device will be triggered to execute the bound function. This solution makes it possible to bind the responsive data to the property of the node when a certain attribute in the node uses the responsive data, so as long as the responsive data changes, the electronic device will automatically The properties are recalculated, and then the electronic device can determine which nodes have been recalculated to determine the nodes whose properties have changed and directly determine the nodes that call the responsive data through the binding relationship, thereby realizing the monitoring of property changes in nodes. Modified nodes can be monitored through changes in responsive data. Then, in the interface display, only the nodes whose attributes have changed are re-rendered, and there is no need to determine the nodes whose attributes have changed by comparing the original VDOM with the new VDOM.

In addition, the application also adds a display attribute to each node to indicate whether to display the node, and the value of the display attribute indicates whether to display the node in the interface, and then the electronic device can Whether to display the components of this node determines whether there are additions and deletions of nodes.

Among them, if the value of the display attribute indicates that the node is displayed, if the electronic device determines that the node was displayed in the last interface display, it means that the display attribute of the node has not changed. If the node is displayed, it means that the node is newly created, and the interface will display the components 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 was not displayed in the last interface display, it means that the display attribute of the node has not changed. This node means that the node is deleted this time, the interface will not display the corresponding component of the node, and the node and its sub-nodes will be destroyed.

In this way, through the interface programming method provided by this application, the nodes with attribute changes can be determined according to the responsive data, the deletion and addition of nodes can be determined by displaying the value of the attributes, and then the electronic device can obtain all the changed nodes, and then Changed nodes are re-rendered in the interface. Nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree. Moreover, this method determines the changed nodes based on the binding relationship of the responsive data and the value of the display attribute, and there will be no problem of comparing the original VDOM tree with the new VDOM tree node, which improves the efficiency of interface update .

For example, as shown in (A) in FIG. 3 , the attribute or value in node 1 is changed in the VDOM tree, and the changed node 1 is marked as node 8 . When using the VDOM method, the corresponding relationship between each node in the original VDOM tree and the new VDOM tree will be compared first, and it is determined that node 1 in the original VDOM is changed to node 8, and then node 1 (node 8) can be re-rendered. However, through the interface programming method provided by this application, as shown in (B) in Figure 3, the type of data called by node 1 is determined as responsive data, and when the data called by node 1 changes, the electronic device will It can be obtained that node 1 has been modified.

For another example, as shown in (A) in FIG. 4 , node 1 and its child nodes are deleted from the VDOM tree, and child node 7 is newly created under node 2 . The electronic device must first compare the attributes of each node in the original VDOM tree and the new VDOM tree to determine the corresponding relationship of the nodes, and then determine that node 1 is deleted, and create a new node 7 under node 2. However, through the method provided in this application, by modifying the values of the display attributes of nodes 1 and 2, the electronic device can know which nodes are added and deleted. For example, as shown in (B) in Figure 4, the display attribute is represented by vif, and the default value of vif is true, that is, each node will display the node and its child nodes by default, while the value of vif is false to indicate that it is not displayed For this node and its child nodes, when the vif value of node 1 becomes false, it means that the node will not be displayed in the interface, that is, the node will not be expanded, and the electronic device will not display node 1 and its child node 5 in the interface rendering The part corresponding to child node 6. When the electronic device detects that the added vif value of node 7 is true, the content of node 7 can be correspondingly displayed in the interface display.

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

The interface programming system provided by the present application will be introduced below with reference to FIG. 5 . As shown in Figure 5, the interface programming system includes componentized programming provided by developers, and converts componentized programming into a declarative engine for VDOM trees. module and a module for constructing a VDOM tree, and the system also includes a UI rendering module for generating a view, and the UI rendering module includes a module for rendering a visual DOM tree.

Developers can perform declarative UI development through component programming, and then the developer's code will be loaded into the declarative engine, which will parse the code written by the developer to generate a VDOM tree, and then the VDOM tree can be The UI rendering module is converted into a visual node tree (visual DOM tree), and then the interface view is obtained through the visual DOM tree. Among them, data is defined as responsive data in component programming, and display attributes are added to each node in a declarative engine. The default value of the display attribute can be true, that is, the default node will be displayed.

When the code to delete, add, or modify nodes is provided in component programming, or when the interface obtains user operations to change the interface, the declarative engine will locate the modified nodes through the positioning data change module, specifically through The binding relationship between responsive data and nodes is determined. The declarative engine will also determine whether each node is to be expanded by locating the addition and deletion node module, that is, whether each node will be displayed, specifically determined by the value of the display attribute of the node. Then, after the modified node is determined based on the positioning data change module and the positioning addition and deletion node module, a new visual DOM tree can be obtained, and then a new interface can be rendered by the UI rendering module according to the new visual DOM tree.

In some embodiments, the interface programming system can also be applied to UI development of imperative programming, wherein the UI development of imperative programming is to directly write the code that calls the corresponding interface, and the code of imperative programming can correspond to a rendering tree. This method also needs to transform the statements of imperative programming into declarative programming through attribute encapsulation. As shown in Figure 6, the device also includes an attribute-based encapsulation module, which is used to attribute-encapsulate the imperative programming, and then parse the rendering tree corresponding to the imperative programming into the VDOM tree of the declarative engine, and the other modules can be Refer to the foregoing FIG. 5 and its related descriptions, and details are not repeated here. For example, in imperative programming, the interface to control text display content can be TextUI.setText(std::string const&text), which can be abstracted into attribute-based control after attribute-based encapsulation, that is, the code corresponding to declarative programming It is Text (text="..."), where the ellipsis is used to indicate the specific content displayed. When the attribute text attribute is changed, the attribute encapsulation can automatically call the corresponding setText command to update the changed attribute to the interface.

In some other embodiments, the interface programming system can also be applied to the DOM model. Since this solution does not involve the comparison between the new VDOM and the original VDOM, it can be directly applied to the DOM model. As shown in FIG. 7 , the VDOM obtained through component-based programming analysis can be directly used for rendering by the UI rendering module.

The interface programming method provided by the present application is described in detail below, as shown in Figure 8, the interface programming method may include the following steps:

S810: Load components and build a VDOM tree.

The electronic device will first obtain the components compiled by the developer through declarative programming, and then parse each component in the declarative engine, and then generate corresponding nodes for each component in VDOM, and finally obtain a file containing each node and the relationship between nodes. VDOM tree.

Wherein, the component can receive data or attributes passed in from the outside. For example, the component can be a button, and the button can adjust individual displays based on the obtained user click operation. And the electronic device will also create a pre-create event (beforecreate) in the life cycle event for the component. The life cycle refers to some key events in the process of a component from creation to destruction. Developers can freely choose whether to carry out corresponding business during these periods Processing, commonly used events include "created" (created) or "destroyed completed" (destroyed) two events.

S820: Monitor node data changes, and determine nodes with data changes.

The electronic device defines the data used in the assignment of the node's attributes as responsive data, and then the node automatically establishes a binding relationship with the responsive data. When the responsive data changes, the electronic device can automatically recalculate the data. The attributes of the nodes, and then through the recalculated data, the nodes with attribute changes can be directly determined, and then the monitoring of attribute changes in nodes can be realized. The electronic device can monitor the nodes whose attributes have been modified through the change of the responsive data.

For example, as shown in Figure 9, the second and third lines in Figure 9 define both the string name and the font size myFontSize as responsive data, and the component BUILD defines the name (name) in line myFontSize The size is displayed and the display string name is defined in line 9. Therefore, the component BUILD uses the response data string name and the value myFontSize, and the above response data will establish a binding relationship with the component BUILD. Moreover, a button that can change the value of myFontSize is also defined in the component BUILD. When the button is pressed, the value of myFontSize will be changed, and the node corresponding to the component BUILD bound to myFontSize belongs to the node with data changes .

S830: Determine whether there are added or deleted nodes according to the display attributes of the nodes.

The electronic device adds a display attribute to each node, and the electronic device will determine whether there is a newly added or deleted node 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 the component corresponding to the node is not displayed in the interface, then the node is a newly added node. When the electronic device determines that the display attribute of the node is that the node will not be displayed, and there is a component corresponding to the node displayed in the interface, then the node is a deleted node.

Wherein, when the electronic device wants to delete a certain node, it will not directly delete the node in the VDOM, but will retain a virtual node, and the display attribute of the node is not to display the node, so that the electronic device can Whether the display attribute of the node and the interface has a component corresponding to the node is displayed to determine whether the node is to be deleted. If the electronic device directly deletes the node, since this method does not compare the VDOM with the original VDOM, the electronic device cannot obtain the deleted node, and the component corresponding to the node will always be displayed on the interface.

For example, in some implementations, reference may be made to FIG. 10 for specific codes for adding display attributes to nodes. Wherein, referring to line 3 in FIG. 10, a Boolean variable showName is defined, and the default value of this variable is true. Then refer to line 7, add this variable as a display attribute to the component BUILD, and set a button on lines 12 and 13. When the button is clicked, the value of showName will change, which will affect code 8. line and the display of what is defined in line 9. Among them, when the value of showName is true, it will display "Name:'string name'", when the button "ToggleName" is pressed, the value of showName becomes false, then "Name:'string name'" will not be displayed.

In some other embodiments, the above code can also be written in the manner shown in FIG. 11 , where, as in line 5 in FIG. 11 , an if statement is used to determine whether to display the corresponding content. In this way of writing, if the component has other content to be displayed, other functions can also be defined by adding an else statement.

S840: Render and obtain a new interface according to nodes with data changes and nodes with addition and deletion.

The electronic device obtains all the updated nodes in the VDOM according to the nodes with data changes and the nodes that have been added and deleted, and then obtains the node data by calling the API of these nodes, and then renders the updated nodes in the interface.

To sum up, through the interface programming method provided by this application, the nodes with attribute changes can be determined according to the responsive data, the deletion and addition of nodes can be determined by displaying the value of the attributes, and then the electronic device can obtain all the changed nodes , and then re-render the changed nodes in the interface. Nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree. Moreover, this method determines the changed nodes based on the binding relationship of the responsive data and the value of the display attribute, and there will be no problem of comparing the original VDOM tree with the new VDOM tree node, which improves the efficiency of interface update .

In some embodiments, as shown in Figure 12, the interface programming method may include the following steps:

S1201: Load a component.

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

S1202: Create a component virtual node.

The electronic device generates corresponding nodes for each component in the VDOM through the analysis results of each component, and finally obtains a VDOM tree including each node and the relationship between the nodes.

S1203: Receive the incoming data from the component.

A component can receive data or attributes passed in from the outside. For example, the component can be a button that can adjust individual displays based on the user's click operation obtained.

S1204: Create a life cycle for the node.

Electron also creates a beforecreate event in the lifecycle events for the component.

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

S1205: Monitor data changes.

The electronic device defines the data used in the assignment of the node's attributes as responsive data, and then the node will automatically establish a binding relationship with the responsive data, and the electronic device will monitor whether the responsive data has changed.

S1206: Determine the node where the data changes.

When the electronic device detects that the responsive data has changed, the electronic device can directly determine the node that calls the responsive data through the binding relationship between the node and the responsive data, thereby realizing the monitoring of the attribute change in the node. The electronic device can monitor the nodes whose attributes have been modified through the change of the responsive data.

S1207: Recalculate the nodes whose data changes.

The electronic device will substitute the changed responsive data into the node, and re-determine the attribute of the node.

S1208: Start monitoring node data usage.

The electronic device will start to monitor the use of node data when the node assigns a value to the attribute, so as to ensure that data monitoring is only generated during the attribute assignment process.

S1209: Obtain node attribute assignment.

Electronics will assign the changed data to the node's properties. Among them, as long as the responsive data is modified anywhere, it will directly lead to the asynchronous recalculation of the node attributes. Synchronous recalculation is not used here because the developer may change multiple data at the same time. If the data is changed once, it will be recalculated once. Nodes will incur a large overhead. After using asynchronous recalculation, the developer can calculate all the affected nodes at once after processing the data that needs to be changed, and the interface can respond to multiple data changes of the developer only once.

S1210: End the data usage of the monitoring node.

After the electronic device has correspondingly recalculated all the data that needs to be changed in the properties of the node, it will end the use of the monitoring node data. Wherein, the calculated data will also be used for the next data monitoring and this interface update, that is, for step S1205 and step S1220.

It should be understood that, for the specific content of the above step S1205 to step S1207, reference may also be made to the related description of step S820 in FIG. 8 , which will not be repeated here.

S1211: Determine whether to display the component corresponding to the node.

The electronic device adds a display attribute to each node, and the electronic device will determine 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, that is, the node is not expanded, step S1212 will be executed. When the display attribute indicates to display the component corresponding to the node, that is, to expand the node, step S1216 will be executed.

For example, vif is used to indicate the display attribute, and when "vif=true", it means that the node needs to be expanded, that is, the node is displayed, and step S1216 is executed. When "vif=false", it means that the node will not be expanded, that is, the node will not be displayed in the interface, that is, step S1212 is executed.

S1212: Determine whether the component not to be displayed has already been displayed in the interface.

The electronic device will first determine whether the nodes that will not be expanded, that is, the components that are not displayed, are displayed in the interface rendered last time. When the component that is not displayed is not displayed in the interface, it means that the node was not expanded last time, that is, the component was not displayed in the last interface rendering, and it is considered that the display property of the node has not been updated. When the component that is not displayed is displayed in the last interface rendering, it means that the node was expanded last time, and the component is also displayed in the interface, it is considered that the node has updated the display attribute, and step S1213 will be executed.

S1213: Destroy the visible node.

When the electronic device determines that the node that is not to be expanded was expanded last time, that is, when the component is displayed in the previous interface, the electronic device will first delete the visible node corresponding to the node on the interface, and in the VDOM The virtual node can be reserved.

S1214: Destroy the descendant nodes of the node.

Since the node has been deleted, the descendant nodes under the node will also be deleted.

S1215: End the life cycle of the node.

At the same time, the electronic device will generate a life cycle event "destroyed" in the life cycle of the node.

S1216: Determine whether the component to be displayed has already been displayed in the interface.

The electronic device needs to be expanded when determining the node, that is, when a visible node is generated, it is also checked whether the node is displayed in the previous interface. If it has already been displayed, it means that the display attribute of the node has not changed, then directly execute step S1220: display the node content according to the node attribute value. If the node was not displayed in the previous interface, it means that the node is newly added.

S1217: Create a visible node.

The electronic device will correspondingly create a visible node corresponding to the node, and the visible node will be a node displayed in the interface.

S1218: Load the virtual child node.

After the electronic device creates a visible node, it will also add child nodes of the node to the VDOM.

S1219: Create a lifecycle for the node.

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

It should be understood that, for the specific content of the above step S1211 to step S1219, reference may also be made to the related description of step S830 in FIG. 8 , which will not be repeated here.

S1220: Display node content according to the node attribute value.

The electronic device obtains all the updated nodes in the VDOM according to the nodes with data changes and the nodes with additions and deletions, and then obtains the data of the nodes by calling APIs of these nodes, and then renders the updated nodes in the interface.

It should be understood that, for the specific content of the above step S1220, reference may also be made to the related description of the step S840 in FIG. 8 above, which will not be repeated here.

To sum up, through the interface programming method provided by this application, the nodes with attribute changes can be determined according to the responsive data, the deletion and addition of nodes can be determined by displaying the value of the attributes, and then the electronic device can obtain all the changed nodes , and then re-render the changed nodes in the interface. Nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree. Moreover, this method determines the changed nodes based on the binding relationship of the responsive data and the value of the display attribute, and there will be no problem of comparing the original VDOM tree with the new VDOM tree node, which improves the efficiency of interface update .

Among them, as shown in Figure 13, Figure 13 exemplarily shows a situation where the interface programming method monitors node data changes, monitors node data changes, and then updates to the view, and performs the above steps with the original VDOM model method for performance testing, and obtains The test results in Figure 13, where the interface programming method triggers an interface data change event (such as emit) for 0.073 milliseconds, recalculating the value of the current node and updating the interface (such as rebind, setnodevalue) takes 0.093 milliseconds Milliseconds, that is, a total time of 0.166 milliseconds. The original VDOM model triggers interface data change events and other operations (such as incoker, CallwithAsynchanding) take 0.78 milliseconds, compares the VDOM tree and updates the interface and other operations (such as run) takes 0.88 milliseconds, that is, a total of 1.66 milliseconds. That is to say, the present application improves the efficiency of updating the interface.

Next, we will describe in detail the view stretching and shrinking caused by the change of display properties in conjunction with Fig. 14, that is, the above step S830 and step S1211 to step S1219 will be described in detail. Shrinking corresponds to the destruction of the node, and does not display the components corresponding to the node. Among them, the display attribute is vif, vif is true by default, and vif is changed to false as an example.

S1401: Create an interface view. The electronic device first creates a view application, that is, defines a view.

S1402: Build the root component. A root component is defined in the view, and the root component is used to mount components.

S1403: Create a component. After the component is created, the node corresponding to each component can bind the data related to the attribute. Since the data is defined as responsive data, a binding relationship can be established between the node and the data.

S1404: Determine whether the value of vif is true. The default value of vif is true, indicating that the component is displayed, and vif is changed to false, indicating that the component is not displayed. When the value of vif is true, step S1407 is executed: building child nodes one by one. When the value of vif is false, execute step S1405: determine whether the node has created a visible node.

S1405: Determine whether the node has created a visible node. The electronic device will first determine whether the nodes that will not be expanded, that is, the components that are not displayed, are displayed in the interface rendered last time. When the node has created visible nodes, execute step S1406: destroy all descendant visible nodes.

S1406: Destroy all descendant visible nodes. When the electronic device determines that the node that is not to be expanded was expanded last time, that is, when the component is displayed in the previous interface, the electronic device will first delete the visible node corresponding to the node on the interface, and in the VDOM The virtual node can be reserved.

S1407: Construct child nodes one by one. When the value of vif is true, it means that the component will be expanded, and the electronic device will build each child node under the component one by one.

S1408: Determine whether the child node is a component. When the child node is also a component, it will be processed according to the creation method of the component, that is, step S1403 and its subsequent operations will be executed. When the child node is not a component, step S1409 will be performed: determine whether the value of vif of the child node is true.

S1409: Determine whether the value of vif of the child node is true. When the vif of the child node is true, step S1410 is performed: updating the visible node. When the vif of the child node is false, execute step S1411: determine whether the child node has created a visible node.

S1410: Update the visible nodes. Assign values to nodes according to data changes, and update the nodes in the interface.

S1411: Determine whether a child node has created a visible node. The electronic device will first determine whether the child node is displayed in the last rendered interface. When the child node has created a visible node, execute step S1412: destroy the child visible node.

S1412: Destroy child visual nodes. When the electronic device determines that the child node was expanded last time, that is, when the node is displayed in the previous interface, the electronic device will first delete the visible node corresponding to the node on the interface, and the VDOM can retain the node. virtual node.

The stretching and shrinking of the view caused by the change of the above-mentioned display properties is illustrated below with an example.

As shown in Figure 15, Figure 15 shows a view scaling code in which a parent component contains a child component. Among them, the third line in Figure 15 defines the display attribute showSub, and adds this display attribute to the name ("hello world") of the parent component. The parent component also defines the button Toggle Sub, which can change the value of showSub. The child component defines the display size of the parent component name("hello world"), and defines the button "+FontSize" to change the font size.

Therefore, the VDOM tree of the above code is shown in Figure 16. By default, the value of SubComp is true, and the SubComp node will be expanded, corresponding to the view expansion, that is, "hello world", button +FontSize and button Toggle Sub will be displayed. After clicking the button Toggle Sub, the value of SubComp becomes false, and the SubComp node will not expand, corresponding to the contraction of the view, only the button Toggle Sub is displayed. After clicking the button Toggle Sub again, the value of SubComp returns to true, and the SubComp node will be expanded, corresponding to the view extension, that is, "hello world", the button +FontSize and the button Toggle Sub will be displayed again.

In this way, through the interface programming method provided by this application, the deletion and addition of nodes can be determined by displaying the value of the attribute, and then the electronic device can obtain the changed nodes, and then re-render the changed nodes in the interface. Nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree. Moreover, this method determines the changed nodes based on the binding relationship of the responsive data and the value of the display attribute, and there will be no problem of comparing the original VDOM tree with the new VDOM tree node, which improves the efficiency of interface update .

In order to solve the above problems that comparing VDOM nodes will take more time, occupy more resources of the processor of the electronic device, and be prone to misjudgment, the present application provides an interface programming device 1700 based on VDOM, including a display unit 1710, an acquisition Unit 1720 and determination unit 1730.

The display unit 1710 is used to display the first page, wherein the first page includes multiple components, each of the multiple components corresponds to at least one node, and each node has its own attribute value; the acquisition unit 1720 is used to acquire interface updates request, the determining unit 1730 is configured to determine the nodes whose attribute values have changed on the first page; the display unit 1710 is also configured to update the nodes whose attribute values have changed to obtain the second page.

In some embodiments, 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 some other embodiments, the determining unit 1730 is further configured to determine the node whose display attribute does not correspond to the first page, where the display attribute does not correspond to the first page includes: the display attribute indicates that the first component is displayed and the first page The first component is not displayed; or, the display attribute indicates that the first component is not displayed and the first component is displayed on the first page.

In some other embodiments, the determining unit 1730 is further configured to determine a node whose first attribute changes, 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 some 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, according to the recalculated first attribute For a node with an attribute, the display unit 1710 is further configured to display the component corresponding to the node on the second page.

In some other embodiments, the determining unit 1730 is further configured to create a visual node tree according to the attributes of multiple nodes, the visual node tree includes multiple visual nodes, and each visual node in the multiple visual nodes is Corresponding to a node; the display unit 1710 is further configured to display the first page according to multiple visible nodes.

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

In some other embodiments, when 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 on the second page based on the fact that the first component is not displayed on the first page; the display unit 1710 is further configured to delete the visible node corresponding to the node in the visible node tree based on the first page displaying the first component, and not display the first component on the second page.

In some other embodiments, when the first node has child nodes, and the display attribute indicates to display the first component, 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. A component; the display unit 1710 is further configured to create a visual node corresponding to the first node and the child node in the visual node tree based on the fact that the first page does not display the first component and the display attribute of the child node indicates that the second component corresponding to the child node is displayed. node, and display the first component and the second component on the second page according to the first visible node.

In some other embodiments, when the first node has child nodes, and the display attribute indicates that the first component is not displayed, the display unit 1710 is further configured to not display the first component and the second component corresponding to the child node based on the first page, The display of the first page is kept in the second page; the display unit 1710 is also used to display the first component and the second component based on the first page, and delete the visual node corresponding to the first node and the second node in the visual node tree. node, and do not display the first component and the second component in the second page.

In this way, through the interface programming device provided by this application, the nodes with attribute changes can be determined according to the responsive data, and the deletion and addition of nodes can be determined by displaying the value of the attributes, and then the electronic device can obtain all the nodes with changes, and then Changed nodes are re-rendered in the interface. Nodes with changes can be determined without comparing the original VDOM tree with the new VDOM tree, and there is no need to bring a large overhead to the processor due to the comparison of the VDOM tree. Moreover, this method determines the changed nodes based on the binding relationship of the responsive data and the value of the display attribute, and there will be no problem of comparing the original VDOM tree with the new VDOM tree node, which improves the efficiency of interface update .

The method in the embodiment of the present application has been described in detail above. In order to facilitate better implementation of the above-mentioned solution in the embodiment of the present application, correspondingly, related equipment for cooperating with implementing the above-mentioned solution is also provided below.

FIG. 18 is a schematic structural diagram of a computing device 1800 provided in the present application, and the computing device 1800 may be the interface programming device 800 in the foregoing content. As shown in FIG. 18 , the computing device 1800 includes: a processor 1810 , a communication interface 1820 and a memory 1830 . Wherein, the processor 1810, the communication interface 1820, and the memory 1830 may be connected to each other through an internal bus 1840, or communicate through other means such as wireless transmission. In the embodiment of the present application, the connection through the bus 1840 is taken as an example. The bus 1840 may be a peripheral component interconnect Express (PCIe) bus, an extended industry standard architecture (EISA) bus, a unified bus (unified bus, Ubus or UB), computer express link (compute express link, CXL), cache coherent interconnect for accelerators (CCIX), etc. The bus 1840 can be divided into an address bus, a data bus, a control bus, and the like. In addition to the data bus, the bus 1840 may also include a power bus, a control bus, a status signal bus, and the like. However, for clarity of illustration, the various buses are labeled as bus 1840 in the figure.

The processor 1810 may be composed of at least one general-purpose processor, such as a central processing unit (Central Processing Unit, CPU), or a combination of a CPU and a hardware chip. The aforementioned hardware chip may be an application-specific integrated circuit (Application-Specific Integrated Circuit, ASIC), a programmable logic device (Programmable Logic Device, PLD) or a combination thereof. The above-mentioned PLD may be a complex programmable logic device (Complex Programmable Logic Device, CPLD), a field-programmable gate array (Field-Programmable Gate Array, FPGA), a general array logic (Generic 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 various services.

The memory 1830 is used to store program codes, which are executed under the control of the processor 1810, so as to execute the processing steps of the interface programming method in the above-mentioned embodiments. The program code may include one or more software modules, and the one or more software modules may be the software modules provided in the embodiment in FIG. 17 .

It should be noted that this embodiment can be implemented by a general physical server, for example, an ARM server or an X86 server, or it can be realized based on a general physical server combined with a virtual machine implemented by NFV technology. A virtual machine refers to a virtual machine simulated by software A complete computer system with complete hardware system functions and running in a completely isolated environment is not specifically limited in this application.

The memory 1830 may include a volatile memory (volatile memory), such as a random access memory (random access memory, RAM); the memory 1830 may also include a non-volatile memory (non-volatile memory), such as a read-only memory (read-only memory, ROM), flash memory (flash memory), hard disk (hard disk drive, HDD) or solid-state drive (solid-state drive, SSD); the memory 1830 may also include a combination of the above types. The memory 1830 may store program codes to specifically execute S810-step S840 and its optional steps in the embodiment of FIG. 8 , or execute S1201-step S1220 and its optional steps in the embodiment of FIG. 12 , which will not be repeated here.

The communication interface 1820 can be a wired interface (such as an Ethernet interface), an internal interface (such as a high-speed serial computer expansion bus (peripheral component interconnect express, PCIe) bus interface), a wired interface (such as an Ethernet interface) or a wireless interface ( such as a cellular network interface or using a wireless LAN interface) for communicating with other devices or modules.

It should be noted that FIG. 18 is only a possible implementation of the embodiment of the present application. In practical applications, the computing device 1800 may include more or fewer components, which is not limited here. Regarding the content not shown or described in the embodiment of the present application, reference may be made to the related explanations in the aforementioned embodiment of FIG. 8 or FIG. 12 , which will not be repeated here.

It should be understood that the computing device shown in FIG. 18 may also be a computer cluster composed of at least one server, which is not specifically limited in this application.

The embodiment of the present application also provides a computer-readable storage medium, where instructions are stored in the computer-readable storage medium, and when the instructions are run on a processor, the method flow shown in FIG. 8 or FIG. 12 is implemented.

An embodiment of the present application further provides a computer program product, and when the computer program product is run on a processor, the flow of the method shown in FIG. 8 or FIG. 12 is implemented.

The above-mentioned embodiments may be implemented in whole or in part by software, hardware, firmware or other arbitrary combinations. When implemented using software, the above-described embodiments may be implemented in whole or in part in the form of computer program products. The computer program product includes one or more computer instructions. When the computer program instructions are loaded or executed on the computer, all or part of the processes or functions according to the embodiments of the present invention will be generated. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website, computer, server or data center Transmission to another website site, computer, server or data center via wired (such as coaxial cable, optical fiber, digital subscriber line (DSL) or wireless (such as infrared, wireless, microwave, etc.). The computer The readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains one or more sets of available media. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape, etc.) ), an optical medium (for example, a high-density digital video disc (digital video disc, DVD), or a semiconductor medium. The semiconductor medium may be an SSD.

The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person familiar with the technical field can easily think of various equivalents within the technical scope disclosed in the present invention. Modifications or replacements shall all fall within the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims (12)

1. A kind of interface programming method, is applied to electronic equipment, is characterized in that, comprises: displaying a first page, wherein the first page includes a plurality of components, each of the plurality of components corresponds to at least one node, and each of the nodes has its own attribute value; Obtaining the interface update request, and determining the node where the attribute value of the first page changes; The node whose attribute value changes is updated to obtain the second page. 2. The method according to claim 1, wherein 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. 3. The method according to claim 2, wherein the determining the node where the attribute value of the first page changes comprises: It is determined that the display attribute does not correspond to the node of the first page, wherein the display attribute does not correspond to the first page includes: the display attribute indicates that the first component is displayed and the first page The first component is not displayed in ; or, the display attribute indicates that the first component is not displayed and the first component is displayed on the first page. 4. The method according to any one of claims 3, wherein the determining the node where the property value of the first page changes includes: A node whose first attribute changes is determined, wherein the first attribute is determined according to a first variable, and the first variable is associated with calculation of the first attribute. 5. according to any described method of claim 4, it is characterized in that, described method also comprises: automatically recalculating the first attribute of the node based on a change in the first attribute of the node; The updating the node whose attribute value changes to obtain the second page includes: displaying the first component based on the display attribute indication, and according to the recalculated node after the first attribute, in the The component corresponding to the node is displayed on the second page. 6. The method according to claim 5, wherein the displaying the first page comprises: Create a visual node tree according to the attributes of the multiple nodes, the visual node tree includes multiple visual nodes, and each visual node in the multiple visual nodes corresponds to a node; According to the plurality of visible nodes, a first page is displayed. 7. The method according to claim 6, wherein when the display attribute indicates that the first component is displayed, the method further comprises: maintaining display of the first component in the second view based on the first page already displaying the first component; 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 visible node tree, and the second page is displayed on the second page according to the visible node. a component. 8. The method according to claim 6, wherein when the display attribute indicates that the first component is not displayed, the method further comprises: Keeping the display of the first page on the second page based on the fact that the first component is not displayed on the first page; Based on the display of the first component on the first page, the visible node corresponding to the node is deleted in the visible node tree, and the first component is not displayed on the second page. 9. The method according to claim 7, wherein the first node has child nodes, and the display attribute indicates that the first component is displayed, the method further comprises: Based on the display attribute of the child node, determine whether to display the first component corresponding to the child node; 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 the second component corresponding to the child node is displayed, the first node and the first node are created in the visible node tree. Visual nodes corresponding to child nodes, and displaying the first component and the second component on the second page according to the first visual node. 10. The method according to claim 8, wherein the first node has child nodes, and the display attribute indicates that the first component is not displayed, the method further comprises: Keeping the display of the first page on the second page based on the fact that the first page does not display the first component and the second component corresponding to the child node; Based on the first page displaying the first component and the second component, deleting the visible nodes corresponding to the first node and the second node in the visible node tree, and The first component and the second component are not displayed on the second page. 11. A computing system, characterized in that it includes a processor and a memory, the memory is used to store instructions, the processor is used to execute the instructions, when the processor executes the instructions, perform the The method described in any one of 1 to 10. 12. A computer program product, characterized in that the computer program product comprises computer instructions, and when executed by a computing device, the computing device executes the method according to any one of claims 1 to 10.

Images