CN110321503B - 一种web组件缓存方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供了一种web组件缓存方法、装置及电子设备，该方法包括：在启动目标web应用的目标页面时，确定目标页面对应的目标组件；获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息；根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果；若当前组件为交互状态，且二值化分析结果均表征假，将当前组件加入缓存，并设置当前组件为游离状态。通过本发明实施例实现对组件进行精细化控制，维护成本下降，开发时间周期缩短的效果。

Description

一种web组件缓存方法、装置及电子设备

技术领域

本申请涉及计算机网页开发技术，特别是涉及一种web组件缓存方法、装置及电子设备。

背景技术

HTML5(Hypertext Markup Language 5，超文本标记语言5)的发展，为移动web(World Wide Web，万维网)应用的体验优化带来了新的思路，web应用是采用HTML(Hypertext Markup Language，超文本标记语言)、Javascript、CSS(Cascading StyleSheets，层叠样式表)等web技术开发的、通过浏览器访问的应用软件，是移动设备上最主要软件形式之一。而基于HTML5的web APP(Application，第三方应用程序)在使用的流畅度上相比传统原先的APP要低很多。这是因为由于web APP采用javascript解释器语言进行页面渲染和交互，试行效率较低，延长了页面交互时间。缓存是提高web应用流畅度性能的一种重要技术手段。缓存可以减少网络请求数量，从而减少web应用访问时的数据流量消耗，进而提高web应用的加载速度。

目前流行的缓存方案采取手动编写每个组件的缓存逻辑，从而进行缓存操作。

然而，本申请的发明人现有技术很难对组件进行缓存精细化控制，因为缓存逻辑是基于APP业务层面而建立的，代码高耦合，针对大型的网页开发项目，组件缓存功能修改产生的维护成本高，需要重新开发，时间周期长。

发明内容

本申请实施例的目的在于提供一种web组件缓存方法、装置及电子设备，以实现对单个组件进行缓存规则的精细化控制，降低了维护成本低。具体技术方案如下：

第一方面，本发明实施例提供了一种web组件缓存方法，该方法包括：

在启动目标web应用的目标页面时，确定目标页面对应的目标组件；

获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件；

根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；

利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件；

若当前组件为交互状态，且所述各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

可选的，该方法还包括：

若当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态。

可选的，在启动目标web应用的目标页面时，确定目标页面对应的目标组件，包括：

在启动目标web应用的目标页面时，获取目标页面的目标路由；

按照目标路由查询预先建立的关系映射表，确定目标路由对应的目标组件，其中，关系映射表中存储了目标web应用的路由与组件的对应关系。

可选的，在获取目标页面的目标路由之后，该方法还包括：

若在关系映射表中，未查找到目标路由对应的组件，则展示错误提示页面。

可选的，在启动目标web应用的目标页面之前，该方法还包括：

在首次启动目标web应用时，按照目标web应用中各组件与路由的对应关系，建立关系映射表；

分别针对各组件设置缓存配置函数，将各组件与各缓存配置函数关联存储到函数映射表中。

可选的，目标缓存配置函数包括支持props参数及父组件parents参数，利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，包括：

分别比较目标缓存配置函数props参数与各已缓存组件的props参数，分别比较目标缓存配置函数parents参数与各已缓存组件的parents参数；

若已缓存组件的props参数与目标缓存配置函数的props参数相同，且已缓存组件的parents参数与目标缓存配置函数的parents参数相同，判定已缓存组件的二值化分析结果为真；否则判定已缓存组件的二值化分析结果为假。

第二方面，本发明实施例提供了一种web组件缓存装置，该装置包括：

第一确定模块，用于在启动目标web应用的目标页面时，确定目标页面对应的目标组件；

获取模块，用于获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件；

第二确定模块，用于根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；

分析模块，用于利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件；

第一设置模块，用于若当前组件为交互状态，且各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

可选的，该装置还包括：

第二设置模块，用于若当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态；

可选的，该第一确定模块，具体用于：

