页面组件间的数据流向控制方法和装置与流程

本申请涉及计算机技术领域，具体涉及页面显示技术领域，尤其涉及页面组件间的数据流向控制方法和装置。

背景技术：

在计算机领域，页面的组件化亦即页面的模块化，在页面的前端展现中，往往将页面的数据元素(dataelement，数据的基本单位，一个数据元素可由若干不可分割的数据项组成)、函数、通讯协议等数据进行封装形成多个页面组件，从而实现页面的组件化。上述封装过程中，页面组件间的数据流向(例如包括数据的配置、渲染、事件间的通信等)控制直接影响页面前端开发的难易程度、效率，甚至工程的可维护性。

现有的页面组件间的数据流向控制方法，往往包括事件通信和代理服务两种方式。其中，事件通信方式中，数据只会从事件触发者到事件注册者，对于结构复杂的页面，容易造成数据流向杂乱无章；代理服务方式中，数据由同一个代理服务管理，由于多个组件同时依赖代理服务，无法实现组件间的低耦合要求。因此，现有的页面组件间的数据流向控制方法存在有效性不高的问题。

技术实现要素：

本申请的目的在于提出一种改进的页面组件间的数据流向控制方法和装置，来解决以上背景技术部分提到的技术问题。

一方面，本申请提供了一种页面组件间的数据流向控制方法，所述方法包括：对页面文档的结构进行解析，获取页面组件间的嵌套层次关系，其中，所述页面组件包括数据元素和回调函数，所述嵌套层次关系中，下级组件嵌套于上级组件；根据所述嵌套层次关系，按照 从上级组件到下级组件的顺序对各页面组件进行渲染，其中，对上级组件渲染时向下级组件传递数据元素和回调函数。

在一些实施例中，所述根据所述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染包括：对上级组件进行渲染时，将下级组件中数据元素的数据类型进行缓存；对下级组件进行渲染时，从缓存中取出所需数据类型进行校验，校验通过则进行渲染。

在一些实施例中，所述校验包括对数据通讯协议的校验、数据类型字段的校验中的至少一种。

在一些实施例中，所述对上级组件渲染时向下级组件传递数据元素和回调函数包括：将下级组件中的数据元素和回调函数通过引用传递的方式进行缓存。

在一些实施例中，所述方法还包括：检测各页面组件的文档属性值是否发生变化，其中，所述文档属性值包括页面组件中的数据元素或回调函数的索引或指针的值；如果任一页面组件的文档属性值发生变化，通过回调函数向发生变化的页面组件的上级组件发送所述变化的变化信息；根据所述变化信息，将发生变化的页面组件的上级组件和发生变化的页面组件重新渲染。

第二方面，本申请提供了一种页面组件间的数据流向控制装置，所述装置包括：解析模块，配置用于对页面文档的结构进行解析，获取页面组件间的嵌套层次关系，其中，所述页面组件包括数据元素和回调函数，所述嵌套层次关系中，下级组件嵌套于上级组件；渲染模块，配置用于根据所述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染，其中，对上级组件渲染时向下级组件传递数据元素和回调函数。

在一些实施例中，所述渲染模块包括：缓存单元，配置用于对上级组件进行渲染时，将下级组件中数据元素的数据类型进行缓存；校验单元，配置用于对下级组件进行渲染时，从缓存中取出所需数据类型进行校验，校验通过则进行渲染。

在一些实施例中，所述校验包括对数据通讯协议的校验、数据类型字段的校验中的至少一种。

在一些实施例中，所述渲染模块还配置用于：将下级组件中的数据元素和回调函数通过引用传递的方式进行缓存。

在一些实施例中，所述装置还包括：检测模块，配置用于检测各页面组件的文档属性值是否发生变化，其中，所述文档属性值包括页面组件中的数据元素或回调函数的索引或指针的值；发送模块，配置用于如果任一页面组件的文档属性值发生变化，通过回调函数向发生变化的页面组件的上级组件发送所述变化的变化信息；所述渲染模块，还配置用于根据所述变化信息，将发生变化的页面组件的上级组件和发生变化的页面组件重新渲染。

