CN114817792A

CN114817792A - 单页面应用交互体验优化方法、装置、设备及存储介质

Info

Publication number: CN114817792A
Application number: CN202210703297.2A
Authority: CN
Inventors: 汪浩; 张�杰; 孙军; 业晓波
Original assignee: Hos Joy Comfort Smart Home Co ltd
Current assignee: Hos Joy Comfort Smart Home Co ltd
Priority date: 2022-06-21
Filing date: 2022-06-21
Publication date: 2022-07-29
Anticipated expiration: 2042-06-21
Also published as: CN114817792B

Abstract

本发明公开了单页面应用交互体验优化方法、装置、设备及存储介质，无代码侵入的动态缓存包括以下步骤：触发事件，通过路由跳转访问页面组件，在全局标签组件中通过监听路由变化，通过标签组件的处理全局增加页面缓存；获取页面组件名称，通过路由match方法获取页面组件信息，视页面组件信息为对象，通过获取对象属性的方式获取页面组件名；多级页面嵌套，一级页面增加缓存组件，在一级页面的缓存组件内增加二级页面的名称，在二级页面内也增加缓存组件，在二级页面的缓存组件内增加三级页面的名称；页面嵌套缓存，循环调用match方法返回的数据列表，将一级页面之外的页面名称存储在缓存数组中。

Description

单页面应用交互体验优化方法、装置、设备及存储介质

技术领域

本发明涉及单页面应用交互领域，特别涉及一种单页面应用交互体验优化方法、装置、设备及存储介质。

背景技术

以往Vue的缓存是通过Vue中的缓存组件（keep-alive）实现的，缓存组件接收两个数组参数，即：数组cachedInclude：记录被缓存页面；数组cachedExclude：记录被移除缓存的页面；两个数组中都是记录了页面名称，处理缓存的通常方案是利用路由中的两个钩子函数，进入页面前的钩子函数beforeRouteEnter和离开页面前的钩子函数beforeRouteLeave，在进入页面之前，将当前页面存储在缓存数组中，当离开页面之前判断要跳转的页面是否需要缓存当前页面，如果需要则不做处理，如果不需要缓存当前页面，则将对应的页面从缓存数组中删除，添加到移除缓存数组中，但发明人在使用过程中，发现仍然存在以下问题：（1）如何实现不同入口进入同一页面，动态缓存不同的问题；（2）如何解决应用中的页面路由并不是在同一级别，有的是二级路由，有的是三级路由，路由深度是不同的问题；（3）项目由于前期规划问题，应用结构相对复杂，部分页面是引入通过装饰器的方式引入了Typescript、部分页面没有引入Typescript；（4）由于代码规范没有硬性规定，如何解决路由名和页面组件名不一致的问题；（5）当存量应用较大，如何减少代码侵入性的问题。

发明内容

为实现上述目的，发明人提供了一种单页面应用交互体验优化方法，包括无代码侵入的动态缓存，所述无代码侵入的动态缓存包括以下步骤：

触发事件，通过路由跳转访问页面组件，在全局标签组件中通过监听路由变化，通过标签组件的处理全局增加页面缓存；

获取页面组件名称，通过路由match方法获取页面组件信息来获取页面组件名称；

多级页面嵌套，至少包括一级页面、二级页面和三级页面，所述二级页面嵌套于一级页面内，三级页面嵌套于二级页面内，所述一级页面增加缓存组件，在一级页面的缓存组件内增加二级页面，在二级页面内也增加缓存组件，在二级页面的缓存组件内增加三级页面；

页面嵌套缓存，循环调用match方法返回的数据列表，将一级页面之外的页面名称存储在缓存数组中。

作为本发明的一种优选方式，所述页面缓存包括以下步骤：

通过路由跳转访问页面组件，同时在全局的标签组件中监听路由的变化；

读取页面组件名称放入缓存数组中，并判断路由是否是二级路由，若是，则结束页面缓存，若否，则读取父级页面组件名称放入缓存数组中后，再重新判断路由是否是二级路由。

作为本发明的一种优选方式，还包括动态移除缓存，所述动态移除缓存包括以下步骤：

触发事件：通过点击菜单，在路由跳转之前进行缓存的移除；

获取页面组件名称：判断页面组件是否渲染过，若未渲染过，则无需处理，直接进行页面渲染；若渲染过，则判断是否有使用装饰器，若是，则执行装饰器函数获取页面组件信息，然后将对应的组件从缓存组中删除加入到移除缓存数组中，再进行页面渲染；若否，则先获取缓存组件信息后，再将对应的组件从缓存数组中删除加入到移除缓存数组中，再进行页面渲染。