在启动目标web应用的目标页面时，获取目标页面的目标路由；

按照目标路由查询预先建立的关系映射表，确定目标路由对应的目标组件，其中，关系映射表中存储了目标web应用的路由与组件的对应关系。

可选的，该装置还包括：

提示模块，用于若在关系映射表中，未查找到目标路由对应的组件，则展示错误提示页面。

可选的，该装置还包括：

关系映射表建立模块，用于在首次启动目标web应用时，按照目标web应用中各组件与路由的对应关系，建立关系映射表；

函数映射表建立模块，用于分别针对各组件设置缓存配置函数，将各组件与各缓存配置函数关联存储到函数映射表中。

可选的，该分析模块，具体用于：

分别比较目标缓存配置函数props参数与各已缓存组件的props参数，分别比较目标缓存配置函数parents参数与各已缓存组件的parents参数；

若已缓存组件的props参数与目标缓存配置函数的props参数相同，且已缓存组件的parents参数与目标缓存配置函数的parents参数相同，判定已缓存组件的二值化分析结果为真；否则判定已缓存组件的二值化分析结果为假。

第三方面，本发明实施例提供一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

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

处理器，用于执行存储器上所存放的程序时，实现上述第一方面的任一web组件缓存方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面的任一web组件缓存方法。

第五方面，本发明实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述第一方面的任一web组件缓存方法。

本申请实施例提供的一种web组件缓存方法、装置及电子设备，该方法包括：在启动目标web应用的目标页面时，确定目标页面对应的目标组件；获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件；根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果表征真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件；若当前组件为交互状态，且二值化分析结果均表征假，将当前组件加入缓存，并设置当前组件为游离状态。

实现了对单个组件进行缓存策略的设定和修改，而不影响整体APP缓存策略的实施效果，实现了精细化控制。当存在多个目标组件时，对目标组件中的正在运行的一个当前组件基于运行状态编制缓存策略，实现了基于APP业务层面的缓存设置，使得维护成本下降，开发时间周期缩短。当然，实施本申请的任一产品或方法并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1为本申请实施例的一种web组件缓存方法的第一种流程示意图；

图2为本申请实施例的一种web组件缓存方法的第二种流程示意图；

图3为本申请实施例的一种web组件缓存方法的第三种流程示意图；

图4为本申请实施例的一种web组件缓存方法的第四种流程示意图；

图5为本申请实施例的一种web组件缓存装置的一种示意图；

图6为本申请实施例的web组件运行状态示意图；

图7为本申请实施例的电子设备的一种示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

随着互联网用户数量的增多，越来越多的用户对web APP的体验感要求越来越高，造成了大型web应用所面对的数据访问量的急剧增加。为了提高访问速度，很多web应用中采用了不同的缓存技术。原生APP是一个系统性的应用程序，而web APP更多是页面展示类的APP，其功能差距可以类比电脑上的软件与电脑网页之间的差别。原生APP可以调用手机终端的硬件设备，但是web APP则不可以。

HTML5是HTML最新的修订版本，HTML5的目的是为了在移动设备上支持多媒体制作而设计的。因为目前的web APP采用javascript解释器语言进行页面渲染和交互，执行效率很低，延长了用户对于页面可交互的等待时间，所以造成了HTML5的web APP在使用的流畅度上比原生的APP要低。

在前端开发中，性能属性越来越受到重视，判断一个网站的性能最直观的方法是观察网页打开的速度。提高网页反应速度的一个方式就是使用缓存策略，一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以被重复使用，还可以减少宽带，降低网络负荷。

针对web APP目前常用的缓存方案中主要采取对每个组件手动编写缓存逻辑，通常是基于对需要缓存的组件的相关数据的本身性质分类来设置不同性质的缓存策略。但是一旦缓存方案制定完成之后，对每种组件相关的数据的缓存策略就固定下来，在后期的开发应用中不能再变动。此种方式通过将缓存逻辑写到了业务层面上，从而实现了代码的高耦合，最后对APP中的组件实现了精细化控制。但是对于大型的APP开发项目，维护成本较高。当组件缓存逻辑需要修改时，则需要对整款APP组件的逻辑算法重新编写设定，致使开发周期变长。