本申请提供的页面组件间的数据流向控制方法和装置，通过对页面文档的结构进行解析，获取页面组件间的嵌套层次关系，其中，上述嵌套层次关系中，下级组件嵌套于上级组件，页面组件包括数据元素和回调函数，然后根据上述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染，其中，在对上级组件渲染时，向下级组件传递数据元素和回调函数。由于按照从上级组件到下级组件的顺序对各页面组件进行渲染，且渲染过程中由上级组件向下级组件传递数据元素和回调函数，使数据流向单一，且避免使用代理服务，组件间的耦合度低，从而可以提高页面组件间的数据流向控制的有效性。

附图说明

通过阅读参照以下附图所作的对非限制性实施例的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是根据本申请的页面组件间的数据流向控制方法的一个实施例的流程图；

图2是将页面中的数据元素进行封装形成的页面组件间的嵌套层次关系示意图；

图3是根据本申请的页面组件间的数据流向控制方法的一个实施例对图2示出的页面组件进行数据流向控制的示意图；

图4是根据本申请的页面组件间的数据流向控制方法的又一个实 施例的流程图；

图5示出了可以应用本申请实施例的示例性系统架构；

图6是根据本申请的页面组件间的数据流向控制装置的一个实施例的结构示意图；

图7是适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

请参考图1，其示出了页面组件间的数据流向控制方法的一个实施例的流程100。本实施例主要以该方法应用于具有一定运算能力和显示能力的电子设备中来举例说明。该页面组件间的数据流向控制方法，包括以下步骤：

步骤101，对页面文档的结构进行解析，获取页面组件间的嵌套层次关系。

在本实施例中，电子设备可以首先对页面文档的结构进行解析，从而获取页面组件间的嵌套层次关系，其中，页面组件可以包括数据元素和回调函数。在嵌套层次关系中，下级组件嵌套于上级组件。

这里，页面文档可以包括但不限于以下文档中的一种：html(hypertextmarkuplanguage，超文本标记语言)文档、asp(activeserverpages，动态服务器页面)文档、jsp(javaserverpages，java服务器页面)文档等等。文档的结构可以用来表示文档内容的层次关系。文档的结构可以通过各种形式进行记录，例如，文档的结构可以通过dom(documentobjectmodel，文档对象模型)树记录。通过 dom树描述的文档结构，可以将每个树封装成一个页面组件，例如，整个dom树被封装成最大的页面组件，dom树的每个子树被封装成嵌套于该最大的页面组件的下级组件，每个子树下的分子树可以被封装成嵌套于该子树被封装成的页面组件的下级组件，以此类推。

作为一个示例，图2示出了将页面中的数据元素进行封装形成页面组件间的嵌套层次关系示意图。如图2所示，页面201包括两个较大版块2011、2012，版块2011包括数据元素20111、20112和20113，版块2012包括数据元素20121和20122，它们分别被封装成对应页面201的页面组件202，页面组件202的下级组件页面组件2021和2022，页面组件2021的下级组件页面组件20211、20212和20213，页面组件2022的下级组件页面组件20221和20222。其中，电子设备对页面201的结构进行解析得到的嵌套层次关系为：页面组件2021和2022嵌套于页面组件202，页面组件20211、20212和20213嵌套于页面组件2021，页面组件20221和20222嵌套于页面组件2022。

其中，每个页面组件的最小单元可以包括数据元素和回调函数。这里，回调函数是一个通过指针调用的函数，例如，把函数a的指针或地址作为参数传递给另一个函数b，函数b可以通过函数a的指针或地址来调用函数a，则函数a是一个回调函数。数据元素例如可以一本书的书目信息，而书目信息的每一项(如书名、作者名等)分别为一个数据项。

步骤102，根据上述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染。

在本实施例中，电子设备接着可以根据步骤101获取的嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染。其中，在上级组件渲染过程中，可以向下级组件传递下级组件需要的数据元素和回调函数。从而，页面组件中数据元素和回调函数的数据流向为上级组件到下级组件。

在前端开发的页面渲染过程中，往往会根据数据元素构建渲染树，对各个数据元素进行位置计算、样式计算等等，然后对各个数据元素进行描绘。本实施例中，电子设备可以根据页面组件的嵌套层次关系 确定页面组件的渲染顺序，对各页面组件按照从上级组件到下级组件的顺序进行渲染。

