CN114567623A - 一种页面显示方法及装置 - Google Patents

Abstract

本申请实施例提供一种页面显示方法及装置，该方法包括：在显示第一页面期间，接收页面转换指令；页面转换指令用于指示将显示页面从第一页面转换为第二页面；根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件；第一页面的上下文对象是通过前端应用中的上下文管理模块针对第一页面的第一状态组件创建的；第一状态组件是根据全局状态组件和第一页面的初始状态组件生成的；全局状态组件用于定义前端应用的各页面的公共状态参数；前端应用中定义有各页面的初始状态参数的各初始状态组件；根据第二状态组件显示第二页面。上述方法用于消除现有技术中各页面的多层级组件严重耦合和页面显示方案中繁琐的嵌套组件问题。

Description

一种页面显示方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面显示方法及装置。

背景技术

React是一个用于构建用户界面的JAVASCRIPT库，是目前主流的前端框架之一，主要支持单向的数据流。在使用React开发页面时，可以借助状态管理工具Redux管理各个页面的组件的参数。

现有技术中React开发的页面之间若存在组件的参数复用，则Redux需要将页面对应的组件嵌套，保证参数的流转。如，父页面和子页面共用同一组件的参数，则将父页面与子页面的对应组件嵌套。而这种管理方式导致多个组件参数在多层级组件间一级一级通过prop来传递，子组件严重依赖父组件传递的参数，很容易导致组件间的严重耦合，增加前端应用运维难度。

因此，现在亟需一种页面显示方法及装置，用于消除现有技术中各页面的多层级组件严重耦合和页面显示方案中繁琐的嵌套组件问题。

发明内容

本申请实施例提供一种页面显示方法及装置，用于消除现有技术中各页面的多层级组件严重耦合和页面显示方案中繁琐的嵌套组件问题。

第一方面，本申请实施例提供一种页面显示方法，该方法包括：

前端应用在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

所述前端应用根据第一页面的上下文对象、全局状态组件和所述第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

所述前端应用根据所述第二状态组件显示所述第二页面。

上述方法中，前端应用中定义有各页面的初始状态参数的各初始状态组件，所述全局状态组件用于定义所述前端应用的各页面的公共状态参数。如此，相比于现有技术中针对每个页面都编写对应的包括初始状态参数和公共状态参数的状态组件来说，本申请中每个页面的初始状态组件可以预加载全局状态组件得到页面对应的状态组件，降低每个页面的状态组件均对全局状态组件的重复撰写造成的工作量，简化前端应用。前端应用通过上下文管理模块的上下文对象管理所述第一页面的第一状态组件。且所述前端应用根据所述第一页面的上下文对象、所述全局状态组件和第二页面的初始状态组件生成第二状态组件，所述前端应用根据所述第二状态组件显示所述第二页面。如此，上下文对象可以作为各页面转换过程中，多个页面存在共用状态参数时，作为该共用状态参数的中转站，消除现有技术中由于组件间需要共用状态参数，而通过组件嵌套、组件间耦合方式来实现参数流转导致的运维困难问题。

可选的，还包括：

所述前端应用在显示所述第一页面期间，接收页面更新指令；所述页面更新指令用于指示对所述第一页面进行更新显示；

所述前端应用通过状态更新函数，将所述页面更新指令中的变更页面值，更新至所述第一状态组件中；所述状态更新函数用于对状态参数进行更新操作；

所述前端应用根据更新的第一状态组件，更新显示第一页面。

上述方法中，前端应用通过状态更新函数将页面更新指令中的变更页面值更新至所述第一状态组件中以更新显示页面。如此，保证前端应用显示页面的第一状态组件中的状态参数及时更新，也可以说，保证显示页面的页面值及时更新。

可选的，接收页面更新指令之后，还包括：所述前端应用通过所述上下文管理模块中的提供方法，更新所述第一页面的上下文对象。

