CN112540820A - 一种用户界面的更新方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供了一种用户界面的更新方法、装置及电子设备，用户界面的更新方法包括利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。本发明实施例可以提升用户界面的更新效率。

Description

一种用户界面的更新方法、装置及电子设备

技术领域

本发明涉及计算机技术领域，特别是涉及一种用户界面的更新方法、装置及电子设备。

背景技术

随着计算机技术的不断发展，硬件性能的不断提高，这使得设计更加复杂的用户界面(User Interface，UI)成为可能。开发者可以在用户界面的数据，例如用户头像或者用户积分等变化的情况下，修改数据源中对应的数据，以实现用户界面的更新。

目前，对于游戏开发程序而言，如需在数据源变化时，更新客户端的用户界面，则需要开发者寻找修改的数据所属的UI节点，修改对应的UI节点，以通过UI节点对应的渲染函数对对应的用户界面区域重新渲染，从而更新用户界面。然而，在多人开发场景中，当前开发者修改的数据所对应的UI节点可能被其他开发者修改，开发者容易寻找到错误的UI节点，并对错误的用户界面区域进行渲染，导致更新用户界面时出错较多，从而更新用户界面的效率较低。

发明内容

本发明实施例的目的在于提供一种用户界面的更新方法、装置及电子设备，以解决现有的用户界面的更新效率较低的问题。具体技术方案如下：

在本发明实施的第一方面，首先提供了一种用户界面的更新方法，包括：

利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

在本发明实施的第二方面，还提供了一种用户界面的更新装置，其特征在于，包括：

监听模块，用于利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

渲染模块，用于当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

在本发明实施的又一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面的更新方法。

在本发明实施的又一方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面的更新方法。

本发明实施例提供的用户界面的更新方法，可以采用观察者模式实现自动监听响应数据源的数据变化，并调用相应的渲染函数，基于变化后的数据对用户页面重新进行渲染，生成更新后的用户界面。从而，在响应数据源变化时，无需开发者通过查找变化数据对应节点的方式，手动修改UI节点，再通过UI节点对应的渲染函数对用户界面进行更新渲染，进而减少了渲染出错的现象，提升了用户界面的更新效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1是本发明实施例中的用户界面的更新方法的流程图；

图2是本发明实施例中的用户界面的一种可能的示意图；

图3是本发明实施例中的场景实例图；

图4是本发明实施例中的用户界面的更新装置的结构示意图；

图5是本发明实施例中的电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。

游戏开发软件中，开发者可以通过游戏开发软件快速生成代码、编辑资源和动画，最终输出适合于多个平台的游戏产品。然而如需在数据修改时，更新客户端的用户界面，则需要开发者寻找修改的数据所属的UI节点，修改对应的UI节点，以通过UI节点对应的渲染函数对对应的用户界面下的用户页面，或者用户页面中的区域重新渲染，从而更新用户界面。该方式容易由于节点变动导致渲染出错，基于此，本发明实施例提供了一种用户界面的更新方法。

应理解，本发明实施例提供的用户界面的更新方法，可以应用但不限于任意游戏开发软件的开发过程中，以提升开发效率。示例性的，可以应用于cocos游戏开发过程中。在利用本发明实施例提供的方法进行开发的过程中，开发者只需对数据源中的相应数据重新赋值，即可自动更新与相应数据绑定的用户界面。

当然，本发明实施例提供的用户界面的更新方法也可以应用于产品上线后的运营过程中，从而减少用户界面错误渲染的事件，提升用户侧的体验。示例性地，在一可选的实施例中，用户在客户端执行第一操作时，例如在执行修改头像或者昵称等操作时，向电子设备发送修改后的页面数据，开发者可以根据接收到的页面数据对数据源的相应数据进行修改，而后在电子设备上采用本发明实施例提供的用户界面的更新方法对用户界面进行更新。

在另一可选的实施例中，服务端可以实时向电子设备发送当前的页面数据，电子设备可以截获当前的页面数据，并对数据源的相应数据进行修改，而后采用本发明实施例提供的用户界面的更新方法对用户界面进行更新。