请参考图3，其示出了对图2所示的页面进行渲染时页面组件间的数据流向。如图3所示，电子设备首先将页面201的数据元素、回调函数及页面组件间的通信协议进行解析，并发送给页面组件202，接着，在对页面组件202进行渲染时，将页面组件2021和2022中的数据类型、回调函数分别传递给页面组件2021和2022，例如在一些实现中，电子设备可以分别将页面组件2021、页面组件2022这两个下级组件中的数据元素、回调函数以及数据元素的数据类型等进行缓存，在对页面组件2021、页面组件2022分别进行渲染时，从缓存中取出相应页面组件所需的数据元素、数据类型和回调函数进行渲染。在对页面组件2021进行渲染时，分别对其下级组件页面组件20211、20212、20213的数据元素、回调函数以及数据元素的数据类型等进行缓存；在对页面组件2022进行渲染时，分别对其下级组件页面组件20221、20222的数据元素、回调函数以及数据元素的数据类型等进行缓存；以次类推。每个页面组件而言，其数据元素、回调函数以及数据元素的数据类型都可以存储在数据存储区301中，数据存储区中的这些数据组成了页面201。图3中示出的页面组件间的数据流向从上级组件到下级组件，流向单一。

在本实施例的一些可选实现方式中，电子设备根据嵌套层次关系对各页面组件进行渲染时，对上级组件进行渲染过程中将其下级组件中数据元素、回调函数以及数据元素的数据类型进行缓存，在对下级组件进行渲染时，可以先从缓存中取出所需数据类型进行校验，校验通过后再对该下级组件进行渲染。可选地，下级组件对所需数据类型的校验可以包括但不限于对数据通讯协议的校验、数据类型字段的校验中的至少一种。当电子设备在校验过程中确定缓存中数据元素的数据类型字段与所需数据类型字段一致时，可以确定校验通过，此时，电子设备可以将符合所需数据类型的数据元素保存到相应页面组件的存储区(如页面组件的声明state等)中，并触发预设的渲染方法(如render方法等)对该页面组件进行渲染。当电子设备在校验过程中确 定缓存中数据元素的数据类型字段与所需数据类型字段不一致时，可以进一步确定数据异常，还可以给出数据异常通知。

在本实施例的一些可选实现方式中，对上级组件渲染时向下级组件传递数据元素和回调函数包括：将下级组件中的数据元素和回调函数通过引用传递的方式进行缓存。引用传递，一般是指在调用函数时传递实际参数的地址。这里，电子设备可以将数据元素或回调函数的地址(如索引或指针的值)传递给下级组件，下级组件在读取数据元素或调用回调函数时，可以通过对数据元素或回调函数的地址的改变来改变所读取的数据元素或所调用的回调函数。

在本实施例中，通过对页面文档的结构进行解析，获取各页面组件间的嵌套层次关系，然后按照嵌套层次关系从上级组件到下级组件的顺序对各页面组件进行渲染，且渲染过程中由上级组件向下级组件传递数据元素和回调函数，使数据流向单一，且不需使用代理服务，组件间的耦合度低，从而可以提高页面组件间的数据流向控制的有效性。

请参考图4，图4示出了根据本申请的页面组件间的数据流向控制方法的又一个实施例的流程400。如图4所示，流程400包括：

步骤401，对页面文档的结构进行解析，获取页面组件间的嵌套层次关系。

在本实施例中，电子设备可以首先对页面文档的结构进行解析，从而获取页面组件间的嵌套层次关系，其中，页面组件可以包括数据元素和回调函数。例如，电子设备可以通过页面文档的结构，将页面封装成多个不同层次的页面组件，每个页面组件的最小单元可以包括数据元素和回调函数。不同层次的页面组件间可以具有嵌套关系，构成页面组件间的嵌套层次关系。在该嵌套层次关系中，下级组件嵌套于上级组件。

步骤402，根据上述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染。

在本实施例中，电子设备接着可以根据步骤401获取的嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染。其 中，在上级组件渲染过程中，可以向下级组件传递下级组件需要的数据元素和回调函数。从而，页面组件中数据元素和回调函数的数据流向为上级组件到下级组件。

步骤403，检测各页面组件的文档属性值是否发生变化。

在本实施例中，电子设备可以在页面组件的渲染过程中或者渲染完成后，检测页面组件的文档属性值是否发生变化。这里，页面组件的文档属性可以用来表示页面组件中的各文档对象(如html文档对象)的属性，例如数据元素或回调函数的引用类型—索引或指针，页面组件的文档属性值可以是上述索引或指针的值。

