CN112486489A

CN112486489A - 一种拍卖组件的渲染方法及设备

Info

Publication number: CN112486489A
Application number: CN202011443862.3A
Authority: CN
Inventors: 董海军
Original assignee: Shanghai Yueyi Network Information Technology Co Ltd
Current assignee: Shanghai Yueyi Network Information Technology Co Ltd
Priority date: 2020-12-11
Filing date: 2020-12-11
Publication date: 2021-03-12
Anticipated expiration: 2040-12-11

Abstract

本申请的目的是提供一种拍卖组件的渲染方法及设备，本申请通过获取拍卖展示界面中的拍卖组件及其拍卖起止时间，拍卖组件包括至少一个，拍卖组件包括商品信息栏、拍卖状态栏及拍卖倒计时栏；周期性地获取拍卖组件的当前时间；基于拍卖组件的当前时间和拍卖起止时间，确定拍卖组件的拍卖状态是否存在切换；当拍卖组件的拍卖状态存在状态切换时，在拍卖展示界面中对拍卖组件进行重新渲染；当拍卖组件的拍卖状态不存在状态切换时，在拍卖展示界面中对拍卖组件中的拍卖倒计时栏进行重新渲染并维持拍卖组件中的商品信息栏和拍卖状态栏不变，避免拍卖展示界面中的拍卖组件的重复渲染，从而提高页面的性能和流畅性，还节省显示的终端的电量。

Description

一种拍卖组件的渲染方法及设备

技术领域

本申请涉及前端开发领域，尤其涉及一种拍卖组件的渲染方法及设备。

背景技术

在前端React开发领域中，拍卖列表一般采用定时任务的统一管理，拍卖列表存在一个定时器，这样可以避免拍卖列表中的每个拍卖组件的内部开启一个定时器，造成性能和内存的浪费问题，但在拍卖列表的定时任务统一管理中，采用父子组件之间的通信函数props给拍卖组件传入当前时间，然后拍卖组件内部再使用props中的当前时间的变化，动态计算该拍卖组件的拍卖结束时间，拍卖组件的子组件中需要进行时间计算时，再次使用props传递当前时间给子组件，整个拍卖组件及其子组件都会有时间信息，可以完成时间的相关计算，但由于随着当前时间的改变，对各当前时间对应的拍卖列表中的各个拍卖组件及其子组件进行渲染，会造成整个拍卖组件及其子组件随着当前时间变化而重复渲染，尤其在拍卖列表中的拍卖元素很多的时候，使得在重复渲染中因存在很多计算，造成页面卡顿，体验不流畅，还会增加手机电量的消耗。

发明内容

本申请的一个目的是提供一种拍卖组件的渲染方法及设备，避免页面组件的重复渲染，从而提高页面的性能和流畅性，还节省显示的终端的电量。

根据本申请的一个方面，提供了一种拍卖组件的渲染方法，其中，所述方法包括：

获取拍卖展示界面中的拍卖组件及其拍卖起止时间，所述拍卖组件包括至少一个，所述拍卖组件包括商品信息栏、拍卖状态栏及拍卖倒计时栏；

周期性地获取所述拍卖组件的当前时间；

基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换；

若所述拍卖组件的拍卖状态存在状态切换，则在所述拍卖展示界面中，对所述拍卖组件进行重新渲染；

若所述拍卖组件的拍卖状态不存在状态切换，则在所述拍卖展示界面中，对所述拍卖组件中的所述拍卖倒计时栏进行重新渲染，并维持所述拍卖组件中的所述商品信息栏和所述拍卖状态栏不变。

进一步地，上述方法中，所述基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换，包括：

基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的当前拍卖状态；

基于所述拍卖组件的当前拍卖状态，确定所述拍卖组件的拍卖状态是否存在切换。

进一步地，上述方法中，所述拍卖起止时间包括拍卖开始时间和拍卖结束时间，其中，基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的当前拍卖状态，包括：

当所述当前时间小于所述拍卖开始时间时，确定所述拍卖组件的当前拍卖状态为未开始状态；

当所述当前时间大于等于所述拍卖开始时间且小于所述拍卖结束时间时，确定所述拍卖组件的当前拍卖状态为进行中状态；