上述方法中，前端应用在接收页面更新指令后，不仅需要通过状态更新函数更新第一状态组件，还需要通过上下文管理模块中的提供方法，更新第一页面的上下文对象。如此，保证第一页面的上下文对象中的第一状态组件及时更新，进一步，保证若发生页面转换时，第二页面可以获取最准确的第一页面的上下文对象中的第一状态组件。

可选的，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用通过所述第一页面的上下文对象中的订阅方法，获取所述第一状态组件中的共用状态参数，所述共用状态参数为所述第一页面的初始状态组件与所述第二页面的初始状态组件中共同应用的状态参数；

所述前端应用根据所述共用状态参数、所述全局状态组件和所述第二页面的初始状态组件生成第二状态组件。

上述方法中，第一页面的上下文对象提供的订阅方法给前端应用，也可以是第一页面的上下文对象提供的订阅方法给第二页面中需要共用状态参数的组件，使得第二页面中的组件可以获取共用状态参数。如此，通过在第一页面的上下文对象中保留第一页面的第一状态组件，若页面转换时，第二页面可以直接基于第一页面的上下文对象中的订阅方法，获取第一状态组件中的共用状态参数。解决现有技术中将第一页面和第二页面中的对应存在共用状态参数的组件嵌套编写，并在页面转换的时候，第一页面和第二页面的对应组件需要层级传递参数，尤其在多页面复用大量共用状态参数时，页面组件嵌套关系复杂，各页面的组件之间的参数传递层级多，不利于前端应用的运行维护的问题。

可选的，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件之前，还包括：

所述前端应用根据所述页面转换指令中的数据获取项生成数据获取请求，并将所述数据获取请求发送至后台服务端；

所述前端应用接收所述后台服务端返回的所述数据获取项的请求结果；

根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用根据所述第一页面的上下文对象、所述全局状态组件、所述第二页面的初始状态组件和所述请求结果生成第二状态组件。

上述方法中，当页面转换指令中包含数据获取项时，前端应用根据该数据获取项生成数据获取请求，并将该数据获取请求发送至后台服务端，之后，接收后台服务端返回的该数据获取项的请求结果。进一步，在生成第二页面对应的第二状态组件时，还加入该请求结果中的对应内容。如此，保证第二页面中内容的完整性。

可选的，还包括：所述前端应用通过集成在状态更新函数中的日志组件，记录所述前端应用中状态参数变化信息；所述状态更新函数用于对状态参数进行更新。

上述方法中，将日志组件集成在状态更新函数中，是的日志组件可以及时监控到页面的任何状态参数的变化，得到前端应用中状态参数变化轨迹。便于前端应用的运行维护。

第二方面，本申请实施例提供一种前端应用，该前端应用包括：

初始状态组件，用于定义所述前端应用中对应页面的初始状态参数；

全局状态组件，用于定义所述前端应用中各页面的公共状态参数；

状态更新函数，用于定义页面中操作状态参数的逻辑，对页面中的状态参数进行更新；

上下文管理模块，用于生成上下文对象，并基于所述上下文对象管理页面对应的状态组件，在所述前端应用进行第一页面至第二页面的转换时，通过所述上下文对象为所述第二页面提供所述第一页面的状态组件，所述页面对应的状态组件是根据所述全局状态组件和所述页面的初始状态组件获取的。

可选的，还包括：日志组件，集成在所述状态更新函数中，用于定义页面的状态参数监控逻辑，在页面的状态参数更新过程中记录状态参数变化信息，所述状态更新函数用于对状态参数进行更新。

第三方面，本申请实施例提供一种页面显示装置，该装置包括：

显示模块，用于在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

处理模块，用于根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

所述显示模块还用于，根据所述第二状态组件显示所述第二页面。

第四方面，本申请实施例还提供一种计算设备，包括：存储器，用于存储程序；处理器，用于调用所述存储器中存储的程序，按照获得的程序执行如第一方面的各种可能的设计中所述的方法。

第五方面，本申请实施例还提供一种计算机可读非易失性存储介质，包括计算机可读程序，当计算机读取并执行所述计算机可读程序时，使得计算机执行如第一方面的各种可能的设计中所述的方法。