可以理解，当页面组件的文档属性值发生变化时，表示该页面组件有新的数据元素加入，或者数据元素或回调函数的索引或指针的值发生变化，即数据元素或回调函数发生变化。

步骤404，如果任一页面组件的文档属性值发生变化，通过回调函数向发生变化的页面组件的上级组件发送上述变化的变化信息。

在本实施例中，如果任一页面组件的文档属性值发生变化，电子设备可以将上述变化的变化信息通过回调函数发送给其上级组件。这里，变化信息可以包括发生变化的数据元素或回调函数，以及其变化的属性、变化前后的属性值等。

作为示例，请参考图3，如果电子设备检测到页面组件20211的某个数据元素(例如一个下拉框)的文档属性值发生变化，则可以通过调用页面组件2021中的回调函数将变化信息发送给页面组件2021，此时，电子设备可以继续检测页面组件2021的文档属性值是否发生变化，如果发生变化，则将页面组件2021的变化信息发送给页面组件202，如果不发生变化(如仅改变了相应页面组件的state等)，则页面组件2021接收页面组件20211发送的变化信息并根据变化信息对自身数据或对下级组件的数据元素或回调函数的传递逻辑进行调整。

步骤405，根据上述变化信息，将发生变化的页面组件的上级组件和发生变化的页面组件重新渲染。

在本实施例中，电子设备可以根据上述变化信息，将发生变化的页面组件的上级组件和发生变化的页面组件仍按照从上级组件到下级 组件的顺序重新渲染。

请参考步骤404中以图3为例给出的示例，页面组件20211的文档属性值发生变化，进一步地，页面组件2021和202的文档属性值发生变化，则电子设备可以依次重新渲染页面组件202、2021、20211。可选地，如果检测到页面组件2021的文档属性值发生变化，电子设备可以进一步检测在该变化的基础上页面组件202和页面组件20211的文档属性值是否发生变化，假设页面组件202的文档属性值没有发生变化，而页面组件20211的文档属性值发生变化，则电子设备可以依次重新渲染页面组件2021和页面组件20211。渲染过程和步骤402中一致，对上级组件进行渲染时向下级组件传递数据元素和回调函数，在此不再赘述。

在本实施例中，上述实现流程中的步骤401、步骤402分别与前述实施例中的步骤201、步骤202基本相同，在此不再赘述。

从图4中可以看出，与图2对应的实施例不同的是，本实施例中的页面组件间的数据流向控制方法的流程400增加了步骤403、404、405。通过增加的步骤403、404、405，本实施例突出了在页面组件的文档属性值发生改变时对数据流向的控制，数据流向仍然为从上级组件到下级组件，保证了数据流向的单一，进一步提高页面组件间的数据流向控制的有效性。

请参考图5，图5示出了可以应用本申请实施例的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、网络503和服务器504。网络503用以在终端设备501、502和服务器504之间提供通信链路的介质。网络503可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

终端设备501、502可以通过网络503与服务器504交互，以接收或发送消息等。终端设备501、502上可以安装有各种通讯客户端应用，例如浏览器应用、搜索类应用、购物类应用、理财类应用、地图类应用、社交平台应用、邮箱客户端、即时通信工具等等。