参见图1，图1是本发明实施例提供的一种用户界面的更新方法的流程图，如图1所示，包括以下步骤：

步骤101、利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据。

步骤102、当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

在上述步骤101中，上述渲染函数对响应数据源的观察监听过程，可以基于观察者模式实现。通常地，在基于JavaScript(可简称为JS)语言的观察者模式中，多个观察者可以同时观察监听一个主题对象(也即被观察对象)，在被观察对象的状态发生变化时，会通知所有观察者，使所有观察者可以进行相应的变化，其流程通常为：通过Java或JavaScript等语言的程序代码定义主题对象(Subject)，即被观察对象，被观察对象可以存在预定义的属性状态，用于指向被观察对象中预设的数据，在预设的数据发生变化的情况下，上述被观察对象的属性状态发生变化，观察者可以通过监听被观察对象的属性状态，确定被观察对象中预设的数据是否发生变化。

具体地，可以在被观察对象下创建观察者(Observer)，上述观察者(也可以称为观察对象)可以为代码语言中的函数方法，在上述被观察对象发生变化的情况下，上述被观察对象可以通过查找观察者名称等方式通知观察者，并执行观察者对应的函数方法。

应理解，一个观察者也可以观察监听被观察对象下的部分数据，具体可以通过在被观察对象下创建观察者的监听对象列表实现，每一监听对象可以对应被观察对象中的部分数据，每一观察者可以观察监听被观察对象下的一个监听对象，多个观察者也可以对应被观察对象下的同一监听对象，具体可以根据实际需要进行设置。

在本发明实施例中，上述渲染函数可以理解为上述观察者模式中的观察者，而响应数据源可以理解为观察者模式中的被观察对象。由于上述响应数据源中可以存储用户界面下至少一个用户页面的页面数据，页面数据下可以包括页面不同区域的数据，举例而言，用户的游戏界面中可以包括用户资料页面和物品栏页面等页面，用户资料页面可以包括用户的id、昵称、头像等数据，上述数据分别位于用户资料页面的不同区域内，因此可以分别用不同的字段进行存储，例如“{uid，XXXXX}”、“{nickname，XXXX}”和“{avatar，XXX}”等形式。当然，也可以将上述不同区域的集合看作一个区域，将上述数据用同一字段进行存储，例如“{uid，nickname，avatar}”等形式。

而渲染函数一般是用于渲染一个用户页面，或者一个用户页面上的部分区域。因此，同一用户页面对应渲染函数的个数可以为一个或多个，在用户页面对应一个渲染函数的情况下，一个渲染函数可以观察监听其渲染的用户页面的全部页面数据；在用户页面对应多个渲染函数的情况下，也可以观察监听其渲染的用户页面的部分区域对应的部分页面数据。

具体而言，本发明实施例可以通过JavaScript程序代码将响应数据源定义为被观察对象，并在响应数据源下创建渲染函数观察者的监听对象，监听对象可以为响应数据源中的一个字段，或者一个页面等。

渲染函数可以观察监听一个监听对象，响应数据源可以在其被观察监听的数据发生变化时，通知到对应的渲染函数。具体可以通过渲染函数的函数名在调用栈中查找并执行被观察监听的数据对应的渲染函数，从而利用该渲染函数对用户页面进行渲染。

