CN110045956A

CN110045956A - 组件的配置方法、装置、设备及可读存储介质

Info

Publication number: CN110045956A
Application number: CN201910303971.6A
Authority: CN
Inventors: 熊瑾�
Original assignee: Beijing ByteDance Network Technology Co Ltd
Current assignee: Beijing ByteDance Network Technology Co Ltd
Priority date: 2019-04-16
Filing date: 2019-04-16
Publication date: 2019-07-23

Abstract

本发明提供的组件的配置方法、装置、设备及可读存储介质，通过调用默认配置库中注入的配置；基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖；基于配置覆盖后的目标样式组件进行用户界面显示，从而在配置组件时仅需对目标组件进行相应配置，而不必对于对整个父容器组件中各静态css样式文件进行替换，以提高对于组件的配置的灵活性。

Description

组件的配置方法、装置、设备及可读存储介质

技术领域

本发明涉及计算机技术，尤其涉及一种组件的配置方法、装置、设备及可读存储介质。

背景技术

随着前端技术的发展，逐渐产生了越来越多的用户界面框架，如bootstrap、element UI、ant design等等。如何基于用户界面框架对框架中的组件进行配置，以为用户提供更好的界面展示成为热点问题。

在现有技术中，用户界面上所展示的组件是基于父容器组件架构的，对于各组件样式的配置则需要相应的静态css样式文件实现。也就是说，针对于某一父容器组件下的子组件来说，当需要对子组件的样式进行修改时，需要编辑该父容器组件的状态属性，即依次编辑该父容器组件下全部子组件的静态css样式文件，并对整个父容器组件中各静态css样式文件进行替换，以实现配置功能。

但是，一旦子组件的组件架构关系发生变化，静态css样式文件将无法被使用，整个组件架构的静态css样式文件需要被重新编辑，配置灵活性很低，不利于对于组件的配置和展示。

发明内容

针对上述提出的问题，本发明提供了一种组件的配置方法、装置、设备及可读存储介质。

一方面，本发明提供了一种组件的配置方法，包括：

调用默认配置库中注入的配置；

基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖；

基于配置覆盖后的目标样式组件进行用户界面显示。

示例性的，所述调用默认配置库中注入的配置，包括：

利用配置接口Prop中封装的钩函数调用所述注入的配置。

示例性的，样式组件中封装有样式属性文件；

相应的，所述基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖，包括：

确定目标样式组件；

根据所述注入的配置，对目标样式组件的样式属性文件进行覆盖。

示例性的，所述调用默认配置库中注入的配置之前，还包括：

生成并向所述默认配置库注入一配置函数；

利用所述注入的配置函数对所述目标样式组件的样式属性文件中的配置函数进行替换。

示例性的，所述配置函数用于修改样式组件中的各元素的样式属性，所述样式属性包括如下属性中的一种或多种：

颜色属性、主题皮肤属性、尺寸属性、数目属性。

示例性的，所述样式组件为Style-components组件。

示例性的，所述基于配置覆盖后的目标样式组件进行用户界面显示为实时显示。

另一方面，本发明提供了一种组件的配置装置，包括：

第一配置模块，用于调用默认配置库中注入的配置；

第二配置模块，基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖，以使配置覆盖后的目标样式组件在用户界面进行显示。

再一方面，本发明提供了一种设备，包括：存储器、处理器以及计算机程序；

其中，所述计算机程序存储在所述存储器中，并被配置为由所述处理器执行以实现如前任一项所述的方法。

最后一方面，本发明提供了一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理执行以实现如前任一项所述的方法。

附图说明

图1为本发明所基于的网络架构的示意图；

图2为本发明示例一提供的一种组件的配置方法的流程示意图；

图3为本发明提供的一种样式组件的效果示意图；

图4为本发明示例二提供的一种组件的配置方法的流程示意图；

图5为本发明示例三提供的一种组件的配置装置的结构示意图；

图6为本发明示例四提供的一种设备的硬件结构示意图。

具体实施方式

为使本发明示例的目的、技术方案和优点更加清楚，下面将结合本发明示例中的附图，对本发明示例中的技术方案进行清楚、完整地描述。

随着前端技术的发展，逐渐产生了越来越多的用户界面框架，如bootstrap、element UI、ant design等等。特别是一些需要频繁改动的页面，例如：网上商城的活动页面，需要进行换肤功能的页面等。如何基于用户界面框架对框架中的组件进行配置，以为用户提供更好的界面展示成为热点问题。

举例来说，基于父容器组件架构，其父容器组件“parent1”下具备三个子组件“child1”，“child2”以及“child3”：

相应的，上述父容器组件的静态css样式文件如下：

即，在父容器组件的静态css样式文件中，父容器组件“parent1”下存在一子节点“child1”,该子节点的“color”属性为“red”,该子节点的“width”属性为“200px”。

在上述的父容器组件架构中，若将子节点“child1”从父容器组件“parent1”下移到父容器组件“parent2”下，即形成如下架构：

<父组件2>

<子组件1>