有鉴于此，本发明实施例提供了一种web组件缓存方法，参见图1，该方法包括：

S11，在启动目标web应用的目标页面时，确定目标页面对应的目标组件。

本申请实施例的web组件缓存方法应用于Web APP，因此可以通过运行Web APP的电子设备执行。

具体的，网页组件又可以称作web组件，网页组件包含各种常见的界面组件，如：表格、树、联动下拉框等。组件可以看作是自定义的HTML元素，web组件可以通过模板将数据和HTML分离，即用户可以在不同的开发环境中使用web组件。

目标页面为目标web应用中的任一网页。例如，当启动web应用时，会打开多个网页，每个网页包含至少一个或多个组件。在一种可能的实施方式中，可以将目标web应用的首页作为目标页面。根据预先建立的路由查询设置存储在电子设备系统内的映射表，可以得到对应的组件。

在一种可能的实施方式中，将正在进行状态迁移的一个组件或者多个组件作为目标组件，或者将需要进行状态迁移的一个组件或者多个组件作为目标组件。每张映射表中会存在多个组件，多个组件可以同时进行状态迁移。

S12，获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件。

具体的，组件是可以重用、开发和部署的软件模块。在用户打开web网页中的组件进行前进后退的导航中，组件执行它生命周期内的回调函数，这些函数在特殊的时间点或遇到一些特殊的框架时间时会被自动触发。其中，最重要的生命周期是创建、执行、退出这三种过程，这三个过程包含了一个组件实例生命流程的最主要的时间点，分别对应状态机的entry、on、exit三个运行状态。

组件实例刚刚被创建好时，其创建的生命周期被触发；在组件完全初始化完毕，进入页面节点树后，执行的生命周期被触发；在组件离开页面节点树后，退出的生命周期被触发。

除此之外，参见图6，为本申请实施例的一种web组件运行状态示意图，从该图中可以看出组件从实例化到销毁，对其生命周期进行建模，还可以将组件分为四种状态：初始状态、交互状态、游离状态及结束状态。本申请实施例中将上述四种状态定义生命周期状态，初始状态对应组件实例化之前的状态；交互状态对应组件实例化完成的状态，此状态下对用户可交互；结束状态对应组件被销毁的状态，在这个过程中会释放该组件所占用的资源，这些资源可以是内存信息或者CPU信息，此处的内存信息是指当前运行的进程所占用的内存资源，CPU信息为运行的程序所占用的CPU资源；游离状态对应组件未被销毁的状态，此时组件仍然占用资源，并且对用户不可见，即不可交互。

启动web页面时，获取目标组件中正在进行状态迁移的当前组件的生命周期状态，正在进行状态迁移的当前组件为目标web应用的目标页面中的目标组件中的一个，此处组件的运行状态可以为初始状态、交互状态、游离状态、结束状态的任意一种。此处的目标组件可以为多个组件或者一个组件，当目标组件中的一个组件发生状态迁移时，这个组件就是当前组件。

可以理解的，获取缓存中各已缓存组件的参数信息，此处的参数信息是指组件的props(支持)参数信息和parents(父组件)参数信息。props参数相当于组件的属性设置，它是组件的不可变属性。组件自身不能修改自身的props属性参数，只可由其他组件调用它时在外部进行修改，parents参数信息即parents参数信息。

组件自身定义了一组props参数作为对外提供的接口，展示一个组件时只需要设置props参数作为节点的属性。由于组件很少对外公开方法，比如工具类的静态方法，唯一交互的途径就是props参数，因此props参数信息也是父组件和子组件通信的桥梁参数。

S13，根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数。