本发明实施例，可以将JS中已有的观察者和修饰器特性与creator(开发者模式进行结合，取代了现有技术中的页面(UI)更新机制，让渲染过程的关注点从编辑器转移到代码数据上。具体而言，本发明实施例中，通过采用观察者模式的方式，利用渲染函数对响应数据源进行观察监听，从而无论在何处修改响应数据源，均可以自动利用渲染函数对用户页面进行渲染。而在多人开发的环境下，多个开发者可以对同一页面进行开发修改时，均可以自动本方案实现对页面的自动渲染，提升了用户界面的更新效率，除此之外，还提高了代码的可阅读性、可维护性，有利于提升开发效率，进一步的，这还有利于提高开发产品(例如游戏)的线上稳定性。

当然，上述渲染函数对响应数据源的观察监听过程，也可以通过其他模式，例如发布-订阅者模式实现。上述响应数据源也可以理解为发布-订阅者模式中的发布者，而渲染函数也可以理解为发布-订阅者模式中的订阅者，其实现的原理大致相同，在此不再赘述。

上述页面数据可以包括用户界面的任一用户页面上的数据。举例说明，上述页面数据可以包括用户的头像数据、昵称数据和id数据等，在游戏界面的物品栏页面中，上述页面数据还可以包括用户的资源数据，例如等级、金币值或积分值等。在此不作穷举。

应理解，不同用户页面下可能存在相同的页面数据，例如，游戏界面中的物品栏页面和用户资料页面都可以存在用户的昵称、id等资料数据。

在上述步骤101之后，而在步骤102之前，还可以获取当前的响应数据源，通过对当前的响应数据源与先前响应数据源进行比较，从而判断响应数据源是否发生了变化。

上述获取当前响应数据源的步骤，可以为实时获取，也可以为定时获取。具体地，可以通过获取当前响应数据源当前的Value值和此前Value值进行比对，在前后Value值不相等的情况下，利用渲染函数更新用户界面。

在上述步骤102中，上述响应数据源中的数据发生变化的情况，可以是由开发者手动对响应数据源中的数据重新赋值，也可以是通过获取服务端发送的页面数据，对响应数据源中的数据进行更新，在此不作进一步的限定。

应理解，一个用户界面中可以包括多个用户页面，例如游戏界面中可以包括用户资料页面、物品栏页面和商城页面等等。因此，上述响应数据源中的数据，可以为一个用户页面下的至少部分数据，也可以为多个用户页面下的至少部分数据。

由上述内容可知，上述渲染函数可以对上述响应数据源进行观察监听，因此，在上述响应数据源中的数据发生变化的情况下，可以查找并执行与该数据对应的渲染函数，基于变化后的数据对至少一个用户页面，或者至少一个用户页面中的部分区域重新渲染，得到新的用户界面。

本发明实施例提供的用户界面的更新方法，可以采用观察者模式实现自动监听响应数据源的数据变化，并调用相应的渲染函数，基于变化后的数据对用户页面重新进行渲染，生成更新后的用户界面。从而，在响应数据源变化时，无需开发者通过查找变化数据对应节点的方式，手动修改UI节点，再通过UI节点对应的渲染函数对用户界面进行更新渲染，进而减少了渲染出错的现象，提升了用户界面的更新效率。

举例说明，在一种可能的应用场景中，用户在用户界面重新上传头像后，开发者需要将用户重新上传的头像的图像数据更新到响应数据源中，也即对响应数据源中的头像数据进行重新赋值。此时，若上述头像数据被任一渲染函数观察监听，则相当于上述响应数据源中的数据发生变化的情况。此时渲染函数可以基于该头像数据对头像数据所在的至少一个页面重新，或者至少一个页面上的部分区域进行渲染，则可以在用户界面中更新用户的头像。

在另一种可能的应用场景中，用户通过完成时长等待的任务，获取游戏内的资源时，服务端可以将变化后的资源数值发送给用于用户界面更新的电子设备，电子设备对响应数据源中的与资源数据进行修改，若上述资源数据被任一渲染函数观察监听，则也相当于上述响应数据源中的数据发生变化的情况。此渲染函数可以基于该资源数据对资源数据所在的至少一个页面，或者至少一个页面上的部分区域重新进行渲染，则可以实现用户界面的更新。

可选地，上述渲染函数的数目可以为至少一个，且任意两个上述渲染函数观察监听页面数据不完全相同。

在本发明实施例中，如上所述，上述渲染函数可以为至少一个，每一个渲染函数都可以视为一个观察者，对于一个渲染函数而言，可以观察监听渲染函数渲染的区域的数据，也可以观察监听渲染函数渲染的区域所在的页面的区域。

本发明实施例中所提及的全部渲染函数，所观察监听的页面数据的总和，可以为上述响应数据源中的至少部分数据。换句话说，上述响应数据源中也可以存储用户页面上不显示的数据，在此种情况下，渲染函数可以不对用户页面上不显示的数据进行观察监听，从而减少软硬件资源的占用。

可选地，上述步骤102具体可以包括：

当所述响应数据源中的数据发生变化时，获取发生变化数据的数据源标识；

利用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染。

由上述内容可知，可以在响应数据源下创建观察者的监听对象列表，每一监听对象可以对应响应数据源中的部分数据。在本发明实施例中，上述监听对象可以与数据源标识一一对应，上述数据源标识用于标记监听对象所对应的数据。具体地，若上述监听对象为响应数据源中某一字段，则上述数据源标识可以为该字段的字段标识；若上述监听对象为响应数据源中的某一页面，则上述数据源标识可以为该页面的页面标识。

上述响应函数可以与上述数据源标识进行绑定，这样，可以在响应数据源中的数据发生变化的情况下，获取发生变化数据的数据源标识，并用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染，从而在响应数据源变化的情况下，提升了用户页面的渲染效率。

可选地，上述数据源标识包括以下至少一种：发生变化的数据所在页面的页面标识、发生变化的数据所在页面区域的区域标识、发生变化的数据所对应的字段标识。

在本发明实施例中，上述数据源标识可以包括页面标识、区域标识或字段标识中的至少一种，当第一页面的第一区域中的第一字段的数据发生变化时，上述利用所述数据标识所关联的所述渲染函数对所述用户页面进行渲染的步骤可以包括：

利用所述第一页面的页面标识，调用与所述第一页面标识相关联的第一渲染函数，并利用所述第一渲染函数对所述第一页面进行渲染；

或者，

利用所述第一区域的区域标识，调用与所述第一区域标识相关联的第二渲染函数，并利用所述第二渲染函数对所述第一区域进行渲染；

或者，

利用所述第一字段的字段标识，调用与所述第一字段标识相关联的第三渲染函数，并利用所述第三渲染函数对所述第一字段重新渲染。

在本发明实施例中，由上述内容可知，上述渲染函数可以为至少一个，相当于是对响应数据源下的一个页面的页面数据，或者一个页面的部分区域的数据，或者一个字段的数据进行观察监听的观察者。上述第一渲染函数、第二渲染函数和第三渲染函数用于观察监听响应数据源的数据变化，但各自监控的数据范围不同。

在监听对象为响应数据源下的第一页面的情况下，可以将第一渲染函数与页面标识关联绑定，上述第一渲染函数可以观察监听上述第一页面的页面数据。举例而言，若用户界面中的第一页面为用户资料页面，在用户资料页面中的一个或多个数据例如用户的头像、用户的昵称或者用户的ID中至少一个发生变化的情况下，上述第一渲染函数可以基于变化后的页面数据，重新渲染用户资料页面，而不影响用户界面中其他页面。

这样，在上述第一页面的页面数据发生变化时，可以利用第一渲染函数，重新渲染第一页面，从而通过第一渲染函数实现了观察监听用户界面中第一页面，在第一页面的页面数据变化的情况下对第一页面重新渲染，而无需对用户界面中的每一个页面重新渲染，进而提升了用户界面更新的效率。

在监听对象为响应数据源下的第一页面中的第一区域的情况下，可以将第二渲染函数与区域标识关联绑定，上述第二渲染函数可以观察监听上述第一区域的数据。接上例，在用户资料页面中用户的头像、用户的昵称或者用户的ID中的一个，例如用户头像发生变化的情况下，上述用户头像在用户资料页面中的区域可以相当于是上述第一页面中的第一区域，上述第二渲染函数可以基于变化后的用户头像数据，重新渲染用户资料页面的第一区域，而不影响用户资料页面中的其他区域。

在本发明实施例中，由于渲染函数可以实现一个页面的渲染，或者一个页面上的部分区域的渲染，因此上述第二渲染函数可以仅观察页面中第一区域所对应的数据，在上述第一区域所对应的数据变化的情况下，对上述第一区域重新渲染。本发明实施例可以仅对页面中的第一区域对应的数据进行观察监听，从而在第一区域对应的数据变化的情况下无需对整个第一页面重新渲染，进一步提升了用户界面的更新效率。

在监听对象为响应数据源下第一字段的情况下，因此，可以将第三渲染函数与字段标识关联绑定，上述第三渲染函数可以观察监听每一页面中上述第一字段的数据。举例而言，在字段标识对应的第一字段的数据变化时，调用与字段标识关联的第三渲染函数对第一字段所对应的区域进行渲染。

上述第一字段中可以包括上述第一页面的至少部分页面数据，接上例，用户界面中的第一页面可以为用户资料页面，而上述第一字段可以同时包括用户的头像、用户的昵称和用户的ID的数据，上述数据可以以字符串的形式存在于第一字段中。上述第一字段发生变化的情况，可以为对上述第一字段重新赋值的情况。这样，当上述第一字段发生变化时，可以通过上述第三渲染函数，基于第一字段变化后的数据对上述第一字段所对应的区域进行渲染，以字段的形式存放需要观察监听的数据，从而便于对数据进行归类。

本发明实施例可以仅对第一字段所对应的区域进行渲染，而不需对上述第一区域全部重新渲染，从而提升了用户界面的更新效率。

可选地，当第一页面的第一区域中的第一字段的数据发生变化，且上述第一页面的页面标识关联于多个渲染函数时，上述利用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染的步骤可以包括：

基于第一页面的页面标识与第一字段的字段标识，确定与所述页面标识、所述字段标识均关联的第四渲染函数，并利用第四渲染函数对所述第一页面下所述第一字段对应的区域进行渲染。

由上述内容可知，上述第一页面可以划分为多个区域，每一区域可以对应一个字段，而不同字段可能对应不同的渲染函数，因此，上述第一页面的页面标识可能与多个渲染函数关联。在本发明实施例中，可以将页面标识和字段标识与渲染函数关联绑定，这样，在上述第一页面下的第一字段发生变化的情况下，响应数据源可以通过查找与上述页面标识和字段标识均对应的第四渲染函数，并执行上述第四渲染函数对上述第一页面下的第一字段对应的区域进行渲染，而不会渲染其他页面，或者第一页面的其他区域，从而提升了用户界面更新的灵活性。

可选地，当上述第一字段的数据发生变化，且上述第一字段关联于多个第一页面时，上述利用所述数据源标识所关联的渲染函数对上述用户页面进行渲染的步骤可以包括：

基于第一页面的页面标识和所述第一字段的字段标识，确定与所述页面标识、所述字段标识均关联的第五渲染函数，并利用第五渲染函数对上述第一页面下第一字段对应的区域进行渲染。

由上述内容可知，不同页面可以存在相同的页面数据，上述字段标识所对应的第一字段也可以存在于多个第一页面中。在本发明实施例中，可以在第一字段的数据发生变化时，利用上述第五渲染函数对多个上述第一页面下的第一字段对应的区域进行渲染，从而可以统一渲染多个存在第一字段的第一页面，提升了用户界面的更新效率。

参照图2，图2为本发明实施例一种可能的用户界面示意图，如图所示，图中包括游戏画面页面和悬浮于游戏画面页面上显示的用户资料页面，而两个页面中均可以包括资源1、资源2和资源3的资源数据。

若上述资源1的数值发生变化，例如资源根据时间进度由10000变化为11000，则需要在游戏画面页面和用户资料页面上对资源数据1同时更新显示。

若上述游戏画面页面的页面标识为“1”，用户资料页面的页面标识为“2”，资源数据1的字段标识为“gold”，在此种情况下，响应数据源可以调用与上述页面标识“1”和字段标识“gold”均关联的渲染函数，对上述游戏画面页面的a区域重新渲染，同时调用与上述页面标识“2”和字段标识“gold”均关联的渲染函数，对上述用户资料页面上的b区域重新渲染，从而实现了用户界面的更新。

当然，在其他可选的实施例中，也可以在上述资源数据1变化的情况下，通过页面标识“1”和页面标识“2”调用渲染函数，重新渲染游戏画面页面和用户资料页面，具体可以根据实际需要进行设置。

可选地，在上述步骤101之前，上述方法还可以包括：

创建响应函数，所述响应函数用于将数据源标识和渲染函数关联存放于全局变量中。

所述当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染的步骤包括：

当所述响应数据源中的数据发生变化时，将所述全局变量中的数据源标识和渲染函数传入调用栈；

在所述调用栈中调用所述渲染函数，对所述数据源标识所指示的用户页面进行渲染。

在本发明实施例中，上述调用栈可以为JavaScript语言下的调用栈，在执行JavaScript语言时即会形成。在响应数据源中的数据发生变化，需要执行发生变化的数据所对应的渲染函数时，需要将该渲染函数相关的返回地址、参数、本地变量等内容放入调用栈内。

具体地，上述创建响应函数的过程，可以相当于在全局作用域下创建的全局变量中，关联存储数据源标识和数据源标识对应的至少一个渲染函数。这样，由于全局变量的全局作用域使得其可以在任何一个渲染函数需要执行时，被推入调用栈内。因此在任何一个渲染函数需要执行时，可以在调用栈内通过数据源标识找到并执行需要执行的渲染函数。

应理解，上述响应函数可以为一个或多个，且与数据源标识对应。需要说明的是，在不同页面中，可以存在相同的字段，例如在用户界面的用户资料页面和主页面都可以存在用户id这一字段，而观察监听不同页面下的同一字段的渲染函数可能不同。因此，一个字段标识所对应的响应函数可以为一个或多个，每一个响应函数可以关联存储一个字段标识和一个观察监听该字段的渲染函数。

在上述数据源标识为字段标识的情况下，若存在一个需要观察监听的字段，就可以创建至少一个该字段的字段标识对应的响应函数。上述创建响应函数的过程，即为将字段标识和渲染函数A关联存储于上述全局变量中的过程，渲染函数A为与字段标识对应。

与之类似地，在上述数据源标识为页面标识的情况下，由于一个页面的页面数据可能由多个渲染函数进行观察监听。因此上述创建响应函数的过程，即为将页面标识和至少一个渲染函数B，关联存储于上述全局变量中的过程。至少一个渲染函数B与页面标识对应。

在上述数据源标识为页面标识和字段标识的情况下，上述创建响应函数的过程即为将页面标识、字段标识和渲染函数C，关联存储于上述全局变量中的过程。上述渲染函数C，与页面标识和字段标识均对应。

其中，上述页面标识可以为指向用户界面中变化的数据对应的页面的页面id。可以理解的是，任意两个页面的页面标识均不相同，页面标识可以以任意预设的形式存在，包括但不限于：数字字符串或者字母字符串中的至少一种。

上述字段标识可以为指向用户界面中变化的数据对应的字段的字段id。字段标识可以以任意预设的形式存在，包括但不限于：数字字符串或者字母字符串中的至少一种。

本发明实施例可以在调用栈的全局变量中，通过数据源标识的索引找到并执行与数据源标识对应的渲染函数，从而可以减少调用渲染函数的时长，提升了用户界面更新的效率。

可选地，上述将数据源标识和数据源标识对应的渲染函数关联存放于全局变量中的步骤，可以基于修饰器实现。基于修饰器的属性参数和数据源标识创建响应函数，则修饰器在编译时候，可以将渲染函数作为修饰器的属性参数传给数据源标识对应的响应函数，这样，就可以得到渲染函数和数据源标识的关联存储的全局变量。

若通过创建响应函数的方式，将数据源标识和渲染函数关联存储于全局变量中，则当上述响应数据源中的数据发生变化时，可以将上述全局变量传入调用栈内，通过数据源标识调用与所述数据源标识对应的渲染函数，实现对所述用户页面重新进行渲染，从而提升了用户界面的更新效率。

可选地，在上述利用渲染函数对响应数据源进行观察监听的步骤之后，上述方法还可以包括：

获取修改后的第二页面数据；

以所述第二页面数据替换所述响应数据源中存放的第三页面数据。

接上例进行说明，在本发明实施例中，可以通过获取修改后的第二页面数据，对响应数据源中的数据进行修改。上述第二页面数据，可以为用户在用户界面上传的页面数据，可以相当于上例中，用户在用户界面重新上传的头像的图像数据；也可以为服务端实时发送的页面数据，相当于上例中，服务器发送的资源数据等。

在获取到修改后的第二页面数据后，可以以第二页面数据替换响应数据源中存放的第三页面数据。具体地，该步骤可以通过对上述第三页面数据对应的字段重新赋值实现，从而可以实现响应数据源中数据的更新或者修改，引发响应数据源数据的变化。

参照图3，图3是本发明实施例的一种可能的场景实例图。由图3可知，在创建响应数据源时，可以利用渲染函数对响应数据源进行观察监听，而在创建响应函数时，可以通过将数据源标识和渲染函数关联存储，建立渲染函数和响应数据源的绑定关系。在响应数据源的数据变化时，可以通过数据源标识在调用栈中查找并执行对应的渲染函数，实现用户界面的更新。上述数据源标识，具体可以为图3中与实际应用界面绑定的页面ID，其具体实现流程可以参照图1-2以及相关说明，在此不再赘述。

本发明实施例，可以将JS中已有的观察者和修饰器特性与creator(开发者模式进行结合，取代了现有技术中的页面(UI)更新机制，让渲染过程的关注点从编辑器转移到代码数据上。具体而言，本发明实施例中，利用渲染函数对响应数据源进行观察监听，从而无论在何处修改响应数据源，均可以自动利用渲染函数对用户页面进行渲染。而在多人开发的环境下，多个开发者可以对同一页面进行开发修改时，均可以自动本方案实现对页面的自动渲染，提升了用户界面的更新效率，除此之外，还提高了代码的可阅读性、可维护性，有利于提升开发效率，进一步的，这还有利于提高开发产品(例如游戏)的线上稳定性。

需要说明的是，本发明实施例中介绍的多种可选的实施方式，彼此可以相互结合实现，也可以单独实现，对此本发明实施例不作限定。

参见图4，图4是本发明实施例提供的用户界面的更新装置400的结构图，如图4所示，上述用户界面的更新装置400包括：

监听模块410，用于利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

渲染模块420，用于当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

本发明实施例中，可以通过上述监听模块410，利用渲染函数自动监听响应数据源的数据变化，并通过渲染模块420利用所述渲染函数对所述用户页面进行渲染，从而可以用户界面的更新。在响应数据源变化时，无需开发者通过查找变化数据对应节点的方式，手动修改UI节点，再通过UI节点对应的渲染函数对用户界面进行更新渲染，进而减少了渲染出错的现象，提升了用户界面的更新效率。

可选地，所述渲染函数的数目为至少一个，且任意两个所述渲染函数观察监听页面数据不完全相同。

可选地，上述渲染模块420具体可以包括：

获取单元，用于当所述响应数据源中的数据发生变化时，获取发生变化数据的数据源标识；

第一渲染单元，用于利用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染。

可选地，上述数据源标识包括以下至少一种：发生变化的数据所在页面的页面标识、发生变化的数据所在页面区域的区域标识或发生变化的数据所对应的字段标识。

进一步地，上述第一渲染单元具体可以用于：

利用所述第一页面的页面标识，调用与所述第一页面标识相关联的第一渲染函数，并利用所述第一渲染函数对所述第一页面进行渲染；

或者，

利用所述第一区域的区域标识，调用与所述第一区域标识相关联的第二渲染函数，并利用所述第二渲染函数对所述第一区域进行渲染；

或者，

利用所述第一字段的字段标识，调用与所述第一字段标识相关联的第三渲染函数，并利用所述第三渲染函数对所述第一字段对应的区域进行渲染。

可选地，上述渲染单元还可以用于：

基于第一页面的页面标识与第一字段的字段标识，确定与所述页面标识、所述字段标识均关联的第四渲染函数，并利用第四渲染函数对所述第一页面下所述第一字段对应的区域进行渲染。

可选地，上述用户界面的更新装置400还可以包括：

创建模块，用于创建响应函数，所述响应函数用于将数据源标识和渲染函数关联存放于全局变量中。

上述渲染模块420具体可以包括：

传输单元，用于当所述响应数据源中的数据发生变化时，将所述全局变量中的数据源标识和渲染函数传入调用栈；

第二渲染单元，用于通过所述数据源标识调用与所述数据源标识对应的渲染函数，对所述用户页面重新进行渲染。

本发明实施例还提供了一种电子设备，如图5所示，包括处理器501、通信接口502、存储器503和通信总线504，其中，处理器501，通信接口502，存储器503通过通信总线504完成相互间的通信，

存储器503，用于存放计算机程序；

处理器501，用于执行存储器503上所存放的程序时，实现如下步骤：

利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述终端与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的用户界面的更新方法。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的用户界面的更新方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (11)

1.一种用户界面的更新方法，其特征在于，包括：

利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

2.根据权利要求1所述的用户界面的更新方法，其特征在于，所述渲染函数的数目为至少一个，且任意两个所述渲染函数观察监听页面数据不完全相同。

3.根据权利要求1所述的用户界面的更新方法，其特征在于，所述当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染的步骤，包括：

当所述响应数据源中的数据发生变化时，获取发生变化数据的数据源标识；

利用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染。

4.根据权利要求3所述的用户界面的更新方法，其特征在于，所述数据源标识包括以下至少一种：发生变化的数据所在页面的页面标识、发生变化的数据所在页面区域的区域标识、发生变化的数据所对应的字段标识。

5.根据权利要求3所述的用户界面的更新方法，其特征在于，当第一页面的第一区域中的第一字段的数据发生变化时，所述利用所述数据标识所关联的所述渲染函数对所述用户页面进行渲染的步骤，包括：

利用所述第一页面的页面标识，调用与所述第一页面标识相关联的第一渲染函数，并利用所述第一渲染函数对所述第一页面进行渲染；

或者，

利用所述第一区域的区域标识，调用与所述第一区域标识相关联的第二渲染函数，并利用所述第二渲染函数对所述第一区域进行渲染；

或者，

利用所述第一字段的字段标识，调用与所述第一字段标识相关联的第三渲染函数，并利用所述第三渲染函数对所述第一字段对应的区域进行渲染。

6.根据权利要求3所述的用户界面的更新方法，其特征在于，当第一页面的第一区域中的第一字段的数据发生变化，且所述第一页面的页面标识关联于多个渲染函数时，所述利用所述数据源标识所关联的所述渲染函数对所述用户页面进行渲染的步骤，包括：

基于第一页面的页面标识与第一字段的字段标识，确定与所述页面标识、所述字段标识均关联的第四渲染函数，并利用所述第四渲染函数对所述第一页面下所述第一字段对应的区域进行渲染。

7.根据权利要求3所述的用户界面的更新方法，其特征在于，当第一字段的数据发生变化，且所述第一字段关联于多个第一页面时，所述利用所述数据源标识所关联的渲染函数对所述用户页面进行渲染的步骤，包括：

基于第一页面的页面标识与第一字段的字段标识，确定与所述页面标识、所述字段标识均关联的第五渲染函数，并利用所述第五渲染函数对所述第一页面下所述第一字段对应的区域进行渲染。

8.根据权利要求1-7任一项所述的用户界面的更新方法，其特征在于，

在所述利用渲染函数对响应数据源进行观察监听的步骤之前，所述方法还包括：

创建响应函数，所述响应函数用于将数据源标识和渲染函数关联存放于全局变量中；

所述当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染的步骤，包括：

当所述响应数据源中的数据发生变化时，将所述全局变量中的数据源标识和渲染函数传入调用栈；

在所述调用栈中调用所述渲染函数，对所述数据源标识所指示的用户页面进行渲染。

9.一种用户界面的更新装置，其特征在于，包括：

监听模块，用于利用渲染函数对响应数据源进行观察监听，其中，所述响应数据源用于存储用户页面的页面数据；

渲染模块，用于当所述响应数据源中的数据发生变化时，利用所述渲染函数对所述用户页面进行渲染。

10.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-7中任一所述的方法步骤。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-8中任一所述的方法。

Images