页面组件的显示方法、装置、电子设备和存储介质与流程

1.本公开涉及金融科技、移动互联、页面组件技术领域，尤其涉及一种页面组件的显示方法、装置、电子设备、计算机可读存储介质和计算机程序产品。


背景技术：

2.目前，随着网络技术的不断发展，页面组件化具有开发工作量少、扩展性好等优点，在网页、应用程序(比如小程序)等领域中得到了广泛应用。相关技术中的页面组件的显示方法，存在页面切换耗时长的问题，而且在路由嵌套的页面切换场景下，在某页面上显示的页面组件会在其他页面上显示，即存在不同页面的页面组件之间无法隔离的问题。


技术实现要素：

3.本公开提供一种页面组件的显示方法、装置、电子设备、计算机可读存储介质和计算机程序产品，以至少解决相关技术中的页面组件的显示方法，存在页面切换耗时长、不同页面的页面组件之间无法隔离的问题。本公开的技术方案如下：
4.根据本公开实施例的第一方面，提供一种页面组件的显示方法，包括：执行代码文件中用于组件显示的通用代码；获取待切换的目标页面的路由路径；基于所述目标页面的路由路径，判断所述代码文件中是否存在所述目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码；若所述代码文件中存在所述目标页面的组件实例，将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
5.在本公开的一个实施例中，还包括：若所述代码文件中未存在所述目标页面的组件实例，创建所述目标页面的初始组件实例；对所述目标页面的初始组件实例进行渲染，得到渲染后的所述目标页面的组件实例；将所述目标页面的组件实例挂载在所述目标页面的组件实例的父组件实例的文档对象模型dom上；将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
6.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，还包括：将所述目标页面的组件实例存储至所述代码文件中。
7.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，还包括：创建所述目标页面的组件实例和所述目标页面的路由路径之间的映射关系；将所述映射关系存储至所述代码文件中。
8.在本公开的一个实施例中，所述获取待切换的目标页面的路由路径之后，还包括：将除所述目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。
9.在本公开的一个实施例中，所述基于所述目标页面的路由路径，判断代码文件中是否存在所述目标页面的组件实例之前，还包括：获取当前页面的路由路径和路由层级，以及所述目标页面的路由层级；识别所述当前页面、所述目标页面的路由路径不一致，和/或，所述当前页面、所述目标页面的路由层级不一致。
10.在本公开的一个实施例中，获取所述目标页面的路由层级，包括：基于所述目标页
面的路由路径，获取所述目标页面的路由层级。
11.根据本公开实施例的第二方面，提供一种页面组件的显示装置，包括：执行模块，被配置为执行代码文件中用于组件显示的通用代码；获取模块，被配置为获取待切换的目标页面的路由路径；判断模块，被配置为基于所述目标页面的路由路径，判断所述代码文件中是否存在所述目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码；处理模块，被配置为若所述代码文件中存在所述目标页面的组件实例，将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
12.在本公开的一个实施例中，所述处理模块，还被配置为：若所述代码文件中未存在所述目标页面的组件实例，创建所述目标页面的初始组件实例；对所述目标页面的初始组件实例进行渲染，得到渲染后的所述目标页面的组件实例；将所述目标页面的组件实例挂载在所述目标页面的组件实例的父组件实例的文档对象模型dom上；将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
13.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块，还被配置为：将所述目标页面的组件实例存储至所述代码文件中。
14.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块，还被配置为：创建所述目标页面的组件实例和所述目标页面的路由路径之间的映射关系；将所述映射关系存储至所述代码文件中。
15.在本公开的一个实施例中，所述获取待切换的目标页面的路由路径之后，所述处理模块，还被配置为：将除所述目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。
16.在本公开的一个实施例中，所述基于所述目标页面的路由路径，判断代码文件中是否存在所述目标页面的组件实例之前，所述判断模块，还被配置为：获取当前页面的路由路径和路由层级，以及所述目标页面的路由层级；识别所述当前页面、所述目标页面的路由路径不一致，和/或，所述当前页面、所述目标页面的路由层级不一致。
17.在本公开的一个实施例中，所述判断模块，还被配置为：基于所述目标页面的路由路径，获取所述目标页面的路由层级。
18.根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如前第一方面所述的页面组件的显示方法。
19.根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前第一方面所述的页面组件的显示方法。
20.根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如前第一方面所述的页面组件的显示方法。
21.本公开的实施例提供的技术方案至少带来以下有益效果：可预先在代码文件中存储组件实例，在进行页面切换时，若代码文件中存在目标页面的组件实例，仅需将目标页面的组件实例的状态设置为显示状态，就可实现目标页面的组件实例的显示，相较于相关技术中在进行页面切换时需要渲染组件实例，有效节省了页面切换时长，提高了页面切换效率，且代码文件包括用于组件显示的通用代码，且将用于组件显示的通用代码从组件实例
中抽取出并移至代码文件中，相较于相关技术中以组件形式封装通用代码，可实现不同页面的组件实例之间的隔离，适用于路由嵌套的页面切换场景。
22.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
23.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
24.图1是根据本公开第一实施例的页面组件的显示方法的流程示意图。
25.图2是根据本公开第二实施例的页面组件的显示方法的流程示意图。
26.图3是根据本公开第三实施例的页面组件的显示方法的流程示意图。
27.图4是根据本公开一个具体示例的页面组件的显示方法的流程示意图。
28.图5是根据本公开第一实施例的页面组件的显示装置的框图。
29.图6是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
30.为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
31.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
32.本公开技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
33.图1是根据本公开第一实施例的页面组件的显示方法的流程示意图。
34.如图1所示，本公开第一实施例的页面组件的显示方法，包括以下步骤：
35.s101，执行代码文件中用于组件显示的通用代码。
36.需要说明的是，本公开的页面组件的显示方法的执行主体为电子设备。本公开实施例的页面组件的显示方法可以由本公开实施例的页面组件的显示装置执行，本公开实施例的页面组件的显示装置可以配置在任意电子设备中，以执行本公开实施例的页面组件的显示方法。
37.本公开的实施例中，可预先在代码文件中设置用于组件显示的通用代码。应说明的是，对用于组件显示的通用代码不做过多限定，比如，可包括获取目标页面的路由层级的代码，存储当前页面的路由层级的代码，存储、创建、渲染、挂载目标页面的组件实例的代码等。
38.需要说明的是，对代码文件不做过多限定，比如，代码文件可为js(java script，解释型或即时编译型的编程语言)文件。
39.在一种实施方式中，可预先将代码文件引入多个页面，从而可在多个页面上执行代码文件中用于组件显示的通用代码。
40.s102，获取待切换的目标页面的路由路径。
41.本公开的实施例中，页面与路由路径一一对应，即目标页面的路由路径唯一。对路由路径不做过多限定，比如，可包括url(uniform resource locator，统一资源定位符)。
42.在一种实施方式中，获取待切换的目标页面的路由路径，包括接收客户端发送的目标页面的路由路径。比如，以页面组件的显示方法的执行主体为服务器为例，服务器可接收客户端发送的目标页面的路由路径。可以理解的是，客户端可响应于用户针对目标页面的切换操作(比如点击操作)，获取目标页面的路由路径，并将目标页面的路由路径发送至服务器。
43.s103，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，其中，组件实例未封装有用于组件显示的通用代码。
44.本公开的实施例中，可预先在代码文件中存储组件实例，代码文件中的组件实例与页面的路由路径关联，即代码文件中的组件实例与页面关联。对代码文件中组件实例的存储方式不做过多限定，比如，代码文件包括字典变量，可基于组件实例的变量取值配置字典变量的取值，以实现组件实例的存储。
45.需要说明的是，对目标页面的组件实例不做过多限定，比如，目标页面的组件实例可为iframe组件实例，应说明的是，iframe组件为html(hyper text markup language，超文本标记语言)标签。目标页面的组件实例的数量为至少一个。
46.在一种实施方式中，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，包括获取代码文件中的组件实例的标识，判断组件实例的标识与目标页面的路由路径是否一致，若代码文件中存在目标组件实例的标识与目标页面的路由路径一致，将目标组件实例确定为目标页面的组件实例，反之，若代码文件中的每个组件实例的标识与目标页面的路由路径均不一致，确定代码文件中不存在目标页面的组件实例。可以理解的是，本实施例中目标页面的组件实例的标识，为目标页面的路由路径。
47.在一种实施方式中，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，包括从代码文件中提取出代码文件中的组件实例和候选页面的路由路径之间的映射关系，基于目标页面的路由路径，在上述映射关系中查询，若查询结果指示代码文件中的目标组件实例与目标页面的路由路径之间具有映射关系，将目标组件实例确定为目标页面的组件实例，反之，若查询结果指示代码文件中的每个组件实例与目标页面的路由路径均不具有映射关系，确定代码文件中不存在目标页面的组件实例。可以理解的是，本实施例中目标页面的组件实例和目标页面的路由路径之间具有映射关系。
48.s104，若代码文件中存在目标页面的组件实例，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
49.需要说明的是，步骤s102-s104均是基于代码文件中用于组件显示的通用代码来实现的。
50.在一种实施方式中，将目标页面的组件实例的状态设置为显示状态，包括将目标页面的组件实例的目标属性的取值设置为第一设定值，其中，第一设定值用于指示组件实例的状态为显示状态。应说明的是，对第一设定值不做过多限定，比如，可为1。
51.在一种实施方式中，获取待切换的目标页面的路由路径之后，还包括将除目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。可以理解的是，除目标页面的组件实例以外的其余组件实例，包括除目标页面以外的其余页面的组件实例。由此，在进行页面切换时，可将除目标页面的组件实例以外的其余组件实例隐藏，即不显示除目标页面的组件实例以外的其余组件实例。
52.在一些例子中，将除目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态，包括将除目标页面的组件实例以外的其余组件实例的目标属性的取值设置为第二设定值，其中，第二设定值用于指示组件实例的状态为隐藏状态。应说明的是，对第二设定值不做过多限定，比如，可为0。
53.比如，若代码文件为js文件，js文件中存在组件实例a、b、c、d，目标页面的组件实例包括组件实例a、c，以第一设定值为1、第二设定值为0为例，可将css(cascading style sheets，层叠样式表)文件中组件实例a、c的目标属性的取值设置为1，并将css文件中组件实例b、d的目标属性的取值设置为0。
54.综上，根据本公开实施例提供的页面组件的显示方法，可预先在代码文件中存储组件实例，在进行页面切换时，若代码文件中存在目标页面的组件实例，仅需将目标页面的组件实例的状态设置为显示状态，就可实现目标页面的组件实例的显示，相较于相关技术中在进行页面切换时需要渲染组件实例，有效节省了页面切换时长，提高了页面切换效率，且代码文件包括用于组件显示的通用代码，且将用于组件显示的通用代码从组件实例中抽取出并移至代码文件中，相较于相关技术中以组件形式封装通用代码，可实现不同页面的组件实例之间的隔离，适用于路由嵌套的页面切换场景。
55.图2是根据本公开第二实施例的页面组件的显示方法的流程示意图。
56.如图2所示，本公开第二实施例的页面组件的显示方法，包括以下步骤：
57.s201，执行代码文件中用于组件显示的通用代码。
58.s202，获取待切换的目标页面的路由路径。
59.s203，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码。
60.步骤s201-s203的相关内容可参见上述实施例，这里不再赘述。
61.s204，若代码文件中未存在目标页面的组件实例，创建目标页面的初始组件实例。
62.s205，对目标页面的初始组件实例进行渲染，得到渲染后的目标页面的组件实例。
63.s206，将目标页面的组件实例挂载在目标页面的组件实例的父组件实例的文档对象模型dom上。
64.s207，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
65.需要说明的是，步骤s202-s207均是基于代码文件中用于组件显示的通用代码来实现的。
66.需要说明的是，创建、渲染、挂载组件实例的相关内容，均可采用相关技术来实现，这里不做过多限定。
67.在一种实施方式中，得到渲染后的目标页面的组件实例之后，还包括将目标页面的组件实例存储至代码文件中。由此，该方法中可将目标页面的组件实例存储至代码文件
中，以实现目标页面的组件实例的存储。
68.在一种实施方式中，得到渲染后的目标页面的组件实例之后，还包括创建目标页面的组件实例和目标页面的路由路径之间的映射关系，将映射关系存储至代码文件中。由此，该方法中可创建目标页面的组件实例和目标页面的路由路径之间的映射关系，以实现组件实例与页面的关联，并将映射关系存储至代码文件中，以实现映射关系的存储。
69.比如，若代码文件为js文件，js文件中存在组件实例a、b、c、d，若js文件中未存在目标页面的组件实例，可创建目标页面的初始组件实例e0，对目标页面的初始组件实例e0进行渲染，得到渲染后的目标页面的组件实例e，若组件实例e的父组件实例为组件实例a，可将组件实例e挂载在组件实例a的dom(document object model，文档对象模型)上，并将css文件中组件实例e的目标属性的取值设置为1。
70.比如，可将组件实例e存储至js文件中。
71.比如，可创建组件实例e和目标页面的路由路径之间的映射关系，并将上述映射关系存储至js文件中。
72.综上，根据本公开实施例提供的页面组件的显示方法，在进行页面切换时，若代码文件中未存在目标页面的组件实例，可创建、渲染、挂载目标页面的组件实例，并将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
73.图3是根据本公开第三实施例的页面组件的显示方法的流程示意图。
74.如图3所示，本公开第三实施例的页面组件的显示方法，包括以下步骤：
75.s301，执行代码文件中用于组件显示的通用代码。
76.步骤s301的相关内容可参见上述实施例，这里不再赘述。
77.s302，获取当前页面的路由路径和路由层级，以及目标页面的路由路径和路由层级。
78.s303，识别当前页面、目标页面的路由路径不一致，和/或，当前页面、目标页面的路由层级不一致。
79.需要说明的是，当前页面指的是当前正在显示的页面，即进行页面切换之前的页面。获取路由路径、路由层级均可采用相关技术来实现，这里不做过多限定。
80.在一种实施方式中，可从代码文件中提取出当前页面的路由层级。比如，代码文件包括数字变量，可基于当前页面的路由层级配置数字变量的取值，以实现当前页面的路由层级的存储。
81.在一种实施方式中，获取目标页面的路由层级，包括基于目标页面的路由路径，获取目标页面的路由层级。由此，可考虑到目标页面的路由路径，来实现目标页面的路由层级的获取。
82.在一些例子中，基于目标页面的路由路径，获取目标页面的路由层级，包括识别目标页面的路由路径是否存在设定页面的标识，若目标页面的路由路径存在设定页面的标识，确定目标页面的路由层级为设定页面的路由层级的下一层级。
83.s304，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，其中，组件实例未封装有用于组件显示的通用代码。
84.s305，若代码文件中存在目标页面的组件实例，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
85.需要说明的是，步骤s302-s305均是基于代码文件中用于组件显示的通用代码来实现的。
86.步骤s304-s305的相关内容可参见上述实施例，这里不再赘述。
87.综上，根据本公开实施例提供的页面组件的显示方法，在判断代码文件中是否存在目标页面的组件实例之前，识别当前页面、目标页面的路由路径不一致，和/或，当前页面、目标页面的路由层级不一致，即在当前页面、目标页面非同一页面时，才进行页面切换的过程，可避免在当前页面、目标页面为同一页面时进行不必要的页面切换过程，有助于节省计算资源。
88.为使本领域技术人员更清楚地了解本公开，图4是根据本公开一个具体示例的页面组件的显示方法的流程示意图，如图4所示，该方法可包括以下步骤：
89.s401，执行代码文件中用于组件显示的通用代码。
90.s402，获取当前页面的路由路径和路由层级，以及目标页面的路由路径和路由层级。
91.s403，识别当前页面、目标页面的路由路径不一致，和/或，当前页面、目标页面的路由层级不一致。
92.s404，基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，其中，组件实例未封装有用于组件显示的通用代码。
93.如果是，即代码文件中存在目标页面的组件实例，则执行步骤s405；如果否，即代码文件中未存在目标页面的组件实例，则执行步骤s406。
94.s405，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
95.s406，创建目标页面的初始组件实例。
96.s407，对目标页面的初始组件实例进行渲染，得到渲染后的目标页面的组件实例。
97.s408，将目标页面的组件实例挂载在目标页面的组件实例的父组件实例的文档对象模型dom上。
98.s409，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。
99.s410，将目标页面的组件实例存储至代码文件中。
100.步骤s401-s410的相关内容可参见上述实施例，这里不再赘述。
101.图5为根据本公开第一实施例的页面组件的显示装置的框图。
102.如图5所示，本公开实施例的页面组件的显示装置500包括：执行模块501、获取模块502、判断模块503和处理模块504。
103.执行模块501，被配置为执行代码文件中用于组件显示的通用代码；
104.获取模块502，被配置为获取待切换的目标页面的路由路径；
105.判断模块503，被配置为基于所述目标页面的路由路径，判断所述代码文件中是否存在所述目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码；
106.处理模块504，被配置为若所述代码文件中存在所述目标页面的组件实例，将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
107.在本公开的一个实施例中，所述处理模块504，还被配置为：若所述代码文件中未
存在所述目标页面的组件实例，创建所述目标页面的初始组件实例；对所述目标页面的初始组件实例进行渲染，得到渲染后的所述目标页面的组件实例；将所述目标页面的组件实例挂载在所述目标页面的组件实例的父组件实例的文档对象模型dom上；将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
108.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块504，还被配置为：将所述目标页面的组件实例存储至所述代码文件中。
109.在本公开的一个实施例中，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块504，还被配置为：创建所述目标页面的组件实例和所述目标页面的路由路径之间的映射关系；将所述映射关系存储至所述代码文件中。
110.在本公开的一个实施例中，所述获取待切换的目标页面的路由路径之后，所述处理模块504，还被配置为：将除所述目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。
111.在本公开的一个实施例中，所述基于所述目标页面的路由路径，判断代码文件中是否存在所述目标页面的组件实例之前，所述判断模块503，还被配置为：获取当前页面的路由路径和路由层级，以及所述目标页面的路由层级；识别所述当前页面、所述目标页面的路由路径不一致，和/或，所述当前页面、所述目标页面的路由层级不一致。
112.在本公开的一个实施例中，所述判断模块503，还被配置为：基于所述目标页面的路由路径，获取所述目标页面的路由层级。
113.关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
114.综上，本公开实施例提供的页面组件的显示装置，可预先在代码文件中存储组件实例，在进行页面切换时，若代码文件中存在目标页面的组件实例，仅需将目标页面的组件实例的状态设置为显示状态，就可实现目标页面的组件实例的显示，相较于相关技术中在进行页面切换时需要渲染组件实例，有效节省了页面切换时长，提高了页面切换效率，且代码文件包括用于组件显示的通用代码，且将用于组件显示的通用代码从组件实例中抽取出并移至代码文件中，相较于相关技术中以组件形式封装通用代码，可实现不同页面的组件实例之间的隔离，适用于路由嵌套的页面切换场景。
115.图6是根据一示例性实施例示出的一种电子设备的框图。
116.如图6所示，上述电子设备600包括：
117.存储器610及处理器620，连接不同组件(包括存储器610和处理器620)的总线630，存储器610存储有计算机程序，当处理器620执行所述程序时实现本公开实施例所述的页面组件的显示方法。
118.总线630表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(isa)总线，微通道体系结构(mac)总线，增强型isa总线、视频电子标准协会(vesa)局域总线以及外围组件互连(pci)总线。
119.电子设备600典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备600访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
120.存储器610还可以包括易失性存储器形式的计算机系统可读介质，例如随机存取
存储器(ram)640和/或高速缓存存储器650。电子设备600可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统660可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如cd-rom,dvd-rom或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线630相连。存储器610可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本公开各实施例的功能。
121.具有一组(至少一个)程序模块670的程序/实用工具680，可以存储在例如存储器610中，这样的程序模块670包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块670通常执行本公开所描述的实施例中的功能和/或方法。
122.电子设备600也可以与一个或多个外部设备690(例如键盘、指向设备、显示器691等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口692进行。并且，电子设备600还可以通过网络适配器693与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图6所示，网络适配器693通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid系统、磁带驱动器以及数据备份存储系统等。
123.处理器620通过运行存储在存储器610中的程序，从而执行各种功能应用以及数据处理。
124.需要说明的是，本实施例的电子设备的实施过程和技术原理参见前述对本公开实施例的页面组件的显示方法的解释说明，此处不再赘述。
125.综上，本公开实施例提供的电子设备，可以执行如前所述的页面组件的显示方法，可预先在代码文件中存储组件实例，在进行页面切换时，若代码文件中存在目标页面的组件实例，仅需将目标页面的组件实例的状态设置为显示状态，就可实现目标页面的组件实例的显示，相较于相关技术中在进行页面切换时需要渲染组件实例，有效节省了页面切换时长，提高了页面切换效率，且代码文件包括用于组件显示的通用代码，且将用于组件显示的通用代码从组件实例中抽取出并移至代码文件中，相较于相关技术中以组件形式封装通用代码，可实现不同页面的组件实例之间的隔离，适用于路由嵌套的页面切换场景。
126.为了实现上述实施例，本公开还提出一种计算机可读存储介质。
127.其中，该计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前所述的，或者执行如前所述的页面组件的显示方法。可选的，计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
128.为了实现上述实施例，本公开还提供一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如前所述的页面组件的显示方法。
129.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其
它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
130.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

技术特征：
1.一种页面组件的显示方法，其特征在于，包括：执行代码文件中用于组件显示的通用代码；获取待切换的目标页面的路由路径；基于所述目标页面的路由路径，判断所述代码文件中是否存在所述目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码；若所述代码文件中存在所述目标页面的组件实例，将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。2.根据权利要求1所述的方法，其特征在于，还包括：若所述代码文件中未存在所述目标页面的组件实例，创建所述目标页面的初始组件实例；对所述目标页面的初始组件实例进行渲染，得到渲染后的所述目标页面的组件实例；将所述目标页面的组件实例挂载在所述目标页面的组件实例的父组件实例的文档对象模型dom上；将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。3.根据权利要求2所述的方法，其特征在于，所述得到渲染后的所述目标页面的组件实例之后，还包括：将所述目标页面的组件实例存储至所述代码文件中。4.根据权利要求2所述的方法，其特征在于，所述得到渲染后的所述目标页面的组件实例之后，还包括：创建所述目标页面的组件实例和所述目标页面的路由路径之间的映射关系；将所述映射关系存储至所述代码文件中。5.根据权利要求1所述的方法，其特征在于，所述获取待切换的目标页面的路由路径之后，还包括：将除所述目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。6.根据权利要求1-5中任一项所述的方法，其特征在于，所述基于所述目标页面的路由路径，判断代码文件中是否存在所述目标页面的组件实例之前，还包括：获取当前页面的路由路径和路由层级，以及所述目标页面的路由层级；识别所述当前页面、所述目标页面的路由路径不一致，和/或，所述当前页面、所述目标页面的路由层级不一致。7.根据权利要求6所述的方法，其特征在于，获取所述目标页面的路由层级，包括：基于所述目标页面的路由路径，获取所述目标页面的路由层级。8.一种页面组件的显示装置，其特征在于，包括：执行模块，被配置为执行代码文件中用于组件显示的通用代码获取模块，被配置为获取待切换的目标页面的路由路径；判断模块，被配置为基于所述目标页面的路由路径，判断所述代码文件中是否存在所述目标页面的组件实例，其中，所述组件实例未封装有用于组件显示的通用代码；处理模块，被配置为若所述代码文件中存在所述目标页面的组件实例，将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。
9.根据权利要求8所述的装置，其特征在于，所述处理模块，还被配置为：若所述代码文件中未存在所述目标页面的组件实例，创建所述目标页面的初始组件实例；对所述目标页面的初始组件实例进行渲染，得到渲染后的所述目标页面的组件实例；将所述目标页面的组件实例挂载在所述目标页面的组件实例的父组件实例的文档对象模型dom上；将所述目标页面的组件实例的状态设置为显示状态，以显示所述目标页面的组件实例。10.根据权利要求9所述的装置，其特征在于，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块，还被配置为：将所述目标页面的组件实例存储至所述代码文件中。11.根据权利要求9所述的装置，其特征在于，所述得到渲染后的所述目标页面的组件实例之后，所述处理模块，还被配置为：创建所述目标页面的组件实例和所述目标页面的路由路径之间的映射关系；将所述映射关系存储至所述代码文件中。12.根据权利要求8所述的装置，其特征在于，所述获取待切换的目标页面的路由路径之后，所述处理模块，还被配置为：将除所述目标页面的组件实例以外的其余组件实例的状态设置为隐藏状态。13.根据权利要求8-12中任一项所述的装置，其特征在于，所述基于所述目标页面的路由路径，判断代码文件中是否存在所述目标页面的组件实例之前，所述判断模块，还被配置为：获取当前页面的路由路径和路由层级，以及所述目标页面的路由层级；识别所述当前页面、所述目标页面的路由路径不一致，和/或，所述当前页面、所述目标页面的路由层级不一致。14.根据权利要求13所述的装置，其特征在于，所述判断模块，还被配置为：基于所述目标页面的路由路径，获取所述目标页面的路由层级。15.一种电子设备，其特征在于，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如权利要求1-7中任一项所述的页面组件的显示方法。16.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1-7中任一项所述的页面组件的显示方法。17.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的页面组件的显示方法。

技术总结
本公开关于一种页面组件的显示方法、装置、电子设备和存储介质，属于金融科技、移动互联、页面组件技术领域。方法包括：执行代码文件中用于组件显示的通用代码；获取待切换的目标页面的路由路径；基于目标页面的路由路径，判断代码文件中是否存在目标页面的组件实例，组件实例未封装有用于组件显示的通用代码；若代码文件中存在目标页面的组件实例，将目标页面的组件实例的状态设置为显示状态，以显示目标页面的组件实例。由此，仅需将目标页面的组件实例的状态设置为显示状态，有效节省了页面切换时长，且将用于组件显示的通用代码从组件实例中抽取出并移至代码文件中，可实现不同页面的组件实例之间的隔离，适用于路由嵌套的页面切换场景。切换场景。切换场景。


技术研发人员：杨志灵
受保护的技术使用者：建信金融科技有限责任公司
技术研发日：2023.06.15
技术公布日：2023/8/31