作为本发明的一种优选方式，在动态移除缓存中，通过路由match方法获取页面组件信息来获取页面组件名称包括以下步骤：在路由跳转之前调用，页面组件信息为函数或对象，若为函数，则调用函数获取页面组件名称；若为对象，则通过获取对象属性的方式获取页面组件名称。

作为本发明的一种优选方式，在无代码侵入的动态缓存中，通过路由match方法获取页面组件信息来获取页面组件名称包括以下步骤：在路由跳转之后调用，页面组件信息为对象，通过获取对象属性的方式获取页面组件名称。

作为本发明的一种优选方式，所述装饰器用作页面的包装。

作为本发明的一种优选方式，若渲染过，且未使用装饰器，则通过name属性直接获取缓存组件信息。

发明人还提供了一种单页面应用交互体验优化装置，所述单页面应用交互体验优化装置包括：

触发装置，通过路由跳转访问页面组件，在全局标签组件中通过监听路由变化，在页面挂载标签页面的过程中，动态增加页面缓存，通过标签组件的处理全局增加页面缓存；

获取装置，通过路由match方法获取页面组件信息，视页面组件信息为对象，通过获取对象属性的方式获取页面组件名称；

多级页面嵌套装置，至少包括一级页面、二级页面和三级页面，所述二级页面嵌套于一级页面内，三级页面嵌套于二级页面内，所述一级页面增加缓存组件，在一级页面的缓存组件内增加二级页面，在二级页面内也增加缓存组件，在二级页面的缓存组件内增加三级页面；

页面嵌套缓存装置，用于循环调用match方法返回的数据列表，将一级页面之外的页面名称存储在缓存数组中。

发明人还提供了一种单页面应用交互体验优化设备，所述单页面应用交互体验优化设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互联；所述至少一个处理器调用所述存储器中的所述指令，以使得所述单页面应用交互体验优化设备执行上述发明内容中任意一项所述的方法。

发明人还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述发明内容中任意一项所述方法的步骤。

区别于现有技术，上述技术方案所达到的有益效果有：

（1）有效的解决了需求要求应用实现同一页面不同进入方式，即点击标签和点击菜单、以及缓存方案不同的问题；（2）有效的解决了应用中的页面路由并不是在同一级别，有的是二级路由，有的是三级路由，路由深度不同的问题；（3）有效的解决了项目由于前期规划问题，应用结构相对复杂，部分页面是引入通过装饰器的方式引入了Typescript，部分页面是没有引入Typescript的问题；（4）有效的解决了由于代码规范没有硬性规定，路由名和页面组件名不一致的问题；（5）有效的解决了应用较大，需求需要考虑全局调整，减少代码侵入性的问题。

附图说明

图1为背景技术中缓存处理常用方法流程图。

图2为具体实施方式所述单页面应用交互体验优化方法的整体流程图。

图3为具体实施方式所述页面缓存流程图。

图4为具体实施方式所述多级页面嵌套关系图。

图5为具体实施方式所述动态移除缓存流程图。

图6为具体实施方式所述单页面应用交互体验优化装置示意图。

图7为具体实施方式所述单页面应用交互体验优化设备示意图。

附图说明：

101、触发装置；102、获取装置；103、多级页面嵌套装置；104、页面嵌套缓存装置；201、处理器；202、电源；203、有线或无线网络接口；204、输入输出接口；205、操作系统；206、数据；207、应用程序；208、存储介质；209、存储器。

具体实施方式

为详细说明技术方案的技术内容、构造特征、所实现目的及效果，以下结合具体实施例并配合附图详予说明。

基于Vue缓存常用的处理方案的基础上，依然是采用缓存组件和数组参数来作为实现的基础。考虑到对应用代码的侵入性最小，本发明放弃了利用组件钩子函数来实现的想法，将触发缓存存储和移除的工作放在全局事件中。放弃组件钩子之后，解决的问题有：（1）利用哪些事件触发缓存的存储和移除；（2）由于路由名称和页面组件名称不一致，需要通过路由获取页面组件信息，从页面组件信息中获取页面组件名；（3）菜单路由层级的不同，导致多级缓存嵌套问题。

通过路由match方法获取组件信息，例如：一个页面路由/a/b/c，match方法返回一个数组，返回各级路由及对应的组件信息，例如：

