创建复合组件样式的方法、装置和电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种创建复合组件样式的方法、装置和电子设备。

背景技术

CSS3是CSS(层叠样式表)技术的升级版本。主要包括盒子模型、列表模块、语言模块、背景和边框、文字特效、多栏布局等模块。

BootStrap是基于CSS3的前端开发框架。BootStrap框架提供一套完整的设计输出，是组件级别的，但正是这样完整的设计，会引发其他问题：例如因为大家都使用了相同的设计，所以没有原创性、自定义空间不大，对某个组件进行重写存在一定的困难。

例如，如果要使用Bootstrap创建按钮的复合组件，需为按钮的复合组件根据多个样式属性创建较多的代码。此时为按钮做定制化的效率较低。

发明内容

本发明提供一种创建复合组件样式的方法、装置和电子设备，用以解决现有技术中创建复合组件的效率较低的缺陷。

本发明提供一种创建复合组件样式的方法，包括：

获取多个样式单元；每个所述样式单元包括表征单一样式属性的样式代码；

响应于样式单元确定指令，从所述多个样式单元中确定目标样式单元集；

基于所述目标样式单元集创建复合组件的样式。

根据本发明提供的一种创建复合组件样式的方法，所述基于所述目标样式单元创建复合组件的样式之后，还包括：

响应于样式单元确定指令，从所述多个样式单元中确定第一目标样式单元；

利用所述第一目标样式单元替换所述目标样式单元集中的待替换样式单元，得到第一成品样式单元集；

基于所述第一成品样式单元集创建所述复合组件的样式。

根据本发明提供的一种创建复合组件样式的方法，所述基于所述目标样式单元创建复合组件的样式之后，还包括：

响应于样式单元确定指令，从所述多个样式单元中确定待添加样式单元；

添加所述待添加样式单元至所述目标样式单元集中，得到第二成品样式单元集；

基于所述第二成品样式单元集创建所述复合组件的样式。

根据本发明提供的一种创建复合组件样式的方法，所述基于所述目标样式单元创建复合组件的样式之后，还包括：

响应于样式单元确定指令，确定所述目标样式单元集中的待删除样式单元；

删除所述待删除样式单元，得到第三成品样式单元集；

基于所述第三成品样式单元集创建所述复合组件的样式。

根据本发明提供的一种创建复合组件样式的方法，所述基于所述目标样式单元集创建复合组件的样式之后，还包括：

重复利用所述目标样式单元集创建新复合组件的样式。

根据本发明提供的一种创建复合组件样式的方法，每个所述样式单元是通过视觉效果进行命名的。

本发明还提供一种创建复合组件样式的装置，包括：

样式单元获取模块，用于获取多个样式单元；每个所述样式单元包括表征单一样式属性的样式代码；

目标样式单元集确定模块，用于响应于样式单元确定指令，从所述多个样式单元中确定目标样式单元集；

第一创建模块，用于基于所述目标样式单元集创建复合组件的样式。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述创建复合组件样式的方法。

本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述创建复合组件样式的方法。

本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述创建复合组件样式的方法。

本发明提供的创建复合组件样式的方法、装置和电子设备，由于每个所述样式单元包括表征单一样式属性的样式代码，本发明实施例只需从多个样式单元中确定目标样式单元集，基于目标样式单元集创建所述复合组件的样式，而不需要创建复合组件时书写大量代码，从而实现快速创建复合组件的样式，提高创建复合组件的样式的效率。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明提供的创建复合组件样式的方法的流程示意图之一；

图2是本发明提供的创建复合组件样式的方法的流程示意图之二；

图3是本发明提供的创建复合组件样式的方法的流程示意图之三；

图4是本发明提供的创建复合组件样式的方法的流程示意图之四；

图5是本发明提供的创建复合组件样式的方法的流程示意图之五；

图6是本发明提供的创建复合组件样式的装置的结构示意图；

图7是本发明提供的电子设备的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