在web应用的目标页面中可以存在多个功能模块，每个功能模块下存在有多个组件，不同的功能模块中可以存在同一个组件。其中，当前组件与目标缓存配置函数的对应关系可以根据web应用预先设定好。具体的，不同的当前组件可以对应不同的目标缓存配置函数，或者，同一个当前组件在不同的功能模块下可以对应相同的或者不同的目标缓存配置函数，在此不做具体限制。

根据启动web目标应用时，确定目标页面中的目标组件后，根据预先建立的存储某个组件与该组件对应的缓存配置函数的函数映射表，确定出目标缓存配置函数，该映射表的功能是为了根据组件查询到对应组件的缓存策略。

缓存策略主要体现在缓存内容、缓存时间、缓存替换算法这三个方面。缓存内容是将需要经常访问的并且极少被改变的内容放入缓存，缓存时间表示为何时加入缓存。本申请实施例的缓存内容是目标web应用的目标页面中需要加入缓存的组件，缓存时间由缓存策略决定，缓存策略中包括有缓存配置函数，每个组件都对应有相应的缓存配置函数。

S14，利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假，该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件。

调取当前组件对应的缓存配置函数作为目标缓存配置函数，目标缓存配置函数对启动的web应用的目标页面中的已经缓存过的组件的props参数以及父组件parents参数信息进行解析，得到各已缓存组件的分析结果，其结果可以为真或假。

可以理解的，在本申请实施例中目标缓存配置函数对启动的web应用的目标页面中的已经缓存过的组件的两个参数进行解析，其过程为parents参数查询启动的web应用的目标页面，查询该网页中的所有的子组件中是否存在有处于游离态的组件，将所有处于游离态的组件中的props参数以及父组件parents参数与其各自游离态的组件对应的缓存配置函数中的props参数以及父组件parents参数进行比较。设置两组参数一一对应相同，则二值化分析结果表征真，若两组参数中有一组不相同，则二值化分析结果表征假，若两组参数对应都不相同，则二值化分析结果表征假。

具体的，二值化分析结果可以用于控制目标组件(状态机)的进入和退出行为，此处的进入退出行为代表目标组件是否需要从缓存中获取，或者是否需要加入缓存。

S15，若当前组件为交互状态，且所述各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

若当前组件处于四种运行状态中的交互状态，将该组件的props参数和parents参数作为函数参数传入缓存策略函数中进行分析。若二值化的分析结果表征是假，即缓存策略的函数返回值为假，则启动的web页面中正在进行状态迁移的当前组件变为游离状态或者结束状态，并且将该当前组件在进行状态迁移之前加入缓存中。但是如果二值化的分析结果表征是真，即缓存策略的函数返回值为真，则对当前组件不需要进行任何操作。

本申请实施例中，用户启动web页面进行导航的过程中，组件不断的执行四种状态的迁移。预先配置好缓存规则，组件在初始状态下读取该缓存规则。再次启动该web页面时，从缓存中获取游离状态的组件，根据缓存规则判断进行状态迁移的当前组件是否需要使用缓存。若是，则执行组件对应的缓存函数，若否，则将其销毁进入结束状态。对组件在状态迁移的过程中进行建模，实现了web组件化方式定义缓存规则。既满足了对特定页面缓存规则的精细控制，又和业务代码解耦，便于后期维护。

可选的，该方法还包括：若当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态。

所有web组件都是一个状态机，父子组件对应层次状态机中的“复合状态”和“子状态”，例如，首页对应的是“复合状态”，消息列表页对应的是“子状态”，每个状态都具备相同的内部结构。首页对应的就是复合状态，消息列表页对应的就是子状态，每个状态都具备相同内部结构。当用户进入首页，首页的状态迁移进入初始状态，由于消息列表页是首页的子组件对应的是复合状态的子状态，因此复合状态的初始状态状态迁移到消息列表页子状态，如果消息列表页仍有子状态机，则按照同样的规则进行迁移。此时子状态消息列表页进入初始状态，然后进入交互状态，此时子状态消息列表页或者说组件消息列表页处于用户可交互状态，而复合状态，首页或者说组件首页则等到所有类似于消息列表页这样的子状态或者子组件都处于交互状态，则其才进入“交互状态”。