第六方面，本申请实施例提供一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行第一方面及第一方面任一种可能的设计中的页面显示方法。

第七方面，本申请实施例提供一种芯片系统，芯片系统包括：处理器；当处理器执行存储器中存储的计算机指令时，电子设备执行第一方面及第一方面任一种可能的设计中的页面显示方法。

本申请的这些实现方式或其他实现方式在以下实施例的描述中会更加简明易懂。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种页面显示的架构示意图；

图2为本申请实施例提供的一种页面显示的架构示意图；

图3为本申请实施例提供的一种页面显示方法的流程示意图；

图4为本申请实施例提供的一种页面显示方法的流程示意图；

图5为本申请实施例提供的一种页面显示方法的流程示意图；

图6为本申请实施例提供的一种页面显示装置示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

图1为本申请实施例提供的一种页面显示的系统架构，页面显示系统中包括：

页面模块，用于定义各个页面逻辑。

即，页面模块中定义了页面的显示逻辑，如，可以定义页面的列表组件、搜索框组件、弹框组件等等。

各页面初始状态组件，用于定义所述前端应用中对应页面的初始状态参数；

即，页面显示系统中针对每个页面设置有该页面对应的初始状态组件用于提供该页面显示需要的初始状态参数。

全局状态组件，用于定义所述前端应用中各页面的公共状态参数；

即，页面显示系统中各页面存在公共状态参数，同一个公共状态参数在不同页面显示时是相同的，则将这种公共状态参数设置在全局状态组件中，当一个页面需要显示时，该页面的初始状态组件对应加载全局状态组件就可以获取该页面的完整的状态组件。

数据仓库，用于为页面提供该页面对应的状态组件，使得该页面正常显示。

即，页面显示时，该页面的页面模块在该数据仓库中加载该页面对应的初始状态组件，进一步，初始状态组件加载全局状态组件得到该页面的完整的状态组件，页面模块基于该数据仓库中的该页面的完整的状态组件进行显示。另外，数据仓库中形成页面对应的完整的状态组件时，还可能会包含其它数据，如，从后台服务端获取的相关数据。

更新模块，包含状态更新函数，该状态更新函数，用于定义页面中操作状态参数的逻辑，对页面中的状态参数进行更新；

即，状态更新函数在确定页面中的状态参数存在对应操作时，并确定该操作变更了页面的状态参数，则对页面中的状态参数(可以对该页面在数据仓库中的状态组件中的对应状态参数进行变更)进行对应的更新，保证页面准确响应状态参数对应的操作。且状态更新函数中还集成有日志组件，该日志组件用于定义页面的状态参数监控逻辑，在页面的状态参数更新过程中记录状态参数变化信息，即，将该日志组件集成在状态更新函数中，则该日志组件可以及时监控到状态更新函数对状态参数的更新轨迹。

上下文管理模块，包含上下文管理函数，用于生成上下文对象，并基于所述上下文对象管理页面对应的状态组件，在所述前端应用进行第一页面至第二页面的转换时，通过所述上下文对象为所述第二页面提供所述第一页面的状态组件，所述页面对应的状态组件是根据所述全局状态组件和所述页面的初始状态组件获取的。

即，上下文管理函数可以生成上下文对象，该上下文对象可以保留页面对应的最新、最准确的状态组件。在页面进行转换时，该上下文对象可以作为一个状态组件的“中转站”的形象，为转换目标页面-第二页面提供订阅方法，令第二页面可以获取第一页面的状态参数。如此，无需将页面间的需要共用状态参数的组件嵌套编写，无需多个组件层级传递参数，降低页面显示系统的复杂度，便于页面显示系统的运行维护。这里需要说明的是，上下文对象可以是在页面显示系统开发阶段就生成的，也可以是根据页面显示即时生成的，这里对上下文对象的生成时机不做限制。另外，上述页面显示系统与前端应用可以相同，也可以不同，如，页面显示系统可以属于前端应用中的一部分，或者，前端应用中通过页面显示系统中的部分功能显示界面，这里对页面显示系统和前端应用的具体设置方式不做限制。