当所述当前时间大于等于所述拍卖结束时间时，确定所述拍卖组件的当前拍卖状态为已结束状态。

进一步地，上述方法中，所述基于所述拍卖组件的当前拍卖状态，确定所述拍卖组件的拍卖状态是否存在切换，包括：

获取所述拍卖组件在所述当前时间的前一时间对应的前一拍卖状态；

若所述拍卖组件的所述当前拍卖状态和所述前一拍卖状态不一致，则确定所述拍卖组件的拍卖状态存在状态切换；

若所述拍卖组件的所述当前拍卖状态和所述前一拍卖状态一致，则确定所述拍卖组件的拍卖状态不存在状态切换。

进一步地，上述方法中，所述拍卖起止时间包括拍卖开始时间和拍卖结束时间，所述方法还包括：

根据所述拍卖组件的当前时间和所述拍卖结束时间，得到所述拍卖组件的当前拍卖倒计时；

其中，所述拍卖组件的当前拍卖倒计时，在所述拍卖组件的拍卖倒计时栏中进行展示和渲染。

进一步地，上述方法中，所述周期性地获取所述拍卖组件的当前时间，包括：

在所述拍卖组件中使用管理状态工具Redux创建存储函数store，并设置定时任务，所述定时任务包括预设时间间隔；

通过所述存储函数store记录所述拍卖组件的当前时间；

在所述拍卖组件中使用关联函数connect按照所述预设时间间隔，从所述存储函数store中获取所述拍卖组件的当前时间。

根据本申请的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述拍卖组件的渲染方法。

根据本申请的另一方面，还提供了一种拍卖组件的渲染设备，其中，该设备包括：

一个或多个处理器；

计算机可读介质，用于存储一个或多个计算机可读指令，

当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述拍卖组件的渲染方法。

与现有技术相比，本申请通过获取拍卖展示界面中的拍卖组件及其拍卖起止时间，所述拍卖组件包括至少一个，所述拍卖组件包括商品信息栏、拍卖状态栏及拍卖倒计时栏；周期性地获取所述拍卖组件的当前时间；基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换；当所述拍卖组件的拍卖状态存在状态切换时，在所述拍卖展示界面中对所述拍卖组件进行重新渲染；当所述拍卖组件的拍卖状态不存在状态切换时，在所述拍卖展示界面中，对所述拍卖组件中的所述拍卖倒计时栏进行重新渲染，并维持所述拍卖组件中的所述商品信息栏和所述拍卖状态栏不变，避免拍卖展示界面中的拍卖组件的重复渲染，从而提高页面的性能和流畅性，还节省显示的终端的电量。

附图说明

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

图1示出根据本申请一个方面的一种拍卖组件的渲染方法的流程示意图；

图2示出根据本申请一个方面的一种拍卖组件的渲染方法的中的拍卖展示界面展示的拍卖组件形成一个拍卖列表的示意图；

图3示出根据本申请一个方面的一种拍卖组件的渲染方法的拍卖组件的状态计算示意图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

图1示出根据本申请一个方面的一种拍卖组件的渲染方法的流程示意图，其中，所述方法包括步骤S11、步骤S12、步骤S13、步骤S14及步骤S15，具体包括如下步骤：

步骤S11，获取拍卖展示界面中的拍卖组件及其拍卖起止时间，所述拍卖组件包括至少一个，所述拍卖组件包括商品信息栏、拍卖状态栏及拍卖倒计时栏；在此，所述拍卖展示界面展示的拍卖组件包括一个或多个，即在拍卖展示界面展示的拍卖组件形成一个拍卖列表，如图2所示，在拍卖展示界面展示的每个拍卖组件包括商品信息栏，拍卖状态栏及拍卖倒计时栏，在商品信息栏展示与该拍卖组件相关的固定的商品信息，属于静态的数据，在所述拍卖状态栏显示所述拍卖组件实时的拍卖状态，在所述拍卖倒计时栏显示所述拍卖组件的实时的拍卖倒计时，以实现在拍卖展示界面对拍卖组件进行全方位展示，其中，所述拍卖组件的拍卖状态及拍卖倒计时等元素，属于拍卖组件的动态变化的参数，随着时间的改变而改变，所述拍卖组件的拍卖状态可以包括未拍卖状态、进行中状态及已结束状态等。

