层叠样式表模块化的方法、装置、存储介质及设备制造方法及图纸

本公开涉及一种层叠样式表模块化的方法、装置、存储介质及设备，该方法包括：对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，第一字符组合是根据第一CSS文件中所有CSS样式的类名所确定的；在第一页面开始运行时，根据第一字符组合确定属于第一页面的第二CSS文件，以及第一页面之外的其他页面的CSS文件；清除第一页面之外的其他页面的CSS文件。因此能够规避其他页面的CSS样式，从而既能够节省系统资源，提高首页加载速度，也能够防止页面之间的CSS样式相互影响，同时由于无需繁琐的配置操作，因此能够简化CSS文件模块化的操作，降低学习成本。

Method, Device, Storage Media and Equipment for Modularization of Cascaded Style Sheets

The present disclosure relates to a method, device, storage medium and device for modularization of cascading style sheets. The method includes: adding a first character combination to the class names of all CSS styles in the first cascading style sheet CSS file that need to be modularized on the first page, and obtaining a second CSS file. The first character combination is determined according to the class names of all CSS styles in the first CSS file; When the first page starts to run, the second CSS file belonging to the first page and the CSS file of other pages besides the first page are determined according to the first character combination, and the CSS file of other pages besides the first page is cleared. Therefore, it can avoid the CSS style of other pages, which can not only save system resources, improve the loading speed of home pages, but also prevent the interaction of CSS styles among pages. At the same time, it can simplify the operation of modularization of CSS files and reduce the cost of learning because it does not need complicated configuration operations.

【技术实现步骤摘要】
层叠样式表模块化的方法、装置、存储介质及设备
本公开涉及网页开发
，具体地，涉及一种层叠样式表模块化的方法、装置、存储介质及设备。
技术介绍
在传统大型网站的开发，为了页面上比较好的性能，减少创建HTTP(英文：HyperTextTransferProtocol，中文：超文本传输协议)请求的消耗，一般会选择尽可能少的链接CSS(英文：CascadingStyleSheets，中文：层叠样式表)文件，尽量将所有的样式压缩到一个CSS文件中，因此对于一个大型网站这个CSS文件会非常大。当出现问题或者增加新CSS样式的需求时，修改的成本会比较大，且新添加的CSS样式可能会影响之前的CSS样式，例如不同页面之间的CSS样式可能互相影响，首页加载速度也会变慢。在现有技术中，使用比较广泛的CSS模块化的方法是利用webpack软件中的相关插件来实现，例如CSS-loader插件，这种方案虽然能够解决首页加载慢，CSS样式间相互影响的问题。但是由于webpack软件的配置文件繁琐，在对CSS进行模块化处理时，需要繁琐的配置操作，会额外增加开发人员的学习成本。
技术实现思路
本公开的目的是提供一种层叠样式表模块化的方法、装置、存储介质及设备，用于在避免首页加载慢，CSS样式间相互影响的问题的同时，解决CSS进行模块化时配置操作繁琐，学习成本高的问题。为了实现上述目的，根据本公开的实施例的第一方面，提供一种层叠样式表模块化的方法，所述方法包括：对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；清除所述第一页面之外的其他页面的CSS文件。可选的，所述方法还包括：在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名；在所述第一页面上进行DOM操作时，利用预设的类名获取函数，从所述修改后的类名中获取所述DOM操作对应的DOM节点的原始类名。可选的，所述对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，包括：在进行所述第一页面的开发时，获取被选中的CSS文件作为需要进行模块化的第一CSS文件；根据所述第一CSS文件，确定所述第一字符组合；将所述第一字符组合分别作为前缀和后缀添加至所述第一CSS文件中的所有CSS样式的类名中，以得到所述第二文件；将所述第二文件中的所有CSS样式添加至所述第一页面的超文本标记语言HTML文件中。可选的，所述方法还包括：当在所述第一页面上增加第二CSS样式时，根据所述第一CSS文件确定所述第二CSS样式的类名。可选的，所述当增加第二CSS样式时，根据所述第一CSS文件确定所述第二CSS样式的类名，包括：当增加所述第二CSS样式时，确定所述第一CSS文件中是否包含所述第二CSS样式；当所述第一CSS文件中包含所述第二CSS样式时，将所述第一字符组合作为前缀和后缀分别添加至所述第二CSS样式的类名中；当所述第一CSS文件中不包含所述第二CSS样式时，保持所述第二CSS样式的类名。可选的，所述在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名，包括：在所述第一页面上增加新的DOM节点时，通过正则匹配规则，将所述第一字符组合作为前缀和后缀添加至所述新的DOM节点的原始类名中，作为所述新的DOM节点的修改后的类名。根据本公开的实施例的第二方面，提供一种层叠样式表模块化的装置，所述装置包括：文件确定模块，用于对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；文件识别模块，用于在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；清除模块，用于清除所述第一页面之外的其他页面的CSS文件。可选的，所述装置还包括：类名修改模块，用于在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名；类名获取模块，用于在所述第一页面上进行DOM操作时，利用预设的类名获取函数，从所述修改后的类名中获取所述DOM操作对应的DOM节点的原始类名。可选的，所述文件确定模块，包括：文件获取子模块，用于在进行所述第一页面的开发时，获取被选中的CSS文件作为需要进行模块化的第一CSS文件；字符确定子模块，用于根据所述第一CSS文件，确定所述第一字符组合；类名添加子模块，用于将所述第一字符组合分别作为前缀和后缀添加至所述第一CSS文件中的所有CSS样式的类名中，以得到所述第二文件；样式添加子模块，用于将所述第二文件中的所有CSS样式添加至所述第一页面的超文本标记语言HTML文件中。可选的，所述装置还包括：样式增加模块，用于当在所述第一页面上增加第二CSS样式时，根据所述第一CSS文件确定所述第二CSS样式的类名。可选的，所述样式增加模块，包括：样式确定子模块，用于当增加所述第二CSS样式时，确定所述第一CSS文件中是否包含所述第二CSS样式；类名确定子模块，用于当所述第一CSS文件中包含所述第二CSS样式时，将所述第一字符组合作为前缀和后缀分别添加至所述第二CSS样式的类名中；所述类名确定子模块，还用于当所述第一CSS文件中不包含所述第二CSS样式时，保持所述第二CSS样式的类名。可选的，所述类名修改模块，用于：在所述第一页面上增加新的DOM节点时，通过正则匹配规则，将所述第一字符组合作为前缀和后缀添加至所述新的DOM节点的原始类名中，作为所述新的DOM节点的修改后的类名。本公开实施例的第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面任一项所述的层叠样式表模块化的方法的步骤。本公开实施例的第四方面，提供一种电子设备，包括：第三方面所述的计算机可读存储介质；以及一个或者多个处理器，用于执行所述计算机可读存储介质中的计算机程序。通过上述技术方案，对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；清除所述第一页面之外的其他页面的CSS文件。因此，由于清除了除第一页面之外的其他页面的CSS文件，因此能够规避其他页面的CSS样式，从而在渲染时既能够节省系统资源，提高首页加载速度，也能够防止页面之间的CSS样式相互影响，同时由于本文档来自技高网...