基于上述系统框架，本申请实施例提供的一种页面显示的系统架构，如图2所示，包括：

前端应用201在接收触发指令后，页面模块中第一页面的页面模块加载该第一页面对应的初始状态组件，该第一页面的初始状态组件进一步加载全局状态组件，得到该第一页面的第一状态组件。前端应用201显示该第一页面后，接收页面更新指令。前端应用201通过前端应用201中的状态更新函数，将页面更新指令中的变更页面值，更新至第一状态组件中。前端应用201根据更新的第一状态组件，更新显示第一页面。且前端应用201还通过上下文管理模块中的提供方法，更新该第一页面的保留该第一页面第一状态组件的上下文对象。前端应用201在显示第一页面期间，接收页面转换指令，确定该页面转换指令中包含数据获取项，则根据该数据获取项生成数据获取请求，将该数据获取请求发送至后台服务端202。后台服务端202根据该数据获取请求生成该数据获取项对应的请求结果，将该请求结果返回至前端应用201。前端应用201根据第一页面的上下文对象中的第一状态组件、全局状态组件、第二页面的初始状态组件和该请求结果生成第二状态组件。

基于此，本申请实施例提供了一种页面显示方法的流程，如图3所示，包括：

步骤301、前端应用在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

此处，前端应用可以是各种包含页面显示功能的应用。如，X信、X聊、Q聊、JE浏览器、水狐浏览器、软件安全卫士、软件应用下载中心等等。

相应的，第一页面可以是前端应用中任何一个可以发生页面转换的页面。如，点开水狐浏览器看到包含搜索框的页面，输入搜索词后点击搜索键，则可以转换到下一页面-第二页面。该示例中，点击搜索键就可以生成页面转换指令。

又如，上述示例中，转换到下一页面后，点击该页面中的一个链接，可以再次转换页面。则在此示例中，点击该页面中的一个链接就可以生成页面转换指令。这里对第一页面和第二页面具体不做限制，页面转换指令也可以是根据各种操作触发的，可以根据需要具体设置，这里不做限定。

步骤302、所述前端应用根据第一页面的上下文对象、全局状态组件和所述第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

此处，上下文对象可以是包含容器组件的对象，以保留第一页面的第一状态组件。如，上下文对象可以是React中Hooks(封装好的一种钩子函数，可以帮助React完成页面渲染工作)的Context对象，通过Context对象的Provider组件来更新、管理页面对应的状态组件的变化。

全局状态组件中包含的是各个页面的公共状态参数。在一种示例中，公共状态参数可以为：后台服务端接口数据、前端应用中所有页面的统一标识等。

初始状态组件中包含的是各页面分别对应的、各自的初始状态参数。如，在千度浏览器中，初始状态参数可以是千度热搜和千度热搜对应的热搜内容等。

基于上述示例，若上下文对象可以是React中Hooks的Context对象，又举一个例子，前端应用可以通过菜单作为划分，每个菜单对应的页面作为一个模块，前端应用中预定义一个全局状态组件的g_state，针对每个页面预定义对应的初始状态组件sub_state，第一页面的初始状态组件为sub_state1，第二页面的初始状态组件为sub_state2。则第一页面的第一状态组件state1可以是sub_state1加载g_state得到的，将state1放在数据仓库store中。

前端应用中还可以定义一个上下文管理模块，该上下文管理模块中定义有上下文管理函数GlobalProvider，在上下文管理函数GlobalProvider中生成一个Context对象，通过Context对象的Provider组件来更新、管理state1的变化，当第二页面中的组件需要使用state1中的共用状态参数时，可以通过Context对象提供的useContext方法来订阅Context对象中的state1从而实现状态的共享，根据state1、g_state、sub_state2得到第二页面的第二状态组件。当转换下一页面时，即，加载新的页面模块时，会加载新页面模块的sub_state_n以及全局的g_state重新生成新的state_n。

步骤303、所述前端应用根据所述第二状态组件显示所述第二页面。