<父组件2>

由于架构关系的转变，前述的静态css样式文件将失效。此时，需要再重新写一个静态css样式文件,内容如下：

也就是说，在现有技术中一旦子组件的组件架构关系发生变化，静态css样式文件将无法被使用，整个组件架构的静态css样式文件需要被重新编辑，配置灵活性很低，不利于对于组件的配置和展示。

为了解决上述问题，本发明提供了一种组件的配置方法、装置、设备及可读存储介质。

图1为本发明基于的网络架构示意图，如图1所示，在本发明所基于的网络架构中可包括组件的配置装置1以及终端设备2，其中，终端设备2上安装有组件的配置装置1。终端设备2具体可为智能手机、台式电脑、平板电脑等可用于进行开发的硬件设备。

为了更好的说明本发明提供的组件的配置方法，首先对本发明的技术背景进行说明：

为了克服现有技术中需要采用静态css样式文件对样式组件的样式进行配置，而导致的配置灵活性低的问题，本发明提出了一种配置灵活性更高的样式组件的动态配置方法。

需要说明的是，该样式组件需基于react框架，其中，react框架是一种起源于脸书内部项目的JavaScript MVC框架。

当react框架被应用于在超级文本标记语言(HyperText Markup Language，简称HTML)结构中的情况下，其HTML结构可例如：

相应的现有技术中静态css样式文件，则可例如：

而如前所述的，本发明提供的组件的配置方法利用了react框架，即，在使用react框架之后，可样式组件的html标签中加入style属性以对样式组件进行样式配置，而不必再编译一个静态css样式文件。

该样式组件的style属性可例如：

具体来说，图2为本发明示例一提供的一种组件的配置方法的流程示意图，如图2所示，该组件的配置方法包括：

步骤101、调用默认配置库中注入的配置。

步骤102、基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖；

步骤103、基于配置覆盖后的目标样式组件进行用户界面显示。

需要说明的是，本发明提供的组件的配置方法的执行主体具体可为图1所示的组件的配置装置1。

首先，组件的配置装置中预设有默认配置库，该默认配置库中包括有各样式组件的全部默认配置信息，其中的样式组件具体可为Style-components组件。

一般来说，这些默认配置信息是在样式组件构建时预先设置并存储在默认配置库中的，其用描述样式组件的样式组成或样式形态，如描述样式组件的颜色属性、主题皮肤属性、尺寸属性、数目属性等样式属性的配置等。

其中，当开发者需要重新编译样式组件的样式组成时，或使用者需要重新修改样式组件的样式形态时，开发者或使用者均可通过注入的方式，将新的配置注入该默认配置库，以使基于新注入的配置替换原有的默认配置。

相应的，组件的配置装置则可在默认配置库中调用注入的配置，其中，该调用的配置仅为注入的配置。

随后，组件的配置装置将基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖。

具体来说，在编译样式组件时，为了便于后续对于样式组件的配置覆盖，样式组件中将预留一个或多个配置覆盖逻辑以便于后续对于样式组件的重新配置。

图3为本发明提供的一种样式组件的效果示意图，如图3所示，该样式组件为一选项样式组件，该样式组件在使用者的触发下展开，以呈现若干可供触发的选项。

基于图3所示的样式组件，若需要对该样式组件中的每一个选项中的样式进行重新配置，则可调用默认配置库中注入的该样式组件配置。具体的，可确定用户界面UI组件库中的目标样式组件，即图3所示的样式组件；随后，可确定其原始配置，即预留的配置覆盖逻辑，例如：

SelectItem＝style.div`xxx`

而调用的注入的配置，则例如：

SelectItem＝style.div`yyy`

再后可利用该注入的配置对预留的配置覆盖逻辑进行配置覆盖。其中，在覆盖过程中，若样式组件中存在该预留的配置覆盖逻辑，则执行覆盖；否则，样式组件依旧采用默认配置。

最后，组件的配置装置将基于配置覆盖后的目标样式组件进行用户界面显示。

本发明提供的组件的配置方法，通过调用默认配置库中注入的配置；基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖；基于配置覆盖后的目标样式组件进行用户界面显示，从而在配置组件时仅需对目标组件进行相应配置，而不必对于对整个父容器组件中各静态css样式文件进行替换，以提高对于组件的配置的灵活性。

图4为本发明示例二提供的一种组件的配置方法的流程示意图，如图4所示，该组件的配置方法包括：

步骤201、生成并向所述默认配置库注入一配置函数；

步骤202、调用默认配置库中注入的配置；

步骤202、利用所述注入的配置函数对所述目标样式组件的样式属性文件中的配置函数进行替换；

步骤203、基于配置覆盖后的目标样式组件进行用户界面显示。

具体来说，与示例一类似的是，本发明提供的组件的配置方法的执行主体具体可为图1所示的组件的配置装置1。

与示例一不同的是，在本示例二中，组件的配置装置可生成一配置函数，并向默认配置库注入该配置函数。当需要对样式组件的某一属性进行配置时，组件的配置装置可生成相应的配置函数，例如：