步骤S12，周期性地获取所述拍卖组件的当前时间；例如，在所述拍卖展示界面中设置一个总的定时任务来管理时间变化，采用web api中的setTimeout来进行管理，定时任务的预设时间间隔可以为任意取值的时间间隔，比如一秒或几秒等，在本申请一优选实施例中，将所述预设时间间隔优选为1000ms(即1s)，一个定时任务结束后开启下一个定时任务，如此就完成了一个完整的定时任务，在代码层面，该定时任务放在管理状态工具Redux创建的存储函数store中，使用变量timestamp来保存拍卖组件的当前时间。

在所述步骤S12的实施例中，所述周期性地获取所述拍卖组件的当前时间，具体包括：在所述拍卖组件中使用管理状态工具Redux创建存储函数store，并设置定时任务，所述定时任务包括预设时间间隔，即存在一个定时器；通过所述存储函数store记录所述拍卖组件的当前时间；在所述拍卖组件中使用关联函数connect按照所述预设时间间隔，从所述存储函数store中获取所述拍卖组件的当前时间。在此，虽然拍卖展示界面中的所有的拍卖组件存在一个总的定时任务，但针对每个拍卖组件而言，每个拍卖组件也相当于存在一个定时器组件，按照预设时间间隔的周期来对拍卖组件的拍卖状态及拍卖倒计时等动态变化的参数进行计算，如图3所示，每个拍卖组件从存储函数store中获取该拍卖组件的当前时间，并对拍卖状态进行计算。例如，所示拍卖组件中使用管理状态工具redux链接reudx创建的存储函数store，具体实现方式为关联函数connect包裹所述拍卖组件，在关联函数connect中，传入第一个参数mapStateToProps函数，从而获取存储函数store中记录的当前时间timestamp，但要传递给拍卖组件的并不是当前时间，而是当前时间和所述拍卖组件的拍卖起止时间的计算值，这样才可以避免拍卖组件的重复渲染，拍卖需要的所述计算值为拍卖组件的当前拍卖状态，比如未开始状态、进行中状态、已结束状态等，拍卖状态都是和当前时间相关且是可以改变的。

其中，步骤S12中的创建存储函数store，该存储函数store中包含拍卖组件的当前时间timestamp，其中设置定时任务，具体实现代码如下：

步骤S13，基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换；

步骤S14，若所述拍卖组件的拍卖状态存在状态切换，则在所述拍卖展示界面中，对所述拍卖组件进行重新渲染；

步骤S15，若所述拍卖组件的拍卖状态不存在状态切换，则在所述拍卖展示界面中，对所述拍卖组件中的所述拍卖倒计时栏进行重新渲染，并维持所述拍卖组件中的所述商品信息栏和所述拍卖状态栏不变。

通过上述步骤S11至步骤S15，实现了在拍卖组件未存在拍卖状态的状态切换时，只对拍卖组件中的拍卖倒计时这一子组件进行重新渲染，同时不渲染所述拍卖组件中的所述商品信息栏和所述拍卖状态栏不变，即维持拍卖组件中的所述商品信息栏和所述拍卖状态栏不变，使得在本申请的实施例中，只有拍卖倒计时对应的子组件周期性地进行了重新渲染，而器内部计算逻辑简单，对性能的影响是很低的；只有在拍卖组件存在拍卖状态的状态切换时，才对所述拍卖组件进行重新渲染，其余没有改变状态时不进行渲染计算，从而避免了拍卖展示界面中的拍卖组件的重复渲染，还提高了页面的性能和流畅性，进一步节省了显示终端的电量。

接着本申请的上述实施例，所述步骤S13基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换，包括：