上述方法中，前端应用中定义有各页面的初始状态参数的各初始状态组件，所述全局状态组件用于定义所述前端应用的各页面的公共状态参数。如此，相比于现有技术中针对每个页面都编写对应的包括初始状态参数和公共状态参数的状态组件来说，本申请中每个页面的初始状态组件可以预加载全局状态组件得到页面对应的状态组件，降低每个页面的状态组件均对全局状态组件的重复撰写造成的工作量，简化前端应用。前端应用通过上下文管理模块的上下文对象管理所述第一页面的第一状态组件。且所述前端应用根据所述第一页面的上下文对象、所述全局状态组件和第二页面的初始状态组件生成第二状态组件，所述前端应用根据所述第二状态组件显示所述第二页面。如此，上下文对象可以作为各页面转换过程中，多个页面存在共用状态参数时，作为该共用状态参数的中转站，消除现有技术中由于组件间需要共用状态参数，而通过组件嵌套、组件间耦合方式来实现参数流转导致的运维困难问题。

本申请实施例提供了一种页面更新显示方法，还包括：

所述前端应用在显示所述第一页面期间，接收页面更新指令；所述页面更新指令用于指示对所述第一页面进行更新显示；

所述前端应用通过状态更新函数，将所述页面更新指令中的变更页面值，更新至所述第一状态组件中；所述状态更新函数用于对状态参数进行更新操作；

所述前端应用根据更新的第一状态组件，更新显示第一页面。

在一种示例中，前端应用为水狐浏览器，第一页面为带搜索框的页面，用户在搜索框中输入“检索词”，则生成包含“检索词”的页面更新指令。水狐浏览器通过状态更新函数将该页面更新指令中的“检索词”变更页面值，更新至该第一页面的第一状态组件中，使得此时的第一页面中可以在该搜索框中显示“检索词”。

又一种示例中，前端应用为X信，第一页面为登录界面，用户在用户名输入框中输入“小明”，则生成包含“小明”的页面更新指令。X信通过状态更新函数将该页面更新指令中的“小明”变更页面值，更新至该第一页面的第一状态组件中，使得此时的第一页面中可以在该用户名输入框中显示“小明”。

基于上述步骤302中的示例，前端应用中可以定义一个状态更新函数reducer，状态更新函数reducer中定义了操作state(页面对应的状态组件)的逻辑，所有针对state的变化都会通过reducer函数来处理。

本申请实施例提供了一种页面更新显示方法，接收页面更新指令之后，还包括：所述前端应用通过所述上下文管理模块中的提供方法，更新所述第一页面的上下文对象。在上述步骤302示例中，上下文管理模块的上下文管理函数GlobalProvider根据页面更新指令中的变更页面值，通过Context对象的Provider组件对应更改上下文对象-Context对象中的state1。

本申请实施例提供了一种页面更新显示方法，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用通过所述第一页面的上下文对象中的订阅方法，获取所述第一状态组件中的共用状态参数，所述共用状态参数为所述第一页面的初始状态组件与所述第二页面的初始状态组件中共同应用的状态参数；

所述前端应用根据所述共用状态参数、所述全局状态组件和所述第二页面的初始状态组件生成第二状态组件。

此处，共用状态参数为第一页面和第二页面共用的状态参数。如，第一页面为水狐浏览器中带搜索框的页面，第二页面为搜索框中输入内容的搜索后的页面，则共用状态参数可以为水狐浏览器中搜索框中输入的“检索词”。

在上述示例中，前端应用通过上下文管理函数GlobalProvider中的第一页面的Context对象的订阅方法useContext方法来订阅Context对象中的state1。在该示例中，useContext方法即为第一页面的上下文对象中的订阅方法。

本申请实施例提供了一种页面转换显示方法，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件之前，还包括：

所述前端应用根据所述页面转换指令中的数据获取项生成数据获取请求，并将所述数据获取请求发送至后台服务端；

所述前端应用接收所述后台服务端返回的所述数据获取项的请求结果；

根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用根据所述第一页面的上下文对象、所述全局状态组件、所述第二页面的初始状态组件和所述请求结果生成第二状态组件。