<div style＝{{width:props.width*10}}></div>。

这些配置函数用于修改样式组件中的各元素的样式属性，所述样式属性包括如下属性中的一种或多种：颜色属性、主题皮肤属性、尺寸属性、数目属性。

组件的配置装置调用默认配置库中注入的配置，具体来说，在本示例中，组件的配置装置利用配置接口Prop中封装的钩函数调用所述注入的配置。

随后，在本示例中，样式组件中封装有样式属性文件，相应的，所述基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖，则具体包括：确定目标样式组，并根据所述注入的配置，对目标样式组件的样式属性文件进行覆盖。

组件的配置装置将确定目标样式组件，并根据所述注入的配置，对目标样式组件的样式属性文件进行覆盖。其中，样式组件中封装有样式属性文件。

进一步来说，在对目标样式组件的样式属性文件进行覆盖时，可利用前述注入的配置函数对所述目标样式组件的样式属性文件中的配置函数进行替换。

最后，组件的配置装置基于配置覆盖后的目标样式组件进行用户界面显示。

在本示例中，通过基于配置接口Prop封装的钩函数从而实现对于配置的动态调用，以便于JS脚本基于注入的配置对目标样式组件进行配置覆盖。

此外，组件的配置装置中预设有默认配置库，该默认配置库中包括有各样式组件的全部默认配置信息，其中的样式组件具体可为Style-components组件。

图5为本发明示例三提供的一种组件的配置装置的结构示意图，如图5所示，该组件的配置装置，包括：

第一配置模块10，用于调用默认配置库中注入的配置；

第二配置模块20，基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖，以使配置覆盖后的目标样式组件在用户界面进行显示。

示例性的，第一配置模块10具体用于利用配置接口Prop中封装的钩函数调用所述注入的配置。

示例性的，样式组件中封装有样式属性文件；

相应的，第二配置模块20，具体用于确定目标样式组件；根据所述注入的配置，对目标样式组件的样式属性文件进行覆盖。

示例性的，该组件的配置装置还包括第三配置模块。

该第三配置模块用于在调用默认配置库中注入的配置之前，生成并向所述默认配置库注入一配置函数；

相应的，第二配置模块20具体用于利用所述注入的配置函数对所述目标样式组件的样式属性文件中的配置函数进行替换。

颜色属性、主题皮肤属性、尺寸属性、数目属性。

示例性的，所述样式组件为Style-components组件。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统的具体工作过程以及相应的有益效果，可以参考前述方法示例中的对应过程，在此不再赘述。

本发明提供的组件的配置装置，通过调用默认配置库中注入的配置；基于预设的配置覆盖逻辑对用户界面UI组件库中的目标样式组件进行配置覆盖；基于配置覆盖后的目标样式组件进行用户界面显示，从而在配置组件时仅需对目标组件进行相应配置，而不必对于对整个父容器组件中各静态css样式文件进行替换，以提高对于组件的配置的灵活性。

此外，图6为本发明示例四提供的一种设备的硬件结构示意图；如图6所示，该设备包括：

存储器41、处理器42及存储在存储器41上并可在处理器42上运行的计算机程序，处理器42运行计算机程序时执行上述示例的方法。

本领域普通技术人员可以理解：实现上述各方法示例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法示例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后，本发明还提供一种可读存储介质，包括上存储有计算机程序，所述计算机程序被处理执行以实现上述任一示例的方法。

最后应说明的是：以上各示例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各示例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各示例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各示例技术方案的范围。

Claims

1.一种组件的配置方法，其特征在于，包括：

调用默认配置库中注入的配置；

基于配置覆盖后的目标样式组件进行用户界面显示。

2.根据权利要求1所述的组件的配置方法，其特征在于，所述调用默认配置库中注入的配置，包括：

利用配置接口Prop中封装的钩函数调用所述注入的配置。

3.根据权利要求1所述的组件的配置方法，其特征在于，样式组件中封装有样式属性文件；

确定目标样式组件；

4.根据权利要求3所述的组件的配置方法，其特征在于，所述调用默认配置库中注入的配置之前，还包括：

生成并向所述默认配置库注入一配置函数；

5.根据权利要求4所述的组件的配置方法，其特征在于，所述配置函数用于修改样式组件中的各元素的样式属性，所述样式属性包括如下属性中的一种或多种：

颜色属性、主题皮肤属性、尺寸属性、数目属性。

6.根据权利要求1所述的组件的配置方法，其特征在于，所述样式组件为Style-components组件。

7.根据权利要求1-6任一项所述组件的配置方法，其特征在于，所述基于配置覆盖后的目标样式组件进行用户界面显示为实时显示。

8.一种组件的配置装置，其特征在于，包括：

第一配置模块，用于调用默认配置库中注入的配置；

9.一种设备，其特征在于，包括：存储器、处理器以及计算机程序；

其中，所述计算机程序存储在所述存储器中，并被配置为由所述处理器执行以实现如权利要求1-7任一项所述的方法。

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