现有方法中使用Bootstrap创建按钮，需将class设置为btn-primary、btn-danger等等。此时按钮做定制化的效率较低。

例如按钮会有btn-primary、btn-danger类，分别代表主按钮样式、警告按钮样式。每一种按钮，都需要定义一次按钮类。在使用时，需要根据情境、语义选择应使用的类名和代码，如下表1所示：

表1

可见，现有方法需为按钮的复合组件根据多个样式属性创建较多的代码。此时为按钮做定制化的效率较低。

鉴于此，本发明实施例提供一种创建复合组件样式的方法，用以解决现有技术中创建复合组件的效率较低的缺陷。

下面结合图1-图5描述本发明的创建复合组件样式的方法。请参照图1，本发明提供一种创建复合组件样式的方法，包括：

步骤100、获取多个样式单元。每个样式单元包括表征单一样式属性的样式代码。

电子设备获取多个样式单元。每个样式单元包括表征单一样式属性的样式代码。其中单一样式属性表示用途单一的样式属性。例如单一样式属性可包括背景色、边距颜色、边距宽度、文本颜色、字重、字号与行高、内外间距、圆角等样式属性。并且每个样式单元包括表征单一样式属性的样式代码。

例如表征背景色的样式属性的样式单元为bg-blue。其中bg表示背景色，blue表示背景色为蓝色。样式单元为bg-blue对应的样式代码为：

本发明实施例还列举了表征边界颜色、边距宽度、文本颜色、字重(字体的粗细程度)、字号与行高、内外间距、圆角的样式属性的样式单元如下表2所示：

表2

/>

/>

本发明实施例通过样式单元从多个角度拆分将复合组件(如按钮)的样式为多个样式属性的最小可用单元，提供最小化的约束。

步骤200、响应于样式单元确定指令，从多个样式单元中确定目标样式单元集。

电子设备响应于样式单元确定指令，从多个样式单元中确定目标样式单元集。具体的，用户根据复杂的组件的需要的样式，从多个样式单元中，通过鼠标点击、屏幕触控以及语音操控的任意一种方式确定需要的目标样式单元集。需要说明的是，目标样式单元集可包括一个或多个样式单元集。

例如，本发明实施例需要编辑的复合组件为主按钮。主按钮的样式属性包括背景色是蓝色；边界颜色是蓝色；边距宽度是1个像素宽度；文本颜色是白色；字体的粗细程度是正常；字号与行高分别是14个像素宽度和34个像素宽度；顶部内边距是12个像素宽度；底部内边距是12个像素宽度；圆角的宽度是4个像素宽度。此时用户从多个样式单元中分别确定bg-blue、border-blue、border-1、text-white、font-normal、text-base、py-3、rounded-1的多个样式单元组成目标样式单元集。其中bg-blue表示背景色是蓝色的样式代码；border-blue表示边界颜色是蓝色的样式代码；border-1表示边距宽度是1个像素宽度的样式代码；text-white表示文本颜色是白色的样式代码；font-normal表示字体的粗细程度是正常的样式代码；text-base表示字号与行高分别是14个像素宽度和34个像素宽度的样式代码；py-3表示顶部内边距是12个像素宽度，底部内边距是12个像素宽度的样式代码；rounded-1表示圆角的宽度是4个像素宽度的样式代码。

步骤300、基于目标样式单元集创建复合组件的样式。

电子设备基于上述确定的目标样式单元集创建复合组件的样式。具体的，本发明实施例基于目标样式单元集的一个或多个样式单元创建代码。基于一个或多个样式单元创建的代码创建复合组件的样式。

请参照表3，表3表示现有方法中根据语义化代码创建主按钮和警告按钮，以及本发明实施例的创建主按钮和警告按钮的方法的对比。

表3