在一种示例中，若前端应用是考试服务应用，第一页面是进入成绩获取的验证界面，用户在用户名输入框中输入“小明”，在密码输入框中输入“152***888”，并点击登录，则考试服务应用生成包含用户名“小明”、密码“152***888”和成绩获取语句(数据获取项)的页面转换指令，并根据用户名“小明”、密码“152***888”和成绩获取语句(数据获取项)生成数据获取请求发送至后台服务端，获取后台服务端返回的包含小明的成绩结果的请求结果。考试服务应用的成绩显示页面模块根据上下文对象中的第一状态组件(如，可以包括考试类型、页面统一标识的状态参数)、全局状态组件、第二页面的初始状态组件和获取的请求结果(小明的成绩结果)生成第二状态组件，则第二页面可以将第二状态组件中的小明的成绩结果显示。

本申请实施例提供了一种记录状态参数变化信息的方法，还包括：所述前端应用通过集成在状态更新函数中的日志组件，记录所述前端应用中状态参数变化信息；所述状态更新函数用于对状态参数进行更新。也就是说，将日志组件集成在状态更新函数中，使得日志组件中的监控状态参数变化的逻辑，监控前端应用页面的整个状态参数变化轨迹和相关信息，便于前端应用的运行维护。

基于上述方法流程，本申请实施例提供了一种页面显示方法的流程，为无需生成数据获取请求的情况，如图4所示，包括：

步骤401、前端应用通过第一页面的初始状态组件加载全局状态组件生成第一状态组件，并将该第一状态组件放入数据仓库。

此处，第一页面可以是前端应用启用的第一个页面，也可以是可以转换至下一页面的前端应用中的任一页面。

如，双击千度APP，千度APP的第一页面的页面模块被触发，第一页面的页面模块加载初始状态组件，以获取第一页面中的千度热搜等初始状态参数。初始状态组件进一步加载全局状态组件，以获取各页面相同的公共状态参数。如，“千度一下”。又或者，第一页面是千度APP中的菜单页面，第一页面是上一页面经转换而来的。如，上一页面中的一个AA公司官网链接被触发转换至第一页面，该第一页面可以是以菜单形式展示AA公司官网中各条消息。

步骤402、前端应用通过上下文管理函数将该第一状态组件放入上下文对象。

步骤403、前端应用基于数据仓库中的该第一状态组件显示第一页面。

步骤404、前端应用在显示第一页面期间，接收页面更新指令。

在一种示例中，前端应用为水狐浏览器，页面更新指令可以为用户在搜索框中输入的检索内容“页面软件”时生成的，该第一页面需要将该“页面软件”显示在页面的搜索框中，即，需要对应更改第一状态组件，将第一状态组件中的搜索框对应的空值页面值更新为“页面软件”。

步骤405、前端应用通过状态更新函数，将该页面更新指令中的变更页面值，更新至该第一状态组件中。

步骤406、前端应用通过上下文管理函数中的提供方法，更新第一页面的上下文对象。

步骤407、前端应用在显示第一页面期间，接收页面转换指令。

在一种示例中，在第一页面的搜索框中输入搜索词后，点击搜索键，生成包含搜索词的页面转换指令。又一示例，在第一页面的各页面链接中点击其中一个，生成页面转换指令。

步骤408、前端应用根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，并将该第二状态组件放入数据仓库。

步骤409、前端应用通过上下文管理函数将该第二状态组件放入上下文对象。

步骤410、前端应用基于数据仓库中的该第二状态组件显示第二页面。

步骤411、前端应用通过状态变更函数中的日志组件监控并记录状态参数变化信息。

这里需要说明的是，上述方法流程并不唯一。如，步骤403可以在步骤402之前执行，步骤410可以在步骤409之前执行。步骤411可以在任一步骤前后执行。

基于上述方法流程，本申请实施例提供了一种页面显示方法的流程，为需要生成数据获取请求的情况，如图5所示，包括：

步骤501、前端应用通过第一页面的初始状态组件加载全局状态组件生成第一状态组件，并将该第一状态组件放入数据仓库。