若当前组件处于四种运行状态中的初始状态，则将该组件的props参数和parents参数作为函数参数传入缓存策略函数中进行分析。若二值化的分析结果表征是真，即缓存策略的函数返回值为真，则将启动的web页面中已缓存的游离态的组件重新激活为交互状态，并且从缓存中删除该组件。若二值化的分析结果表征是假，则表示缓存中没有该组件，无法进行激活操作。

可选的，参见图2，在启动目标web应用的目标页面时，确定该目标页面对应的目标组件，包括：

S110，在启动目标web应用的目标页面时，获取该目标页面的目标路由。

常见的应用程序有两种模式分别为C/B、B/S，其中C/B是客户端/服务器端程序，这类程序一般独立运行。但是B/S为浏览器端/服务器端应用程序，而web应用程序一般B/S模式，一个web应用程序是由完成特征任务的各种web组件构成，并且通过web将服务展示给外界。

用户可以同时打开多个web应用程序，选择其中的一个作为目标web应用，每个目标web应用中可以包括多个网页。选择包含所有目标组件的网页作为目标页面，根据该目标页面获得目标路由，此处的路由并不是指硬件路由器，而是SPA(single pageapplication，单页应用)的路径管理器。

S120，按照该目标路由查询预先建立的关系映射表，确定该目标路由对应的目标组件，其中，该关系映射表中存储了目标web应用的路由与组件的对应关系。

在进行web应用的前端开发中，需要设置关系映射表来存储目标web应用的路由与组件的对应关系。传统的页面应用中，使用超链接来实现页面的切换和跳转。而在web应用中的单页面应用是基于组件和路由建立的，路由用于设定访问路径，并将路径与组件映射起来，该映射关系的实现可以利用vue-router，react-router等开源框架的方法来构建。

路由和组件是一对一的类映射关系，路由的本质是类的查找，工作原理类似于仓库管理员将类全部放入仓库中，需要时根据提供的信息查找存放在仓库中的类，常见有3种查找的类：Activity子类、Fragment子类和自定义接口实现类。第一种Activity子类是路由库提供startActivity的封装，并根据字符串从关系映射表中获取对应的Activity类，第二种Fragment子类是路由库根据字符串从关系映射表中对应的Fragment类，并创建一个对象返回给超找方，第三种自定义接口实现类是路由库根据字符串从关系映射表中获取对应接口的实现类，并创建一个对象返回给调用方。

在获取到目标页面的目标路由后，按照该目标路由查询在进行web应用的前端开发中预先建立好的关系映射表，确定该目标路由对应的目标组件，此处的目标组件也可以为多个组件，也可以为一个组件。

可选的，在获取该目标页面的目标路由之后，该方法还包括：若在该关系映射表中，未查找到目标路由对应的组件，则展示错误提示页面。

可以理解的，在HTML5应用启动完成后，若存在网络连接问题，根据预先建立好的关系映射表中未能查询到目标路由对应的组件，则说明可能未能建立好路由与组件的映射关系，这时会展示错误提示页面；或者在应用启动时，由于网速过慢，网页代码未能完全下载下来，此时未查找到目标路由对应的组件，则展示错误提示页面；在启动目标web应用时，在获取目标页面的目标路由之后，未查找到该目标路由对应的组件，则会展示错误提示页面。

可选的，参加图3，在启动目标web应用的目标页面之前，该方法还包括：

S1110，在首次启动该目标web应用时，按照该目标web应用中各组件与路由的对应关系，建立关系映射表。

可以理解的，路由就是根据不同的URL(Uniform Resource Locator，统一资源定位符)网址地址展示不同的内容或页面，传统的路由是浏览器地址栏中的URL与所见网页的对应关系，但针对于web开发而言，路由是URL到函数的映射。无论是vue-router还是react-router都要提供一种配置方式，可以配置出URL路径和要展示的组件的对应关系，即建立关系映射表。用户通过页面点击或者其他方式触发URL变化时，系统就根据该URL找到对应的vue组件或者react组件。

