(19)中华人民共和国国家知识产权局
(12)发明专利说明书
(10)申请公布号 CN 107783764 A
(43)申请公布日 2018.03.09
(21)申请号 CN201710916120.X
(22)申请日 2017.09.29
(71)申请人 厦门集微科技有限公司
    地址 361021 福建省厦门市集美区集美大道1302号12层之二
(72)发明人 李艳萍 张建飞 陈彩丽
(74)专利代理机构 中科专利商标代理有限责任公司
    代理人 方丁一
(51)Int.CI
     
                                                                  权利要求说明书 说明书 幅图
(54)发明名称
      清除前端样式冗余的方法及装置
(57)摘要
      一种清除前端样式冗余的方法及装置，该方法包括：通过javascript对html及css的文件名做有序存储；获取html页面的id、class以及页面标签名；匹配整合css，初步清除冗余；以及对整合完成的css作反向匹配操作，深度清除冗余。
法律状态
法律状态公告日
法律状态信息
法律状态
2018-04-03
实质审查的生效
实质审查的生效
2018-03-09
公开
公开
权 利 要 求 说 明 书
1.一种清除前端样式冗余的方法,其中,包括:
通过javascript对html及css的文件名做有序存储;
正则匹配文件名获取html页面的id、class以及页面标签名;
匹配整合css,初步清除冗余;以及
对整合完成的css作反向匹配操作,深度清除冗余。
2.根据权利要求1所述的方法,其中,匹配整合css,初步清除冗余包括:
对css和获取的id、class以及标签名进行匹配操作,筛选有效的css并存储;以及
通过循环历遍筛选后的css,清除重复的css。
3.根据权利要求2所述的方法,其中,所述匹配操作采用正则表达式来执行。
4.根据权利要求1所述的方法,其中,对整合完成的css作反向匹配操作,深度清除冗余包括:
采用querySelector()在html中匹配指定css选择器对应的class;
获取html的dom节点;以及
判断css选择器对应的dom节点是否为空,若是,则清除对应的css,否则保留对应的css。
5.根据权利要求1所述的方法,其中,在通过javascript对html及css的文件名做有序存储之前还包括:
导入html及css文件。
6.根据权利要求1所述的方法,其中,在对整合完成的css作反向匹配操作,深度清除冗余之后还包括:
导出清除冗余的css文件。
7.一种清除前端样式冗余的装置,其中,包括:
存储模块,通过javascript对html及css的文件名做有序存储;
获取模块,获取html页面的id、class以及页面标签名;
匹配整合模块,匹配整合css,初步清除冗余;以及
反向匹配模块,对整合完成的css作反向匹配操作,深度清除冗余。
8.根据权利要求7所述的装置,其中,匹配整合模块包括:
匹配单元,对css和获取的id、class以及标签名进行匹配操作,筛选有效的css并存储;以及
整合单元,通过循环历遍筛选后的css,清除重复的css。
9.根据权利要求8所述的装置,其中,所述匹配操作采用正则表达式来执行。
10.根据权利要求7所述的装置,其中,反向匹配模块包括:
反向匹配单元;采用querySelector()在html中匹配指定css选择器对应的class;
Dom节点获取单元;获取html的dom节点;以及
判断单元,判断css选择器对应的dom节点是否为空,若是,则清除对应的css,否则保留对应的css。
说  明  书
<p>技术领域
本发明涉及互联网技术领域,更具体地涉及一种清除前端样式冗余的方法及装置。
背景技术
项目开发过程中,往往会产生许多的冗余代码,特别是css部分,前期体现不明显,但随着时间越长,导入使用的文件逐渐增加的情况下,代码量必然极剧增加;冗余的代码量越多,也就越影响网站打开的速度及用户体验,那么清除无用的css样式是必然的。如何有效清除前端样式冗余是当前亟需解决的问题。
发明内容
鉴于现有方案存在的问题,为了克服上述现有技术方案的不足,本发明提出了一种清除前端样式冗余的方法及装置。
根据本发明的一个方面,提供了一种清除前端样式冗余的方法,包括:通过javascript对html及css的文件名做有序存储;获取html页面的id、class以及页面标签名;匹配整合css,初步清除冗余;以及对整合完成的css作反向匹配操作,深度清除冗余。
在一些实施例中,匹配整合css,初步清除冗余包括:对css和获取的id、class以及标签名进行匹配操作,筛选有效的css并存储;以及通过循环历遍筛选后的css,清除重复的css。
在一些实施例中,所述匹配操作采用正则表达式来执行。
在一些实施例中,对整合完成的css作反向匹配操作,深度清除冗余包括:采用querySelector()在html中匹配指定css选择器对应的class;获取html的dom节点;以及判断css选择器对应的dom节点是否为空,若是,则清除对应的css,否则保留对应的css。
在一些实施例中,在通过javascript对html及css的文件名做有序存储之前还包括:导入html及css文件。
在一些实施例中,在对整合完成的css作反向匹配操作,深度清除冗余之后还包括:导出清除冗余的css文件。
根据本发明的另一个方面,提供一种清除前端样式冗余的装置,包括:存储模块,通过javascript对html及css的文件名做有序存储;获取模块,获取html页面的id、class以及页面标签名;匹配整合模块,匹配整合css,初步清除冗余;以及反向匹配模块,对整合完成的css作反向匹配操作,深度清除冗余。
在一些实施例中,匹配整合模块包括:匹配单元,对css和获取的id、class以及标签名进行匹配操作,筛选有效的css并存储;以及整合单元,通过循环历遍筛选后的css,清除重复的css。
在一些实施例中,所述匹配操作采用正则表达式来执行。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。