此处，前端应用可以为购物APP，第一页面可以为包含搜索框的页面。

步骤502、前端应用通过上下文管理函数将该第一状态组件放入上下文对象。

步骤503、前端应用基于数据仓库中的该第一状态组件显示第一页面。

步骤504、前端应用在显示第一页面期间，接收页面更新指令。

基于上述示例，用户在第一页面的搜索框中输入“鞋子”。页面更新指令中包括“鞋子”，该第一页面需要将该“鞋子”显示在页面的搜索框中，即，需要对应更改第一状态组件，将第一状态组件中的搜索框对应的空值页面值更新为“鞋子”变更页面值。

步骤505、前端应用通过状态更新函数，将该页面更新指令中的变更页面值，更新至该第一状态组件中。

步骤506、前端应用通过上下文管理函数中的提供方法，更新第一页面的上下文对象。

步骤507、前端应用在显示第一页面期间，接收页面转换指令。

基于上述示例，用户在第一页面的搜索框中输入“鞋子”后，点击搜索键，生成包含“鞋子”的页面转换指令。

步骤508、前端应用根据页面转换指令中的数据获取项生成数据获取请求。

在上述示例中，数据获取项可以为“鞋子”。

步骤509、前端应用将该数据获取请求发送至后台服务端。

步骤510、前端应用接收后台服务端返回的该数据获取项的请求结果。

在上述示例中，请求结果中可以包含该数据获取项“鞋子”对应的相关请求数据。如，各类鞋子图片、每种鞋子材料和形貌介绍、价格、鞋子店铺相关信息等等。

步骤511、前端应用根据第一状态组件、全局状态组件、第二页面的初始状态组件和请求结果生成第二状态组件，并将该第二状态组件放入数据仓库。

步骤512、前端应用通过上下文管理函数将该第二状态组件放入上下文对象。

步骤513、前端应用基于数据仓库中的该第二状态组件显示第二页面。

步骤514、前端应用通过状态变更函数中的日志组件监控并记录状态参数变化信息。

这里需要说明的是，上述方法流程并不唯一。如，步骤503可以在步骤502之前执行，步骤513可以在步骤512之前执行。步骤514可以在任一步骤前后执行。

基于同样的构思，本申请实施例提供一种页面显示装置，图6为本申请实施例提供的一种页面显示装置示意图，如图6示，包括：

显示模块601，用于在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

处理模块602，用于根据第一页面的上下文对象、全局状态组件和所述第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

所述显示模块601还用于，根据所述第二状态组件显示所述第二页面。

可选的，所述显示模块601还用于，在显示所述第一页面期间，接收页面更新指令；所述页面更新指令用于指示对所述第一页面进行更新显示；

所述处理模块602还用于，通过状态更新函数，将所述页面更新指令中的变更页面值，更新至所述第一状态组件中；所述状态更新函数用于对状态参数进行更新操作；

所述显示模块601还用于，根据更新的第一状态组件，更新显示第一页面。

可选的，所述处理模块602还用于，通过所述上下文管理模块中的提供方法，更新所述第一页面的上下文对象。

可选的，所述处理模块602具体用于，通过所述第一页面的上下文对象中的订阅方法，获取所述第一状态组件中的共用状态参数，所述共用状态参数为所述第一页面的初始状态组件与所述第二页面的初始状态组件中共同应用的状态参数；根据所述共用状态参数、所述全局状态组件和所述第二页面的初始状态组件生成第二状态组件。

可选的，所述处理模块602还用于，根据所述页面转换指令中的数据获取项生成数据获取请求，并将所述数据获取请求发送至后台服务端；接收所述后台服务端返回的所述数据获取项的请求结果；所述处理模块602具体用于，根据所述第一页面的上下文对象、所述全局状态组件、所述第二页面的初始状态组件和所述请求结果生成第二状态组件。

可选的，所述处理模块602还用于，通过集成在状态更新函数中的日志组件，记录所述前端应用中状态参数变化信息；所述状态更新函数用于对状态参数进行更新。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (11)

1.一种页面显示方法，其特征在于，所述方法包括：

