一种用户界面数据隔离方法及装置与流程

本发明涉及计算机技术领域，尤其涉及的是一种用户界面数据隔离方法及装置。

背景技术：

当前基于b/s(浏览器/服务器)架构的软件开发技术日新月异，从传统的服务端渲染页面的方式到现在的前后端分离，页面渲染这一步已经完全交由前端处理，在这个过程中出现了非常多优秀的前端框架与开发理念。其中应用最广的便是react+redux的组件式ui(userinterface，用户界面)框架加发布订阅的数据流方式。

如图1所示，常规的react+redux架构都是通过redux创建一个全局共享的数据层，所有的视图都可以通过redux的接口连接底层的数据。通过redux提供的接口，应用内所有的组件(比如视图)都可以非常扁平化地获取应用数据，而不是通过调用关系一层一层地获取。

由于全局共享的底层数据层中只要存在数据更新，所有通过redux接口连接过的视图都会重新渲染计算。因此，当数据更新比较频繁时，前端视图的渲染计算量会急剧增大，占用过多的计算资源会使得前端系统的整体性能下降。

技术实现要素：

本文提供一种用户界面数据隔离方法及装置，能够通过底层数据的隔离节省用户界面视图的渲染计算量。

根据本申请的第一方面，本发明实施例提供一种用户界面数据隔离方法，包括：

对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组：将连接到相同实时数据的视图划分在同一个视图组中；其中，所述底层数据按照实时性划分为：实时数据和非实时数据；

在底层数据出现实时数据更新时，确定所述用户界面内与所述更新的实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染；

根据本申请的第二方面，本发明实施例提供一种用户界面数据隔离装置，包括：

分组模块，用于对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组：将连接到相同实时数据的视图划分在同一个视图组中；其中，所述底层数据按照实时性划分为：实时数据和非实时数据；

更新模块，用于在底层数据出现实时数据更新时，确定所述用户界面内与所述更新的实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染。

根据本申请的第三方面，本发明实施例提供一种用户界面数据隔离装置，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的用户界面数据隔离程序，所述用户界面数据隔离程序被所述处理器执行时实现上述用户界面数据隔离方法的步骤。

根据本申请的第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质上存储有用户界面数据隔离程序，所述用户界面数据隔离程序被处理器执行时实现上述用户界面数据隔离方法的步骤。

与相关技术相比，本发明实施例提供的一种用户界面数据隔离方法及装置，对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组：将连接到相同实时数据的视图划分在同一个视图组中；其中，所述底层数据按照实时性划分为：实时数据和非实时数据；在底层数据出现实时数据更新时，确定所述用户界面内与所述更新的实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染。本发明实施例的技术方案能够通过底层数据的隔离节省用户界面视图的渲染计算量。

附图说明

图1为现有技术中的react+redux架构示意图；

图2为本发明实施例1的一种用户界面数据隔离方法的流程图；

图3为本发明实施例1中一种视图分组的示意图；

图4为本发明实施例2的一种用户界面数据隔离装置的示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

实施例1

如图2所示，本发明实施例提供了一种用户界面数据隔离方法，包括：

步骤s210，对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组：将连接到相同实时数据的视图划分在同一个视图组中；其中，所述底层数据按照实时性划分为：实时数据和非实时数据；

步骤s220，在底层数据出现实时数据更新时，确定所述用户界面内与所述更新的实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染；

在上述实施方式中，通过对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组，能够在底层数据出现实时数据更新时，仅仅对用户界面内与所述更新的实时数据有关的目标视图组内的视图进行重新渲染，而不对所述用户界面内不属于所述目标视图组的视图进行重新渲染。通过上述底层数据隔离的方式能够节省前端用户界面视图的渲染计算量。

在一种实施方式中，所述用户界面是通过react框架构建的；所述用户界面内的视图是通过redux的接口连接底层数据的。

在一种实施方式中，对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组，还包括：将连接到相同非实时数据的视图划分在同一个视图组中。

比如，如图3所示，用户界面内包括七个视图，其中，视图1和视图2通过redux的接口连接底层的非实时数据(数据1)，因此将视图1和视图2划分在第一视图组中；视图3-视图7通过redux的接口连接底层的实时数据(数据2)，因此将视图3-视图7划分在第二视图组中。在一种实施方式中，第一视图组和第二视图组可以存在交集，也即，第一视图组中的视图也可以连接实时数据(数据2)，第二视图组中的视图也可以连接非实时数据(数据1)，因此，这部分交集内的视图可以同时属于第一视图组和第二视图组。

在一种实施方式中，一个视图可以同时属于多个不同的视图组；所述视图组的类型包括：实时数据对应的视图组，非实时数据对应的视图组；

比如，一个视图可以同时属于不同的实时数据对应的视图组，也可以同时属于不同的非实时数据对应的视图组，也可以同时属于实时数据对应的视图组和非实时数据对应的视图组。

在一种实施方式中，所述方法还包括：在底层数据出现非实时数据更新时，确定所述用户界面内与所述更新的非实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染。

在一种实施方式中，所述实时数据满足以下特征的至少一个：

所述实时数据的更新频率高于阈值；

所述实时数据的更新由服务器侧发起并向用户界面侧推送；

在一种实施方式中，所述非实时数据满足以下特征的至少一个：

所述非实时数据的更新频率低于阈值；

所述非实时数据的更新由用户界面侧发起。

实施例2

如图4所示，本发明实施例提供了一种用户界面数据隔离装置，包括：

分组模块10，对用户界面内的视图按照所述视图连接的底层数据的实时性划分视图组：将连接到相同实时数据的视图划分在同一个视图组中；其中，所述底层数据按照实时性划分为：实时数据和非实时数据；

更新模块20，在底层数据出现实时数据更新时，确定所述用户界面内与所述更新的实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染；

在一种实施方式中，所述用户界面是通过react框架构建的；所述用户界面内的视图是通过redux的接口连接底层数据的。

在一种实施方式中，分组模块，还用于将连接到相同非实时数据的视图划分在同一个视图组中。

在一种实施方式中，所述更新模块还用于在底层数据出现非实时数据更新时，确定所述用户界面内与所述更新的非实时数据连接的目标视图组，对所述目标视图组内的所有视图进行重新渲染，对所述用户界面内不属于所述目标视图组的视图不进行重新渲染。

在一种实施方式中，所述实时数据满足以下特征的至少一个：

所述实时数据的更新频率高于阈值；

所述实时数据的更新由服务器侧发起并向用户界面侧推送；

在一种实施方式中，所述非实时数据满足以下特征的至少一个：

所述非实时数据的更新频率低于阈值；

所述非实时数据的更新由用户界面侧发起。

实施例3

本发明实施例提供了一种用户界面数据隔离装置，包括：

存储器、处理器及存储在所述存储器上并可在所述处理器上运行的用户界面数据隔离程序，所述用户界面数据隔离程序被所述处理器执行时实现上述实施例1中的用户界面数据隔离方法的步骤。

实施例4

本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有用户界面数据隔离程序，所述用户界面数据隔离程序被处理器执行时实现上述实施例1中的用户界面数据隔离方法的步骤。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于ram、rom、eeprom、闪存或其他存储器技术、cd-rom、数字多功能盘(dvd)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

需要说明的是，本发明还可有其他多种实施例，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明所附的权利要求的保护范围。