Web应用中前端路由出现在单页面应用中，页面中公共部分不变，只改变部分内容的使用，路由切换时根据不同的路由动态加载不同的组件，可以利用vue-router，react-router等开源框架的方法来构建关系映射表。其中vue-router是全局配置方法，任何路由组件都会被渲染到router-view位置，而react-router是全局组件方式，react-router子组件作为children被传入父组件，而根组件则被渲染到router的位置上。

S1210，分别针对各组件设置缓存配置函数，将各组件与各缓存配置函数关联存储到函数映射表中。

每一个组件都需要预先建立起与之对应的缓存配置文件，其目的是为了根据组件查询对应组件的缓存策略。缓存策略对每一个需要缓存的组件配置一个缓存函数，该函数以组件的props和parents为参数。详细地，由于业务模式不同，即各个组件的实现功能为多种，则组件对应设置的缓存配置函数就为多种。因此，需要分别针对各组件的功能设置缓存配置函数，并将各组件与各组件对应的缓存配置函数关联存储到函数映射表中，便于在启动目标web应用目标页面之后，确定目标组件后根据函数映射表读取相应的缓存策略配置文件，在缓存策略配置文件中查询到缓存配置函数。

可选的，参见图4，该目标缓存配置函数包括支持props参数及parents参数，利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，包括：

S141，分别比较目标缓存配置函数props参数与各已缓存组件的props参数，分别比较目标缓存配置函数parents参数与各已缓存组件的parents参数。

根据组件查询到预先建立的函数映射表以后，得到了对应的缓存策略，此时将当前组件的props参数以及parents参数作为函数参数传入缓存策略函数。比较目标缓存配置函数中的props参数与各已缓存组件的props参数的两个值是否相同，再比较目标缓存配置函数的parents参数与各已缓存组件的parents参数值是否相同，根据判断结果生成真或假的返回值。

在web应用中父组件通过props参数向下传递数据给子组件。因为组件实例的作用域是孤立的，在子组件的模板内不能直接引用父组件的数据。如果要让子组件使用父组件的数据，则需要通过子组件的props参数进行父子组件的数据传输。“prop”是组件数据的一个字段，可以从父组件传递下来。除此之外，prop是单向绑定，当父组件的属性变化时，将传导给子组件，但是不会反向传递。每次父组件更新时，子组件的所有prop值都会更新为最新值。

可以理解的，在web应用中parents参数和props参数是重要的属性参数，因此利用目标缓存配置函数对各已缓存组件的参数信息进行分析的过程，是对parents参数和props参数进行分析的过程。

S142，若已缓存组件的props参数与目标缓存配置函数的props参数相同，且已缓存组件的parents参数与目标缓存配置函数的parents参数相同，判定已缓存组件的二值化分析结果为真；否则判定已缓存组件的二值化分析结果为假。

若已缓存组件的props参数和目标缓存配置函数的props参数不相同，或已缓存组件的parents参数与目标缓存配置函数的parents参数不相同，则二值化分析结果为假，表示该组件不需要进行缓存操作。

本发明实施例提供了一种web组件缓存装置，参见图5，该装置包括：

第一确定模块110，用于在启动目标web应用的目标页面时，确定该目标页面对应的目标组件。

获取模块120，用于获取该目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，该当前组件为目标组件中的组件。

第二确定模块130，用于根据预先建立的函数映射表确定该当前组件对应的目标缓存配置函数。

分析模块140，用于利用该目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件。

第一设置模块150，用于若当前组件为交互状态，且各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

可选的，该装置还包括：

第二设置模块160，用于若当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态。

可选的，本申请实施例提供的web组件缓存装置，第一确定模块110，具体用于：

在启动目标web应用的目标页面时，获取该目标页面的目标路由。

