一种界面编程方法、装置以及相关设备制造方法及图纸

本申请应用于计算机技术领域，提供了一种界面编程方法、装置以及相关设备，其中方法包括：显示第一页面，其中第一页面包括多个组件，多个组件中的每个组件至少对应一个节点，每个节点具有各自的属性值；获取到界面更新请求，确定出第一页面属性值发生变化的节点；将属性值发生变化的节点进行更新，得到第二页面。这样，通过本申请提供的界面编程方法，能根据有属性变化的节点，在界面更新中只更新该属性变化的节点，无需更新整个界面，提高了界面渲染效率。效率。效率。

【技术实现步骤摘要】
一种界面编程方法、装置以及相关设备


[0001]本专利技术涉及计算机
，尤其涉及一种界面编程方法、装置以及相关设备。

技术介绍

[0002]在界面开发中，通常将界面中的数据以文档对象模型(document object model，DOM)进行处理，通过DOM可以将一个界面表示为一个DOM树，树的每个节点表示了界面中的一个标签或标签内的文本项，DOM树的结构能描述出界面中各个标签间的相互关联性。电子设备通过渲染DOM树即可显示对应的界面。
[0003]然而，每次修改界面数据时，都会引起DOM节点的变化，此时电子设备都将重新渲染整个界面，从而让界面的内容与更新后的DOM的内容保持一致。然而，电子设备每次渲染整个界面时，会依次调用DOM树中各个节点对应的API，导致界面与DOM之间需要频繁交互，产生了较大的开销。
[0004]为了减少DOM接口的调用，在一些方法中，在界面更新的时候，将根据当前的界面数据先解析出一个虚拟DOM(virtual DOM，VDOM)树，然后在界面数据有变化时，再将变化后的界面数据解析成一个新的VDOM树，然后将两次的VDOM树进行比对，确定新增、修改或者删除的节点，然后只调用上述有修改的节点的API来更新该节点在界面中的内容。
[0005]但是，在比对上一次VDOM树和本次VDOM树的过程中，需要通过上一次VDOM树和本次VDOM树中节点的类型等依次确认节点的对应关系，进而才能确认出有更改的节点。该对比过程会花费较长时间，会占用处理器较多资源，使得界面更新效率较低。

技术实现思路