参照表1和表3可见，现有方法需为按钮的复合组件根据多个样式属性创建较多的代码，此时为按钮做定制化的效率较低。而本发明实施例中通过样式单元从多个角度拆分将样式为最小可用单元，提供最小化的约束。只需根据需要从选择出需要的样式单元组成目标样式单元集，再基于目标样式单元集创建复合组件即可。本发明实施例仅需根据目标样式单元集的一个或多个样式单元创建代码即可。而不需要创建复合组件时书写大量代码，从而实现快速创建复合组件的样式，提高创建复合组件的样式的效率。

由于每个样式单元包括表征单一样式属性的样式代码，本发明实施例只需从多个样式单元中确定目标样式单元集，基于目标样式单元集创建复合组件的样式，而不需要创建复合组件时书写大量代码，从而实现快速创建复合组件的样式，提高创建复合组件的样式的效率。

在本发明实施例的其他方面，请参照图2，步骤300、基于目标样式单元创建复合组件的样式之后，还包括：

步骤410、响应于样式单元确定指令，从多个样式单元中确定第一目标样式单元。

用户通过鼠标点击、屏幕触控以及语音操控的任意一种方式确定第一目标样式单元，电子设备响应于用户的样式单元确定指令，电子设备从多个样式单元中确定第一目标样式单元。其中第一目标样式单元是创建新的复合组件时，需要对步骤300的复合组件的样式属性进行替换的第一目标样式单元。例如新的主按钮的样式属性包括背景色是红色；边界颜色是蓝色；边距宽度是1个像素宽度；文本颜色是白色；字体的粗细程度是正常；字号与行高分别是14个像素宽度和34个像素宽度；顶部内边距是12个像素宽度；底部内边距是12个像素宽度；圆角的宽度是4个像素宽度。可见新的主按钮与步骤300中的主按钮的区别仅在于背景色的区别。因此，需要用背景色是红色的样式单元替换背景色是蓝色的样式单元，此时第一目标样式单元是bg-red。bg-red对应的样式代码位为：

.bg-red{

background:#ff1023；

}

步骤420、利用第一目标样式单元替换目标样式单元集中的待替换样式单元，得到第一成品样式单元集。

步骤430、基于第一成品样式单元集创建复合组件的样式。

电子设备利用第一目标样式单元替换目标样式单元集中的待替换样式单元，得到第一成品样式单元集。例如，电子设备基于bg-red的样式单元替换目标样式单元集中的bg-blue的待替换样式单元，得到第一成品样式单元集。电子设备基于第一成品样式单元集可创建新的复合组件的样式。例如基于第一成品样式单元创建的新的复合组件的代码为：

按钮

从而，当出现新的复合组件需要修改某个样式属性时，只需要确定第一目标样式单元。通过第一目标样式单元将目标样式单元集的待替换样式单元进行替换，代码修改量较少。相比现有方法需要对新的复合组件的代码需要大范围修改甚至全部的重写，本发明实施例只需要利用第一目标样式单元替换目标样式单元集中的待替换样式单元即可，减少代码修改量，方便地调整复合组件的样式，从而实现快速修改复合组件的样式，简化了后期开发代码量，提高了前端开发的工作效率。

在本发明实施例的其他方面，请参照图3，步骤300、基于目标样式单元创建复合组件的样式之后，还包括：

步骤440、响应于样式单元确定指令，从多个样式单元中确定待添加样式单元。

电子设备响应于样式单元确定指令，从多个样式单元中确定待添加样式单元。

用户通过鼠标点击、屏幕触控以及语音操控的任意一种方式确定待添加样式单元，电子设备响应于用户的样式单元确定指令，电子设备从多个样式单元中确定待添加样式单元。其中待添加样式单元是创建新的复合组件时，需要对步骤300的复合组件的样式属性进行添加的样式单元。

