CN111045684A - Css代码冗余检测优化方法与装置和设备及存储介质 - Google Patents

Abstract

本发明公开了一种CSS代码冗余检测优化方法与装置和设备及存储介质，方法包括以下步骤：获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；获取冗余代码删除之后的VUE文件。采用本方案的CSS代码冗余检测优化方法，减少了人工成本，提高了代码优化效率，避免了人工删除会导致漏删、错误删除的情况出现，减少了样式bug出现的情况。

Description

CSS代码冗余检测优化方法与装置和设备及存储介质

技术领域

本发明涉及形式化语义领域，尤其涉及一种CSS代码冗余检测优化方法与装置和设备及存储介质。

背景技术

随着科学技术的蓬勃发展，软件项目的应用也变得广泛，项目的快速迭代和UI升级导致CSS变动频繁，页面未引用的CSS代码堆积，使得项目文件增大且不符合简洁的代码规范，为从业人员或项目协作人员在维护测试过程中带来了极大的困扰。现在的技术局限于单页面的CSS优化清除，对于公共的CSS还未能达到有效的优化清除，而且目前的解决问题是通过全局查找对比每一个CSS类名对于未引用的进行手动删除，但是这一方法效率低下，也直接造成项目人力的浪费。

公开于该背景技术部分的信息仅仅旨在加深对本发明的总体背景技术的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域技术人员所公知的现有技术。

基于上述原因，本发明提出了一种CSS代码冗余检测优化方法与装置和系统及存储介质。

发明内容

为了满足上述要求，本发明第一个目的在于提供一种CSS代码冗余检测优化方法，方法旨在提高代码优化效率，减少了样式bug出现的情况。

本发明的第二个目的在于提供一种CSS代码冗余检测优化装置。

本发明的第三个目的在于提供一种CSS代码冗余检测优化计算机设备。

本发明的第四个目的在于提供一种非临时性计算机可读存储介质，其上存储有计算机程序。

为了实现上述目的，本发明采用以下技术方案：

第一方面，提供了一种CSS代码冗余检测优化方法，包括以下步骤：

获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

获取冗余代码删除之后的VUE文件。

在一个可能的实施方式中，所述从所述VUE文件提取CSS代码、HTML代码的步骤还包括，获取若干页面的CSS代码。

在一个可能的实施方式中，所述通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取的步骤还包括，截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

在一个可能的实施方式中，所述获取冗余代码删除之后的VUE文件的步骤还包括，将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

在另一方面，本发明还提出了一种CSS代码冗余检测优化装置，包括以下单元；

代码获取单元，用于获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

匹配截取单元，用于设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

类名删除单元，用于遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

结果获取单元，用于获取冗余代码删除之后的VUE文件。

在一个可能的实施方式中，所述代码获取单元还包括页面代码获取单元，所述页面代码用于获取单元用于获取若干页面的CSS代码。

在一个可能的实施方式中，所述匹配截取单元还包括截取子单元，所述截取子单元用于截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

在一个可能的实施方式中，所述结果获取单元还包括代码替换子单元，所述代码替换子单元用于将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

本发明还提出了一种CSS代码冗余检测优化设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的代码检测优化程序，所述代码检测优化程序被所述处理器执行时实现如上述任一项所述的CSS代码冗余检测优化方法。

在另一方面，本发明还提出了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述中任一项所述的CSS代码冗余检测优化方法。

相比于现有技术，本发明的有益效果在于：采用本方案的CSS代码冗余检测优化方法，减少了人工成本，提高了代码优化效率，避免了人工删除会导致漏删、错误删除的情况出现，减少了样式bug出现的情况。

下面结合附图和具体实施例对本发明作进一步描述。

附图说明

图1是本发明一种CSS代码冗余检测优化的具体实施例流程示意图；

图2是本发明一种CSS代码冗余检测优化装置的具体实施例的框架示意图；

图3是本发明一种CSS代码冗余检测优化计算机设备的具体实施例的框架示意图；

图4是本发明一种非临时性计算机可读存储介质的具体实施例的框架示意图。

具体实施方式

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

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或一个以上其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

如图1所示的方法流程图，为本发明提供的提供的一种CSS代码冗余检测优化方法的具体实施例流程示意图，包括以下步骤：

步骤S1，获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

步骤S2，设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

步骤S3，遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

步骤S4，获取冗余代码删除之后的VUE文件。

作为较佳的实施方式，所述步骤S1还包括，获取若干页面的CSS代码。

具体地，现有技术中局限于单页面的CSS优化清除，对于公共的css还未能达到有效的优化清除。本方案可获取所有页面的CSS代码，并对其进行提取处理，以便于进行优化操作。

作为较佳的实施方式，所述步骤S2还包括，截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

其中，所述正则表达式可以是.xxx{}、class＝“xxx”，旨在截取设定的冗余代码，使用者可根据自身需要改变正则表达式。

作为较佳的实施方式，所述步骤S4还包括，将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