前端应用在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

所述前端应用根据第一页面的上下文对象、全局状态组件和所述第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

所述前端应用根据所述第二状态组件显示所述第二页面。

2.根据权利要求1所述的方法，其特征在于，接收页面转换指令之前，还包括：

所述前端应用在显示所述第一页面期间，接收页面更新指令；所述页面更新指令用于指示对所述第一页面进行更新显示；

所述前端应用通过状态更新函数，将所述页面更新指令中的变更页面值，更新至所述第一状态组件中；所述状态更新函数用于对状态参数进行更新操作；

所述前端应用根据更新的第一状态组件，更新显示第一页面。

3.根据权利要求2所述的方法，其特征在于，接收页面更新指令之后，还包括：

所述前端应用通过所述上下文管理模块中的提供方法，更新所述第一页面的上下文对象。

4.根据权利要求1所述的方法，其特征在于，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用通过所述第一页面的上下文对象中的订阅方法，获取所述第一状态组件中的共用状态参数，所述共用状态参数为所述第一页面的初始状态组件与所述第二页面的初始状态组件中共同应用的状态参数；

所述前端应用根据所述共用状态参数、所述全局状态组件和所述第二页面的初始状态组件生成第二状态组件。

5.根据权利要求1所述的方法，其特征在于，根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件之前，还包括：

所述前端应用根据所述页面转换指令中的数据获取项生成数据获取请求，并将所述数据获取请求发送至后台服务端；

所述前端应用接收所述后台服务端返回的所述数据获取项的请求结果；

根据第一页面的上下文对象、全局状态组件和第二页面的初始状态组件生成第二状态组件，包括：

所述前端应用根据所述第一页面的上下文对象、所述全局状态组件、所述第二页面的初始状态组件和所述请求结果生成第二状态组件。

6.根据权利要求1至5中任一所述的方法，其特征在于，还包括：

所述前端应用通过集成在状态更新函数中的日志组件，记录所述前端应用中状态参数变化信息；所述状态更新函数用于对状态参数进行更新。

7.一种前端应用，其特征在于，包括：

初始状态组件，用于定义所述前端应用中对应页面的初始状态参数；

全局状态组件，用于定义所述前端应用中各页面的公共状态参数；

状态更新函数，用于定义页面中操作状态参数的逻辑，对页面中的状态参数进行更新；

上下文管理模块，用于生成上下文对象，并基于所述上下文对象管理页面对应的状态组件，在所述前端应用进行第一页面至第二页面的转换时，通过所述上下文对象为所述第二页面提供所述第一页面的状态组件，所述页面对应的状态组件是根据所述全局状态组件和所述页面的初始状态组件获取的。

8.根据权利要求7所述的前端应用，其特征在于，还包括：

日志组件，集成在所述状态更新函数中，用于定义页面的状态参数监控逻辑，在页面的状态参数更新过程中记录状态参数变化信息，所述状态更新函数用于对状态参数进行更新。

9.一种页面显示装置，其特征在于，所述装置包括：

显示模块，用于在显示第一页面期间，接收页面转换指令；所述页面转换指令用于指示将显示页面从所述第一页面转换为第二页面；

处理模块，用于根据第一页面的上下文对象、全局状态组件和所述第二页面的初始状态组件生成第二状态组件；所述第一页面的上下文对象是通过所述前端应用中的上下文管理模块针对所述第一页面的第一状态组件创建的；所述第一状态组件是根据所述全局状态组件和第一页面的初始状态组件生成的；所述全局状态组件用于定义所述前端应用的各页面的公共状态参数；所述前端应用中定义有各页面的初始状态参数的各初始状态组件；

所述显示模块还用于，根据所述第二状态组件显示所述第二页面。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有程序，当所述程序在计算机上运行时，使得计算机实现执行权利要求1至6中任一项所述的方法。

11.一种计算机设备，其特征在于，包括：

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

处理器，用于调用所述存储器中存储的计算机程序，按照获得的程序执行如权利要求1至6任一权利要求所述的方法。

Images