终端设备501、502可以是支持浏览器应用等安装于其上的各种电 子设备，包括但不限于智能手机、智能手表、平板电脑、个人数字助理、电子书阅读器、mp3播放器(movingpictureexpertsgroupaudiolayeriii，动态影像专家压缩标准音频层面3)、mp4(movingpictureexpertsgroupaudiolayeriv，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器504可以是提供各种服务的服务器。例如服务器504可以是对终端设备501、502的浏览器应用等提供支持的后台服务器等。服务器可以对接收到的数据进行存储、生成等处理，并将处理结果反馈给终端设备。

需要说明的是，本申请实施例所提供的页面组件间的数据流向控制方法一般通过终端设备501、502执行，但在一些情况下也可以通过服务器504执行，本申请对此不做限定。相应地，本申请实施例所提供的页面组件间的数据流向控制装置一般设置在端设备501、502中，也可以设置在服务器504中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

进一步参考图6，作为对上述各图所示方法的实现，本申请提供了一种页面组件间的数据流向控制装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于电子设备(例如图5所示的终端设备501、502等)中。

如图6所示，本实施例所述的页面组件间的数据流向控制装置600包括：解析模块601和渲染模块602。其中，解析模块601可以配置用于对页面文档的结构进行解析，获取页面组件间的嵌套层次关系，其中，页面组件包括数据元素和回调函数，该嵌套层次关系中，下级组件嵌套于上级组件；渲染模块602可以配置用于根据上述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染，其中，对上级组件渲染时向下级组件传递数据元素和回调函数。

在本实施例中，解析模块601首先可以对页面文档的结构进行解析，从而获取页面组件间的嵌套层次关系，其中，页面组件可以包括数据元素和回调函数。在嵌套层次关系中，下级组件嵌套于上级组件。 这里，页面文档可以包括但不限于以下文档中的一种：html文档、asp文档、jsp文档等等。

在本实施例中，渲染模块602接着可以根据解析模块601获取的嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染。其中，在上级组件渲染过程中，可以向下级组件传递下级组件需要的数据元素和回调函数。从而，页面组件中数据元素和回调函数的数据流向为上级组件到下级组件。

在本实施例的一些可选实现方式中，渲染模块602可以包括缓存单元(未示出)和校验单元(未示出)。其中：缓存单元可以配置用于对上级组件进行渲染时，将下级组件中数据元素的数据类型进行缓存；校验单元可以配置用于对下级组件进行渲染时，从缓存中取出所需数据类型进行校验，校验通过则进行渲染。可选地，校验单元的校验包括对数据通讯协议的校验、数据类型字段的校验中的至少一种。

在本实施例的一些可选实现方式中，渲染模块602还可以配置用于：将下级组件中的数据元素和回调函数通过引用传递的方式进行缓存。这里，渲染模块602在对上级组件进行渲染时，可以将下级组件的数据元素或回调函数的地址(如索引或指针的值)传递给下级组件，下级组件在读取数据元素或调用回调函数时，可以通过对数据元素或回调函数的地址的改变来改变所读取的数据元素或所调用的回调函数。

在本实施例的一些可选实现方式中，装置600还可以包括检测模块(未示出)和发送模块(未示出)。其中：检测模块可以配置用于检测各页面组件的文档属性值是否发生变化，其中，文档属性值包括页面组件中的数据元素或回调函数的索引或指针的值；发送模块可以配置用于如果任一页面组件的文档属性值发生变化，通过回调函数向发生变化的页面组件的上级组件发送所述变化的变化信息。此时，渲染模块602还可以配置用于根据上述变化信息，将发生变化的页面组件的上级组件和发生变化的页面组件重新渲染。

值得说明的是，页面组件间的数据流向控制装置600中记载的诸模块或单元与参考图2描述的方法中的各个步骤相对应。由此，上文 针对方法描述的操作和特征同样适用于页面组件间的数据流向控制装置600及其中包含的模块或单元，在此不再赘述。

本领域技术人员可以理解，上述页面组件间的数据流向控制装置600还包括一些其他公知结构，例如处理器、存储器等，为了不必要地模糊本公开的实施例，这些公知的结构在图6中未示出。

下面参考图7，其示出了适于用来实现本申请实施例的服务器或终端的计算机系统700的结构示意图。

如图7所示，计算机系统700包括中央处理单元(cpu)701，其可以根据存储在只读存储器(rom)702中的程序或者从存储部分708加载到随机访问存储器(ram)703中的程序而执行各种适当的动作和处理。在ram703中，还存储有系统700操作所需的各种程序和数据。cpu701、rom702以及ram703通过总线704彼此相连。输入/输出(i/o)接口705也连接至总线704。

以下部件连接至i/o接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至i/o接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。

本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括解析模块和渲染模块。其中这些模 块的名称在某种情况下并不构成对该模块本身的限定，例如，分组模块还可以被描述为“配置用于对页面文档的结构进行解析，获取页面组件间的嵌套层次关系的模块”。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入终端中的计算机可读存储介质。所述计算机可读存储介质存储有一个或者一个以上程序，当所述程序被一个或者一个以上的处理器执行时，使得所述设备：对页面文档的结构进行解析，获取页面组件间的嵌套层次关系，其中，所述页面组件包括数据元素和回调函数，所述嵌套层次关系中，下级组件嵌套于上级组件；根据所述嵌套层次关系，按照从上级组件到下级组件的顺序对各页面组件进行渲染，其中，对上级组件渲染时向下级组件传递数据元素和回调函数。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。