例如，获取拍卖组件的当前时间timestamp和所述拍卖组件的拍卖起止时间t，根据所述拍卖组件的当前时间timestamp与所述拍卖组件的拍卖起止时间t之间的时间对比，来确定所述拍卖组件的当前拍卖状态，所述拍卖组件的当前拍卖状态可以是未开始状态、进行中状态及已结束状态中的任一拍卖状态；然后，根据所述拍卖组件的当前拍卖状态和所述拍卖展示界面的该拍卖组件的拍卖状态栏中展示的拍卖状态进行对比，以确定所述拍卖组件的拍卖状态是否存在切换，实现对拍卖组件的当前拍卖状态及是否存在状态切换的确定。

接着本申请的上述实施例，所述步骤S13中的所述拍卖起止时间包括拍卖开始时间t(start)和拍卖结束时间t(end)，其中，基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的当前拍卖状态，具体包括：

当所述当前时间timestamp小于所述拍卖开始时间t(start)时，确定所述拍卖组件的当前拍卖状态为未开始状态；

当所述当前时间timestamp大于等于所述拍卖开始时间t(start)且小于所述拍卖结束时间t(end)时，确定所述拍卖组件的当前拍卖状态为进行中状态；

当所述当前时间timestamp大于等于所述拍卖结束时间t(end)时，确定所述拍卖组件的当前拍卖状态为已结束状态。

例如，若所述拍卖开始时间t(start)为2020年11月11日9:00时，拍卖结束时间t(end)为2020年11月11日10:00时，若拍卖组件的当前时间timestamp为2020年11月11日9:43时，由于所述拍卖组件的当前时间timestamp：2020年11月11日9:43大于拍卖开始时间t(start)：2020年11月11日9:00且小于拍卖结束时间t(end)：2020年11月11日10:00，则确定所述拍卖组件的当前拍卖状态为进行中状态；又若拍卖组件的当前时间timestamp为2020年11月11日8:55时，由于所述拍卖组件的当前时间timestamp：2020年11月11日8:55小于拍卖开始时间t(start)：2020年11月11日9:00，则确定所述拍卖组件的当前拍卖状态为未开始状态；若拍卖组件的当前时间timestamp为2020年11月11日10:12时，由于所述拍卖组件的当前时间timestamp：2020年11月11日10:12大于拍卖结束时间t(end)：2020年11月11日10:00，则确定所述拍卖组件的当前拍卖状态为已结束状态，实现了根据拍卖组件的当前时间timestamp分别与拍卖开始时间来和拍卖结束时间分别做比较，来确定拍卖组件的当前拍卖状态，以得到当前时间对应的拍卖组件的当前拍卖状态。

本实施例中，在拍卖组件中使用关联函数connect函数使拍卖组件和存储函数store相连，从存储函数store中获取拍卖组件的当前时间timestamp,然后根据拍卖组件从props得到的data(拍卖开始时间和拍卖结束时间)来计算出当前拍卖的状态，具体实现代码如下：

接着本申请的上述实施例，所述步骤S13中的基于所述拍卖组件的当前拍卖状态，确定所述拍卖组件的拍卖状态是否存在切换，具体包括：

例如，将当前拍卖状态传入所述拍卖组件中，使得所述拍卖组件可以根据当前拍卖状态来对拍卖组件的拍卖展示界面进行渲染，只有在拍卖状态存在状态切换时，才对拍卖组件进行全部渲染，未存在状态切换时，则不渲染拍卖组件。其中，确定拍卖组件的拍卖状态是否存在切换时，可以通过如下方式实现：先获取所述拍卖组件当前获取的当前时间的前一时间对应的前一拍卖状态，若所述拍卖组件的所述当前拍卖状态和所述前一拍卖状态不一致，用于指示所述拍卖组件在当前时间对应的状态和在前一时间对应的状态是不同的，则确定所述拍卖组件的拍卖状态存在状态切换，比如从前一时间的未拍卖状态切换为当前时间的拍卖中状态或从前一时间的拍卖中状态切换为当前时间的已结束状态或从前一时间的未拍卖状态切换为当前时间的已结束状态等；若所述拍卖组件的所述当前拍卖状态和所述前一拍卖状态一致，用于指示所述拍卖组件在当前时间对应的状态和在前一时间对应的状态是一样的，不存在拍卖状态的改变，则确定所述拍卖组件的拍卖状态不存在状态切换，通过对拍卖组件的当前时间和前一时间各自对应的拍卖组件的对比，来得到对拍卖组件的拍卖状态进行是否存在状态切换的确定。