按照该目标路由查询预先建立的关系映射表，确定该目标路由对应的目标组件，其中，该关系映射表中存储了目标web应用的路由与组件的对应关系。

可选的，本申请实施例提供的web组件缓存装置还包括：

提示模块，用于若在关系映射表中，未查找到目标路由对应的组件，则展示错误提示页面。

可选的，本申请实施例提供的web组件缓存装置还包括：

关系映射表建立模块，用于在首次启动目标web应用时，按照目标web应用中各组件与路由的对应关系，建立关系映射表；

函数映射表建立模块，用于分别针对各组件设置缓存配置函数，将各组件与各缓存配置函数关联存储到函数映射表中。

可选的，本申请实施例提供的web组件缓存装置，分析模块140，具体用于：

分别比较目标缓存配置函数props参数与各已缓存组件的props参数，分别比较目标缓存配置函数parents参数与各已缓存组件的parents参数。

若已缓存组件的props参数与目标缓存配置函数的props参数相同，且已缓存组件的parents参数与目标缓存配置函数的parents参数相同，判定已缓存组件的二值化分析结果为真；否则判定已缓存组件的二值化分析结果为假。

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

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

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

在启动目标web应用的目标页面时，确定目标页面对应的目标组件；

获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件；

根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；

利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件；

若当前组件为交互状态，且各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

可选的，处理器701用于执行存储器703上所存放的程序时，还能够实现上述的任一一种web组件缓存方法。

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

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

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

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

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，上述计算机程序被处理器执行时实现如下步骤：

在启动目标web应用的目标页面时，确定目标页面对应的目标组件；

获取目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，当前组件为目标组件中的组件；

根据预先建立的函数映射表确定当前组件对应的目标缓存配置函数；

利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，其中，二值化分析结果包括真或假；该二值化分析结果为真时表示该二值化分析对应的已缓存组件为当前组件，该二值化分析结果为假时表示该二值化分析对应的已缓存组件不为当前组件；

若当前组件为交互状态，且各已缓存组件的二值化分析结果均为假，将当前组件加入缓存，并设置当前组件为游离状态。

本方案实现了对单个组件进行缓存策略的设定和修改，而不影响整体APP缓存策略的实施效果，实现了精细化控制。当存在多个目标组件时，对目标组件中的正在运行的一个当前组件基于运行状态编制缓存策略，实现了基于APP业务层面的缓存设置，使得维护成本下降，开发时间周期缩短。

可选的，上述计算机程序被处理器执行时，还能够实现上述任一一种web组件缓存方法。

本发明实施例还提供一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一一种web组件缓存方法。

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

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

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

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

Claims (13)

1.一种web组件缓存方法，其特征在于，包括以下步骤：

在启动目标web应用的目标页面时，确定所述目标页面对应的目标组件；

获取所述目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，所述当前组件为所述目标组件中的组件；

根据预先建立的函数映射表确定所述当前组件对应的目标缓存配置函数；

利用所述目标缓存配置函数对所述各已缓存组件的参数信息进行分析，分别得所述各已缓存组件的二值化分析结果，其中，所述二值化分析结果包括真或假；所述二值化分析结果为真时表示所述二值化分析对应的已缓存组件为所述当前组件，所述二值化分析结果为假时表示所述二值化分析对应的已缓存组件不为所述当前组件；

若所述当前组件为交互状态，且所述各已缓存组件的二值化分析结果均为假，将所述当前组件加入缓存，并设置所述当前组件为游离状态。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

若所述当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态。

3.根据权利要求1所述的方法，其特征在于，所述在启动目标web应用的目标页面时，确定所述目标页面对应的目标组件，包括：

在启动目标web应用的目标页面时，获取所述目标页面的目标路由；

按照所述目标路由查询预先建立的关系映射表，确定所述目标路由对应的目标组件，其中，所述关系映射表中存储了目标web应用的路由与组件的对应关系。