重新将优化后的CSS代码、HTNL代码替换至原VUE文件之后，所述VUE文件可实现本发明的有益效果，并使得项目工作更加顺利。

在另一方面，如图2所示，本发明还提出了一种CSS代码冗余检测优化装置，包括以下单元；

代码获取单元100，用于获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

匹配截取单元200，用于设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

类名删除单元300，用于遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

结果获取单元400，用于获取冗余代码删除之后的VUE文件。

其中，所述代码获取单元100、匹配截取单元200、类名删除单元300、结果获取单元400用于分别实现图1示的步骤S1-S4，此外，所述代码获取单元100、匹配截取单元200、类名删除单元300、结果获取单元400均可包括操作界面、显示界面、文件拖入拖出界面等。

作为较佳的实施方式，如图2所示，所述代码获取单元100还包括页面代码获取单元101，所述页面代码1011用于获取单元用于获取若干页面的CSS代码。

作为较佳的实施方式，如图2所示，所述匹配截取单元200还包括截取子单元201，所述截取子单元201用于截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

作为较佳的实施方式，如图2所示，所述结果获取单元400还包括代码替换子单元401，所述代码替换子单元401用于将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

如图3所示，本发明还提出了一种CSS代码冗余检测优化设备，包括存储器500、处理器600及存储在所述存储器500上并可在所述处理器上运行的代码检测优化程序，所述代码检测优化程序被所述处理器600执行时实现如上述任一项所述的CSS代码冗余检测优化方法。

其中，所述存储器可以是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其它类型的静态存储设备，随机存取存储器(random access memory，RAM))或者可存储信息和指令的其它类型的动态存储设备，也可以是电可擦可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(CompactDisc Read-Only Memory，CD-ROM)或其它光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其它磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其它介质，但不限于此。存储器可以是独立存在，通过通信总线与处理器相连接。存储器也可以和处理器集成在一起。

在另一方面，如图4所示，本发明还公开了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述中任一项所述的CSS代码冗余检测优化方法。

所述存储介质可以是前述服务器的内部存储单元，例如服务器的硬盘或内存。所述存储介质也可以是所述设备的外部存储设备，例如所述设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储介质还可以既包括所述设备的内部存储单元也包括外部存储设备。

需要说明的是，所属领域的技术人员可以清楚地了解到，上述基于实体的词法检查装置和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如一个以上单元或组件可以结合或者可以集成到另一个计算机设备，或一些特征可以忽略，或不执行。

本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的计算机设备和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的计算机设备和方法，可以通过其它的方式实现。例如，以上所描述的计算机设备实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如一个以上单元或组件可以结合或者可以集成到另一个计算机设备，或一些特征可以忽略，或不执行。

本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例计算机设备中的单元可以根据实际需要进行合并、划分和删减。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种CSS代码冗余检测优化方法，其特征在于，包括以下步骤：

获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

获取冗余代码删除之后的VUE文件。

2.根据权利要求1所述的CSS代码冗余检测优化方法，其特征在于，所述从所述VUE文件提取CSS代码、HTML代码的步骤还包括，获取若干页面的CSS代码。

3.根据权利要求1所述的CSS代码冗余检测优化方法，其特征在于，所述通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取的步骤还包括，截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

4.根据权利要求1所述的CSS代码冗余检测优化方法，其特征在于，所述获取冗余代码删除之后的VUE文件的步骤还包括，将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

5.一种CSS代码冗余检测优化装置，其特征在于，包括以下单元；

代码获取单元，用于获取待优化的VUE文件，从所述VUE文件提取CSS代码、HTML代码；

匹配截取单元，用于设定用于截取的正则表达式，通过正则表达式对CSS代码和HTML代码分别进行样式类名、类名引用的截取；

类名删除单元，用于遍历属于CSS代码中的样式类名，对HTML代码中未引用的类名进行所属类的删除；

结果获取单元，用于获取冗余代码删除之后的VUE文件。

6.根据权利要求5所述的CSS代码冗余检测优化装置，其特征在于，所述代码获取单元还包括页面代码获取单元，所述页面代码用于获取单元用于获取若干页面的CSS代码。

7.根据权利要求5所述的CSS代码冗余检测优化装置，其特征在于，所述匹配截取单元还包括截取子单元，所述截取子单元用于截取.xxx{}的css样式类名和class＝“xxx”的HTML代码中对class类名的引用。

8.根据权利要求5所述的CSS代码冗余检测优化装置，其特征在于，所述结果获取单元还包括代码替换子单元，所述代码替换子单元用于将优化后的CSS代码、HTML代码替换原VUE文件中的CSS代码、HTML代码。

9.一种CSS代码冗余检测优化计算机设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的代码检测优化程序，所述代码检测优化程序被所述处理器执行时实现如权利要求1-4中任一项所述的CSS代码冗余检测优化方法。

10.一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如权利要求1-4中任一项所述的CSS代码冗余检测优化方法。

Images