[0006]本申请提供了一种界面编程方法、装置以及相关设备，通过响应式数据确定有属性变化的节点，通过显示属性的值能确定节点的删除和增加，进而电子设备能获取到所有有变化的节点，然后对有变化的节点在界面中重新进行渲染，提升了界面更新的效率。。
[0007]第一方面，提供一种界面编程方法，应用于电子设备，包括：显示第一页面，其中第一页面包括多个组件，多个组件中的每个组件至少对应一个节点，每个节点具有各自的属性值；获取到界面更新请求，确定出第一页面属性值发生变化的节点；将属性值发生变化的节点进行更新，得到第二页面。
[0008]在上述方案中，界面是由多个组件构成的，每个组件对应一个节点，界面在显示时，需要遍历所有节点。通过本申请提供的界面编程方法，能根据有属性变化的节点，在界面更新中只更新该属性变化的节点，无需更新整个界面，提高了界面渲染效率。
[0009]结合第一方面，在一些实现方式中，节点的属性包括显示属性，显示属性用于指示是否显示节点对应的第一组件。
[0010]在上述方案中，通过在节点中添加显示属性，来标记该节点是否显示，显示属性的值表示是否在界面中显示该节点，进而电子设备能根据该显示属性值的和界面是否显示该节点的组件确定是否有节点的增删。无需电子设备去将存储的原始VDOM树与新的VDOM树进
行对比，确定新增、修改或者删除的节点，无需因为比较VDOM树给处理器带来较大开销。
[0011]结合第一方面，在一些实现方式中，还包括确定出显示属性与第一页面不对应的节点，其中，显示属性与第一页面不对应包括：显示属性指示显示第一组件且第一页面中未显示第一组件；或者，显示属性指示不显示第一组件且第一页面中显示了第一组件。
[0012]在上述方案中，当显示属性表示显示该节点，但是界面没有显示该组件，则表示该节点是新添加的，当显示属性表示不显示该节点，但是界面中显示了该组件，则表示该节点是要删除的。进而电子设备能根据该显示属性值的和界面是否显示该节点的组件确定是否有节点的增删。无需电子设备去将存储的原始VDOM树与新的VDOM树进行对比，确定新增或者删除的节点，无需因为比较VDOM树给处理器带来较大开销。
[0013]结合第一方面，在一些实现方式中，还包括，确定出第一属性发生变化的节点，其中，第一属性是根据第一变量确定的，第一变量关联第一属性的计算。
[0014]在上述方案中，将数据定义为响应式数据，其中，响应式数据在定义中会绑定对应的执行函数，当数据发生变化时，将触发电子设备执行该绑定的函数。
[0015]结合第一方面，在一些实现方式中，还包括，基于节点中第一属性发生变化，自动重新计算节点的第一属性；将属性值发生变化的节点进行更新，得到第二页面，包括：基于显示属性指示显示第一组件，根据重新计算第一属性后的节点，在第二页面中显示节点对应的组件。
[0016]在上述方案中，在当节点中某一属性使用了该响应式数据时，将响应式数据与计算该节点的属性进行绑定，因此只要响应式数据发生了变化时，电子设备将自动对该节点的属性进行重算，进而，电子设备能通过确定哪些节点进行了重算，来确定属性有变化的节点直接通过绑定关系确定调用了该响应式数据的节点，进而实现节点中属性变化的监控，通过响应式数据的变化就能监控到有修改的节点。无需电子设备去将存储的原始VDOM树与新的VDOM树进行对比，确定属性有变化的节点，节省了处理器的开销。
[0017]结合第一方面，在一些实现方式中，还包括，根据多个节点的属性，创建可视节点树，可视节点树包括多个可视节点，多个可视节点中的每个可视节点都对应一个节点；根据多个可视节点，显示第一页面。
[0018]在上述方案中，界面显示的过程具体为根据节点属性，生成可视节点，然后根据可视节点来渲染界面。
[0019]结合第一方面，在一些实现方式中，还包括，基于第一页面已显示第一组件，在第二视图中保持第一组件的显示；基于第一页面未显示第一组件，在可视节点树中创建节点对应的可视节点，并根据可视节点在第二页面中显示第一组件。
[0020]在上述方案中，如果显示属性的值表示显示该节点时，若电子设备确定在上一次界面显示中显示了该节点，则说明该节点的显示属性没有改变，若电子设备将确定在上一次界面显示中没有显示该节点，则说明该节点是新创建的，将生成该节点的可视节点，然后界面将显示该节点对应的组件。进而电子设备能根据该显示属性值的和界面是否显示该节点的组件确定是否有节点的增删。无需电子设备去将存储的原始VDOM树与新的VDOM树进行对比，确定新增或者删除的节点，无需因为比较VDOM树给处理器带来较大开销。
[0021]结合第一方面，在一些实现方式中，在显示属性指示不显示第一组件的情况下，还包括：基于第一页面未显示第一组件，在第二页面中保持第一页面的显示；基于第一页面显
示了第一组件，在可视节点树中删除节点对应的可视节点，并在第二页面中不显示第一组件。
[0022]在上述方案中，当显示属性的值表示不显示该节点时，若电子设备确定在上一次界面显示中也没有显示该节点，则说明该节点的显示属性没有改变，若电子设备确定在上一次界面显示中显示了该节点，则说明该节点是本次删除的，界面将不显示该节点对应的组件，并销毁该节点及其子节点。进而电子设备能根据该显示属性值的和界面是否显示该节点的组件确定是否有节点的增删。无需电子设备本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面编程方法，应用于电子设备，其特征在于，包括：显示第一页面，其中所述第一页面包括多个组件，所述多个组件中的每个组件至少对应一个节点，每个所述节点具有各自的属性值；获取到界面更新请求，确定出所述第一页面属性值发生变化的节点；将所述属性值发生变化的节点进行更新，得到第二页面。2.根据权利要求1所述的方法，其特征在于，所述节点的属性包括显示属性，所述显示属性用于指示是否显示所述节点对应的第一组件。3.根据权利要求2所述的方法，其特征在于，所述确定出所述第一页面属性值发生变化的节点，包括：确定出所述显示属性与所述第一页面不对应的节点，其中，所述显示属性与所述第一页面不对应包括：所述显示属性指示显示所述第一组件且所述第一页面中未显示所述第一组件；或者，所述显示属性指示不显示所述第一组件且所述第一页面中显示了所述第一组件。4.根据权利要求3任一所述的方法，其特征在于，所述确定出所述第一页面属性值发生变化的节点，包括：确定出第一属性发生变化的节点，其中，所述第一属性是根据第一变量确定的，所述第一变量关联第一属性的计算。5.根据权利要求4任一所述的方法，其特征在于，所述方法还包括：基于所述节点中第一属性发生变化，自动重新计算所述节点的第一属性；所述将所述属性值发生变化的节点进行更新，得到第二页面，包括：基于所述显示属性指示显示所述第一组件，根据所述重新计算所述第一属性后的节点，在所述第二页面中显示所述节点对应的组件。6.根据权利要求5所述的方法，其特征在于，所述显示第一页面，包括：根据所述多个节点的属性，创建可视节点树，所述可视节点树包括多个可视节点，所述多个可视节点中的每个可视节点都对应一个节点；根据所述多个可视节点，显示第一页面。7.根据权利要求6所述的方法，其特征在于，在所述显示属性指示显示所述第一组件的情况下，所述方法还包括：基于所述第一页面已显示所述第一组件，在所述第二视...

【专利技术属性】
技术研发人员：陈天军，
申请(专利权)人：花瓣云科技有限公司，
类型：发明
国别省市：