4.根据权利要求3所述的方法，其特征在于，在所述获取所述目标页面的目标路由之后，所述方法还包括：

若在所述关系映射表中，未查找到所述目标路由对应的组件，则展示错误提示页面。

5.根据权利要求3所述的方法，其特征在于，在所述在启动目标web应用的目标页面之前，所述方法还包括：

在首次启动所述目标web应用时，按照所述目标web应用中各组件与路由的对应关系，建立所述关系映射表；

分别针对各所述组件设置缓存配置函数，将各所述组件与各所述缓存配置函数关联存储到函数映射表中。

6.根据权利要求1-5任一所述的方法，其特征在于，所述目标缓存配置函数包括支持props参数及父组件parents参数，所述利用目标缓存配置函数对各已缓存组件的参数信息进行分析，分别得各已缓存组件的二值化分析结果，包括：

分别比较所述目标缓存配置函数props参数与各所述已缓存组件的props参数，分别比较所述目标缓存配置函数parents参数与各所述已缓存组件的parents参数；

若所述已缓存组件的props参数与所述目标缓存配置函数的props参数相同，且所述已缓存组件的parents参数与所述目标缓存配置函数的parents参数相同，判定所述已缓存组件的二值化分析结果为真；否则判定所述已缓存组件的二值化分析结果为假。

7.一种web组件缓存装置，其特征在于，所述装置包括：

第一确定模块，用于在启动目标web应用的目标页面时，确定所述目标页面对应的目标组件；

获取模块，用于获取所述目标组件中正在进行状态迁移的当前组件的生命周期状态，获取缓存中各已缓存组件的参数信息，其中，所述当前组件为所述目标组件中的组件；

第二确定模块，用于根据预先建立的函数映射表确定所述当前组件对应的目标缓存配置函数；

分析模块，用于利用所述目标缓存配置函数对所述各已缓存组件的参数信息进行分析，分别得所述各已缓存组件的二值化分析结果，其中，所述二值化分析结果包括真或假；所述二值化分析结果为真时表示所述二值化分析对应的已缓存组件为所述当前组件，所述二值化分析结果为假时表示所述二值化分析对应的已缓存组件不为所述当前组件；

第一设置模块，用于若所述当前组件为交互状态，且所述各已缓存组件的二值化分析结果均为假，将所述当前组件加入缓存，并设置所述当前组件为游离状态。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

第二设置模块，用于若所述当前组件为初始状态，将二值化分析结果为真时的已缓存组件设置为交互状态。

9.根据权利要求7所述的装置，其特征在于，所述第一确定模块，具体用于：

在启动目标web应用的目标页面时，获取所述目标页面的目标路由；

按照所述目标路由查询预先建立的关系映射表，确定所述目标路由对应的目标组件，其中，所述关系映射表中存储了目标web应用的路由与组件的对应关系。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

提示模块，用于若在所述关系映射表中，未查找到所述目标路由对应的组件，则展示错误提示页面。

11.根据权利要求9所述的装置，其特征在于，所述装置还包括：

关系映射表建立模块，用于在首次启动所述目标web应用时，按照所述目标web应用中各组件与路由的对应关系，建立所述关系映射表；

函数映射表建立模块，用于分别针对各所述组件设置缓存配置函数，将各所述组件与各所述缓存配置函数关联存储到函数映射表中。

12.根据权利要求7-11任一所述的装置，其特征在于，所述分析模块，具体用于：

分别比较所述目标缓存配置函数props参数与各所述已缓存组件的props参数，分别比较所述目标缓存配置函数parents参数与各所述已缓存组件的parents参数；

若所述已缓存组件的props参数与所述目标缓存配置函数的props参数相同，且所述已缓存组件的parents参数与所述目标缓存配置函数的parents参数相同，判定所述已缓存组件的二值化分析结果为真；否则判定所述已缓存组件的二值化分析结果为假。

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

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

所述处理器，用于执行存储器上所存放的程序时，实现权利要求1-6任一所述的web组件缓存方法。

Images