例如，例如新的主按钮的样式属性包括背景色是蓝色；边界颜色是蓝色；边距宽度是1个像素宽度；文本颜色是白色；字体的粗细程度是正常；字号与行高分别是14个像素宽度和34个像素宽度；顶部内边距是12个像素宽度；底部内边距是12个像素宽度；圆角的宽度是4个像素宽度；元素上边距是12个像素宽度；元素下边距是12个像素宽度。可见新的主按钮与步骤300中的主按钮的区别仅在于新的主按钮添加了元素上边距和元素下边距。因此，需要在目标样式单元集中添加元素上边距和元素下边距的样式属性，此时待添加样式单元为my-3。此时my-3对应的样式代码为：

步骤450、添加待添加样式单元至目标样式单元集中，得到第二成品样式单元集。

步骤460、基于第二成品样式单元集创建复合组件的样式。

电子设备添加待添加样式单元至目标样式单元集中，得到第二成品样式单元集。例如，电子设备添加my-3的待添加样式单元至目标样式单元集中，得到第二成品样式单元集。电子设备基于第二成品样式单元集可创建新的复合组件的样式。例如基于第二成品样式单元创建的新的复合组件的代码为：

按钮

从而，当出现新的复合组件需要添加某个样式属性时，只需要确定待添加样式单元。通过添加待添加样式单元至目标样式单元集中，得到第二成品样式单元集，代码修改量较少。相比现有方法需要对新的复合组件的代码需要大范围修改甚至全部的重写，本发明实施例只需要添加待添加样式单元至目标样式单元集中，得到第二成品样式单元集即可，减少代码修改量，方便地调整复合组件的样式，从而实现快速修改复合组件的样式，简化了后期开发代码量，提高了前端开发的工作效率。

在本发明实施例的其他方面，请参照图4，步骤300、基于目标样式单元创建复合组件的样式之后，还包括：

步骤470、响应于样式单元确定指令，确定目标样式单元集中的待删除样式单元。

电子设备响应于样式单元确定指令，确定目标样式单元集中的待删除样式单元。用户通过鼠标点击、屏幕触控以及语音操控的任意一种方式确定待删除样式单元，电子设备响应于用户的样式单元确定指令，电子设备从多个样式单元中确定待删除样式单元。其中待删除样式单元是创建新的复合组件时，需要对步骤300的复合组件的样式属性进行删除的样式单元。

例如，例如新的主按钮的样式属性包括背景色是蓝色；边界颜色是蓝色；边距宽度是1个像素宽度；文本颜色是白色；字体的粗细程度是正常；字号与行高分别是14个像素宽度和34个像素宽度；顶部内边距是12个像素宽度；底部内边距是12个像素宽度。可见新的主按钮与步骤300中的主按钮的区别仅在于新的主按钮删除了圆角的宽度。因此，需要在目标样式单元集中删除圆角的宽度的样式属性，此时待删除样式单元为rounded-1。此时rounded-1对应的样式代码为：

.rounded-1{

border-radius:4px；

}

步骤480、删除待删除样式单元，得到第三成品样式单元集。

步骤490、基于第三成品样式单元集创建复合组件的样式。

电子设备删除待删除样式单元，得到第三成品样式单元集。例如，电子设备删除目标样式单元集中的rounded-1的待删除样式单元，得到第三成品样式单元集。电子设备基于第三成品样式单元集可创建新的复合组件的样式。例如基于第三成品样式单元集创建的新的复合组件的代码为：

按钮

从而，当出现新的复合组件需要删除某个样式属性时，只需要确定待删除样式单元。通过删除待删除样式单元，得到第三成品样式单元集，代码修改量较少。相比现有方法需要对新的复合组件的代码需要大范围修改甚至全部的重写，本发明实施例只需要删除待删除样式单元，得到第三成品样式单元集即可，减少代码修改量，方便地调整复合组件的样式，从而实现快速修改复合组件的样式，简化了后期开发代码量，提高了前端开发的工作效率。

在本发明实施例的其他方面，请参照图5，步骤300、基于目标样式单元集创建复合组件的样式之后，还包括：

步骤500、重复利用目标样式单元集创建新复合组件的样式。

具体的，新复合组件表示与复合组件不同的新的复合组件。当新复合组件不需要修改样式属性时，此时可重复利用目标样式单元集创建新复合组件的样式。