[

{path: ‘/a’, components:{}, ...},

{path: ‘/a/b’, components:{}, ...},

{path: ‘/a/b/c’, components:{}, ...}

]

图2为单页面应用交互体验优化方法的整体流程，本方法有效的解决了需求要求应用实现同一页面不同进入方式，即点击标签和点击菜单、以及缓存方案不同的问题；应用中的页面路由并不是在同一级别，有的是二级路由，有的是三级路由，路由深度不同的问题；由于代码规范没有硬性规定，路由名和页面组件名不一致；应用较大，需求需要考虑全局调整，减少代码侵入性等问题；以及项目由于前期规划问题，应用相对复杂，部分页面是引入通过装饰器的方式引入了Typescript，部分页面是没有引入Typescript的问题。

如图3和图4所示，本实施例为无代码侵入的动态缓存的实现流程，包括以下步骤：

触发事件：为了保证全局页面生效，减少代码的侵入性，添加页面缓存的操作需要从最外层的页面布局中寻找，每个页面访问的时候都会生成标签组件，通过监听路由的变化，在页面挂载标签组件的时候，可以动态增加缓存；

获取页面组件名称：通过路由跳转到对应页面，渲染标签组件时，利用路由match方法获取组件信息，这时组件信息是一个对象，直接通过获取对象属性的方式就可以获取组件名；路由的match方法是在不同时机调用的，在缓存的时候，是在路由跳转之后调用，这个时候match获取的数据中组件名称已经存在，直接通过获取对象属性的方式可以获取页面组件名称；

多级页面嵌套：多级路由必然会出现页面的嵌套，多级嵌套的页面要实现缓存，必须给多级页面都加缓存组件，单给最后一级页面增加缓存组件是不生效的。

在上述实施例中，无代码侵入的动态缓存触发事件选择，利用页面组件的全局标签组件监听路由变化，动态增加页面缓存，实现全局页面缓存。利用菜单在路由跳转之前增加点击事件，动态移除缓存，以达到点击菜单刷新页面的目的；利用路由match方法实现获取多级页面组件名，实现多级嵌套页面的缓存；不同页面组件，获取路由跳转之前页面组件名，进行页面的移除。在移除缓存的时候，需要在路由跳转之前，这个时候match获取的组件信息还未处理，可能是一个函数，也可能是一个对象，针对函数，要调用函数获取组件名称，对于对象直接通过获取对象属性获取页面组件名称。

如图3所示，页面缓存包括以下步骤：访问页面后，利用标签组件监听路由变化；读取页面组件名称放入缓存数组中，并判断路由是否是二级路由，若是，则结束页面缓存，若否，则读取父级页面组件名称放入缓存中后，再重新判断路由是否是二级路由，依次循环。

如图4所示，要实现三级页面/a/b/c这个页面的缓存，在一级页面/a内增加缓存组件，这个缓存组件的缓存数组中需要增加二级页面/a/b，也在二级页面/a/b中增加缓存组件，在二级页面/a/b的缓存组件的缓存数组里面增加三级页面/a/b/c。在本实施例种，多级页面至少有三级页面，当有四级页面及以上时，按照上面的方法依次类推。

页面的嵌套要实现缓存，就是循环调用match方法返回的数据列表，将除了一级页面之外的页面名称存储在缓存数组中，如图4页面缓存流程图所示。

如图5所示，本实施例为动态移除缓存流程，具体包括：触发事件：根据需求要求，在点击菜单的时候删除缓存，由于菜单定义在最外层的页面布局中，所以给菜单添加的点击事件是全局的，对于代码没有强的侵入性，只需要一个事件就可以保证全部应用页面实现缓存移除的功能，所以触发事件选择的是给菜单绑定点击事件，菜单的点击事件是在路由跳转之前（标签组件的监听事件是在路由跳转之后调用），保证了移除缓存和添加缓存的顺序性，在页面加载之前统一卸载掉页面缓存，不会影响到页面加载之后无论是页面添加缓存还是移除缓存；（2）获取页面组件名称：点击菜单事件，此事件相对复杂，对应的情况可能是已经渲染过的页面组件，也可能未渲染的页面组件，也可能是通过装饰器包装的页面组件，点击菜单的时候，页面并没有进入渲染阶段，所以在获取页面名称的时候需要根据具体情况处理，包括以下三种情况：第一种情况是：页面已经渲染过了，即：之前访问过该页面，且不是使用装饰器做包装的页面，由于虚拟DOM已经生成，可以通过name属性直接获取页面组件名称；第二种情况是：组件未渲染过，不需要处理；第三种情况是：页面已经渲染过了且使用的是装饰器包装的页面，路由返回的页面组件信息还是一个函数，是一个普通函数，直接调用函数，函数返回值中获取页面组件名称；（3）多级嵌套：移除的时候可以不考虑多级嵌套的问题，只需要移除对应的页面组件名，这就即可保证页面缓存失效。点击菜单对页面进行刷新操作，只会对当前菜单对应的页面组件生效，不会影响到其他缓存的页面。