接着本申请的上述实施例，所述拍卖起止时间包括拍卖开始时间和拍卖结束时间，其中本申请实施例中提供的一种拍卖组件的渲染方法还包括：

例如，拍卖组件中的拍卖结束倒计时是随着不同的当前时间而改变的，可以将拍卖结束倒计时作为所述拍卖组件的子组件进行展示，其中，所述拍卖结束倒计时可根据不同的当前时间来进行渲染，拍卖结束倒计时时间由所述拍卖组件所获取的当前时间和拍卖结束时间确定的，所述当前时间是动态变化的，所述拍卖结束时间是固定不变的，比如，通过存储函数store获取所述拍卖组件的当前时间，而不是通过拍卖组件传递过来的当前时间，拍卖结束时间是通过拍卖组件传递的，是拍卖组件内部设置的固定的拍卖结束时间，通过这两个时间数据(当前时间和拍卖结束时间)就可以计算所述拍卖组件的当前拍卖倒计时，使得当前拍卖倒计时可以在所述拍卖组件的拍卖倒计时栏中进行渲染和展示，形成了在定时任务中的每预设时间间隔内变化一次所述拍卖倒计时栏中的当前拍卖倒计时，实现随着拍卖组件的不同当前时间进行当前拍卖倒计时的重新渲染，其内部计算逻辑简单，对性能的影响的很低。

本实施例中，3.创建拍卖倒计时组件Countdown来负责展示拍卖结束的剩余时间，其中当前时间从store中获取，拍卖结束时间从父组件(拍卖组件)中获取，然后根据时间差计算得出拍卖结束的剩余时间，实现代码如下：

一个或多个处理器；

计算机可读介质，用于存储一个或多个计算机可读指令，

在此，所述用于拍卖组件的渲染设备中的各实施例的详细内容，具体可参见上述拍卖组件的渲染方法的实施例的对应部分，在此，不再赘述。

综上所述，本申请通过获取拍卖展示界面中的拍卖组件及其拍卖起止时间，所述拍卖组件包括至少一个，所述拍卖组件包括商品信息栏、拍卖状态栏及拍卖倒计时栏；周期性地获取所述拍卖组件的当前时间；基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换；当所述拍卖组件的拍卖状态存在状态切换时，在所述拍卖展示界面中对所述拍卖组件进行重新渲染；当所述拍卖组件的拍卖状态不存在状态切换时，在所述拍卖展示界面中，对所述拍卖组件中的所述拍卖倒计时栏进行重新渲染，并维持所述拍卖组件中的所述商品信息栏和所述拍卖状态栏不变，避免拍卖展示界面中的拍卖组件的重复渲染，从而提高页面的性能和流畅性，还节省显示的终端的电量。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims

1.一种拍卖组件的渲染方法，其中，所述方法包括：

周期性地获取所述拍卖组件的当前时间；

2.根据权利要求1所述的方法，其中，所述基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的拍卖状态是否存在切换，包括：

3.根据权利要求2所述的方法，其中，所述拍卖起止时间包括拍卖开始时间和拍卖结束时间，其中，基于所述拍卖组件的当前时间和拍卖起止时间，确定所述拍卖组件的当前拍卖状态，包括：

4.根据权利要求3所述的方法，其中，所述基于所述拍卖组件的当前拍卖状态，确定所述拍卖组件的拍卖状态是否存在切换，包括：

5.根据权利要求1至4中任一项所述的方法，其中，所述拍卖起止时间包括拍卖开始时间和拍卖结束时间，所述方法还包括：

6.根据权利要求1至4中任一项所述的方法，其中，所述周期性地获取所述拍卖组件的当前时间，包括：

通过所述存储函数store记录所述拍卖组件的当前时间；

7.一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如权利要求1至6中任一项所述的方法。

8.一种拍卖组件的渲染设备，其中，该设备包括：

一个或多个处理器；

计算机可读介质，用于存储一个或多个计算机可读指令，

当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1至6中任一项所述的方法。