【技术保护点】
1.一种层叠样式表模块化的方法，其特征在于，所述方法包括：对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；清除所述第一页面之外的其他页面的CSS文件。

【技术特征摘要】
1.一种层叠样式表模块化的方法，其特征在于，所述方法包括：对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；清除所述第一页面之外的其他页面的CSS文件。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名；在所述第一页面上进行DOM操作时，利用预设的类名获取函数，从所述修改后的类名中获取所述DOM操作对应的DOM节点的原始类名。3.根据权利要求1所述的方法，其特征在于，所述对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，包括：在进行所述第一页面的开发时，获取被选中的CSS文件作为需要进行模块化的第一CSS文件；根据所述第一CSS文件，确定所述第一字符组合；将所述第一字符组合分别作为前缀和后缀添加至所述第一CSS文件中的所有CSS样式的类名中，以得到所述第二文件；将所述第二文件中的所有CSS样式添加至所述第一页面的超文本标记语言HTML文件中。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：当在所述第一页面上增加第二CSS样式时，根据所述第一CSS文件确定所述第二CSS样式的类名。5.根据权利要求4所述的方法，其特征在于，所述当增加第二CSS样式时，根据所述第一CSS文件确定所述第二CSS样式的类名，包括：当增加所述第二CSS样式时，确定所述第一CSS文件中是否包含所述第二CSS样式；当所述第一CSS文件中包含所述第二CSS样式...

【专利技术属性】
技术研发人员：杨一帆，
申请(专利权)人：东软集团股份有限公司，
类型：发明
国别省市：辽宁,21