如图6所示，本实施例提供了一种单页面应用交互体验优化装置，触发装置101，通过路由跳转访问页面组件，在全局标签组件中通过监听路由变化，在页面挂载标签页面的过程中，动态增加页面缓存，通过标签组件的处理全局增加页面缓存；

获取装置102，通过路由match方法获取页面组件信息，视页面组件信息为对象，通过获取对象属性的方式获取页面组件名称；

多级页面嵌套装置103，至少包括一级页面、二级页面和三级页面，所述二级页面嵌套于一级页面内，三级页面嵌套于二级页面内，所述一级页面增加缓存组件，在一级页面的缓存组件内增加二级页面，在二级页面内也增加缓存组件，在二级页面的缓存组件内增加三级页面；

页面嵌套缓存装置104，用于循环调用match方法返回的数据列表，将一级页面之外的页面名称存储在缓存数组中。

如图7所示，本实施例提供了一种单页面应用交互体验优化设备，所述单页面应用交互体验优化设备包括：存储器209和至少一个处理器201，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互联；所述至少一个处理器调用所述存储器中的所述指令，以使得所述单页面应用交互体验优化设备执行上述实施例中任意一项所述的方法。

单页面应用交互体验优化设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)201和存储器209，一个或一个以上存储应用程序207或数据206的存储介质208。其中，存储器和存储介质可以是短暂存储或持久存储。存储在存储介质的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对基于单页面应用的优化设备中的一系列指令操作。更进一步地，处理器可以设置为与存储介质通信，在基于单页面应用的优化设备上执行存储介质中的一系列指令操作。

基于单页面应用的优化设备还可以包括一个或一个以上电源202，一个或一个以上有线或无线网络接口203，一个或一个以上输入输出接口204，和/或，一个或一个以上操作系统205，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图7中示出的基于单页面应用的优化设备结构并不构成对基于单页面应用的优化设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，尽管在本文中已经对上述各实施例进行了描述，但并非因此限制本发明的专利保护范围。因此，基于本发明的创新理念，对本文所述实施例进行的变更和修改，或利用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接地将以上技术方案运用在其他相关的技术领域，均包括在本发明的专利保护范围之内。

Claims

1.一种单页面应用交互体验优化方法，其特征在于，包括无代码侵入的动态缓存，所述无代码侵入的动态缓存包括以下步骤：

2.根据权利要求1所述的单页面应用交互体验优化方法，其特征在于，所述页面缓存包括以下步骤：

3.根据权利要求1所述的单页面应用交互体验优化方法，其特征在于，还包括动态移除缓存，所述动态移除缓存包括以下步骤：

4.根据权利要求3所述的单页面应用交互体验优化方法，其特征在于：在动态移除缓存中，通过路由match方法获取页面组件信息来获取页面组件名称包括以下步骤：

在路由跳转之前调用，页面组件信息为函数或对象，若为函数，则调用函数获取页面组件名称；若为对象，则通过获取对象属性的方式获取页面组件名称。

5.根据权利要求3所述的单页面应用交互体验优化方法，其特征在于：所述装饰器用作页面的包装。

6.根据权利要求3所述的单页面应用交互体验优化方法，其特征在于：若渲染过，且未使用装饰器，则通过name属性直接获取缓存组件信息。

7.根据权利要求1所述的单页面应用交互体验优化方法，其特征在于：在无代码侵入的动态缓存中，通过路由match方法获取页面组件信息来获取页面组件名称包括以下步骤：

在路由跳转之后调用，页面组件信息为对象，通过获取对象属性的方式获取页面组件名称。

8.一种单页面应用交互体验优化装置，其特征在于，所述单页面应用交互体验优化装置包括：

9.一种单页面应用交互体验优化设备，其特征在于，所述单页面应用交互体验优化设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互联；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述单页面应用交互体验优化设备执行上述权利要求1-7中任意一项所述的方法。

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