本发明实施例通过复用目标样式单元集创建新复合组件的样式。本发明的目标样式单元得到的样式文件，可以一直复用、迭代使用，而不必每次新的复用组件需要大范围甚至全部的重写。简化了后期开发代码量，提高了前端开发的工作效率。

需要说明的是，每个样式单元是通过视觉效果进行命名的。例如样式单元border-blue、text-white。border表示边界；text表示文本。从而本发明实施例通过视觉效果命名样式单元可一眼可知用途，方便用户记忆以及方便复用，提高前端开发的工作效率。

下面对本发明提供的创建复合组件样式的装置进行描述，下文描述的创建复合组件样式的装置与上文描述的创建复合组件样式的方法可相互对应参照。

请参照图6，本发明还提供一种创建复合组件样式的装置，包括：

样式单元获取模块201，用于获取多个样式单元；每个样式单元包括表征单一样式属性的样式代码；

目标样式单元集确定模块202，用于响应于样式单元确定指令，从多个样式单元中确定目标样式单元集；

第一创建模块203，用于基于目标样式单元集创建复合组件的样式。

由于每个样式单元包括表征单一样式属性的样式代码，本发明实施例只需从多个样式单元中确定目标样式单元集，基于目标样式单元集创建复合组件的样式，而不需要创建复合组件时书写大量代码，从而实现快速创建复合组件的样式，提高创建复合组件的样式的效率。

在一个实施例中，创建复合组件样式的装置还包括：

第一确定指令模块，用于响应于样式单元确定指令，从多个样式单元中确定第一目标样式单元；

替换模块，用于利用第一目标样式单元替换目标样式单元集中的待替换样式单元，得到第一成品样式单元集；

第二创建模块，用于基于第一成品样式单元集创建复合组件的样式。

在一个实施例中，创建复合组件样式的装置还包括：

第二确定指令模块，用于响应于样式单元确定指令，从多个样式单元中确定待添加样式单元；

添加模块，用于添加待添加样式单元至目标样式单元集中，得到第二成品样式单元集；

第三创建模块，用于基于第二成品样式单元集创建复合组件的样式。

在一个实施例中，创建复合组件样式的装置还包括：

第三确定指令模块，用于响应于样式单元确定指令，确定目标样式单元集中的待删除样式单元；

删除模块，用于删除待删除样式单元，得到第三成品样式单元集；

第四创建模块，用于基于第三成品样式单元集创建复合组件的样式。

在一个实施例中，创建复合组件样式的装置还包括：

复用模块，用于重复利用目标样式单元集创建新复合组件的样式。

在一个实施例中，每个样式单元是通过视觉效果进行命名的。

图7示例了一种电子设备的实体结构示意图，如图7所示，该电子设备可以包括：处理器(processor)710、通信接口(Communications Interface)720、存储器(memory)730和通信总线740，其中，处理器710，通信接口720，存储器730通过通信总线740完成相互间的通信。处理器710可以调用存储器730中的逻辑指令，以执行创建复合组件样式的方法，该方法包括：获取多个样式单元；每个样式单元包括表征单一样式属性的样式代码；响应于样式单元确定指令，从多个样式单元中确定目标样式单元集；基于目标样式单元集创建复合组件的样式。

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

另一方面，本发明还提供一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，计算机程序被处理器执行时，计算机能够执行上述各方法所提供的创建复合组件样式的方法，该方法包括：获取多个样式单元；每个样式单元包括表征单一样式属性的样式代码；响应于样式单元确定指令，从多个样式单元中确定目标样式单元集；基于目标样式单元集创建复合组件的样式。

又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的创建复合组件样式的方法，该方法包括：获取多个样式单元；每个样式单元包括表征单一样式属性的样式代码；响应于样式单元确定指令，从多个样式单元中确定目标样式单元集；基于目标样式单元集创建复合组件的样式。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分的方法。

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