CN109683890A - 层叠样式表模块化的方法、装置、存储介质及设备 - Google Patents

Abstract

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

Description

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

技术领域

本公开涉及网页开发技术领域，具体地，涉及一种层叠样式表模块化的方法、装置、存储介质及设备。

背景技术

在传统大型网站的开发，为了页面上比较好的性能，减少创建HTTP(英文：HyperText Transfer Protocol，中文：超文本传输协议)请求的消耗，一般会选择尽可能少的链接CSS(英文：CascadingStyle Sheets，中文：层叠样式表)文件，尽量将所有的样式压缩到一个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样式相互影响，同时由于无需繁琐的配置操作，因此能够简化CSS文件模块化的操作，降低学习成本。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是根据一示例性实施例示出的一种层叠样式表模块化的方法的流程图；

图2是根据一示例性实施例示出的另一种层叠样式表模块化的方法的流程图；

图3是根据一示例性实施例示出的又一种层叠样式表模块化的方法的流程图；

图4是根据一示例性实施例示出的又一种层叠样式表模块化的方法的流程图；

图5是根据一示例性实施例示出的又一种层叠样式表模块化的方法的流程图；

图6是根据一示例性实施例示出的一种层叠样式表模块化的装置的框图；

图7是根据一示例性实施例示出的另一种层叠样式表模块化的装置的框图；

图8是根据一示例性实施例示出的一种文件确定模块的框图；

图9是根据一示例性实施例示出的又一种层叠样式表模块化的装置的框图；

图10是根据一示例性实施例示出的一种样式增加模块的框图；

图11是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。

图1是根据一示例性实施例示出的一种层叠样式表模块化的方法的流程图，如图1所示，该方法包括以下步骤：

步骤101，对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件。

其中，第一字符组合是根据第一CSS文件中所有CSS样式的类名所确定的。

示例地，当进行页面开发时，第一页面所对应的CSS文件中包含多个CSS样式，在进行模块化时，先选择出来需要进行模块化处理的所有CSS样式作为第一CSS文件，然后再根据这第一CSS文件中所有的样式的类(英文：class)名确定一个能够区别于其他类名唯一且不重复的第一字符组合，之后在第一CSS文件中所有CSS样式的类名的前面加上第一字符组合，或在CSS样式的类名之后加上第一字符组合，或者可以在第一CSS文件中所有CSS样式的类名的前面和后面均加上该第一字符组合(也就是，可以将第一字符组合增加为该类名的前缀或后缀，或者可以将该第一字符组合增加为该类名的前缀和后缀)，进而标记区分出该第一页面需要模块化的CSS样式。在本公开的实施例中，以在第一CSS文件中所有CSS样式的类名的前面和后面均加上该第一字符组合为例。

步骤102，在第一页面开始运行时，根据第一字符组合确定属于第一页面的第二CSS文件，以及第一页面之外的其他页面的CSS文件。

步骤103，清除第一页面之外的其他页面的CSS文件。

示例地，在运行期，运行第一页面时，需要对之前进行操作非第一页面的其他页面的CSS文件进行清除，防止污染或者影响第一页面的CSS样式，因此需要利用步骤102的操作确定该第一页面对应的第二CSS文件，以用于区别其他页面的CSS文件，再利用步骤103对其他页面的CSS文件进行清除。

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

另外，还需要说明的是，在现有技术中使用的利用webpack软件中的相关插件来实现，例如CSS-loader插件来实现CSS文件模块化的方法，除了webpack软件的配置文件繁琐，开发人员学习成本高的问题外，还有一些其他问题。例如利用该webpack软件进行CSS模块化之后，映射为没有实际含义的哈希值，不易调试，也导致与CSS样式相关的节点的操作无法顺利进行。因此，本公开提供的层叠样式表模块化的方法还可以包括图2所示的方法。

图2是根据一示例性实施例示出的另一种层叠样式表模块化的方法的流程图，如图2所示，所述方法还包括：

步骤104，在第一页面上添加新的DOM(英文：DocumentObjectModel，中文：文件对象模型)节点时，在新的DOM节点的原始类名中添加第一字符组合，以得到新的DOM节点的修改后的类名。

示例地，通过图1的实施例完成在开发期对CSS文件的模块化，为了在开发期仍能够保持CSS文件的模块化，因此在第一页面上增加新的DOM节点时，通过正则匹配规则，将第一字符组合作为前缀或者作为后缀添加至新的DOM节点的原始类名中，或者将第一字符组合既作为前缀也作为后缀同时添加至新的DOM节点的原始类名的前面或后面，以作为新的DOM节点的修改后的类名。正则匹配规则是通过预设一个正则表达式，在整个页面编辑文件中进行该正则表达式的匹配，将能够与该正则表达式匹配的内容作为筛选出的内容，即预设的正则表达式用于对新的DOM节点中与第一CSS文件中的样式匹配的CSS样式进行筛选。示例的，以该第一字符组合既作为前缀也作为后缀为例，通过该正则表达式可以确定，该DOM节点中与该正则表达式匹配的CSS样式即为需要进行前缀和后缀增加的CSS样式。

也就是说，在运行期间在第一页面上动态添加DOM节点，为了确保在运行期间所编译的页面组件也能够实现模块化，需要进行类似于步骤101的操作，对通过正则表达式匹配出的DOM节点对应的CSS样式的类名进行前缀和/或后缀的添加，以使得添加的DOM节点也被模块化处理。

步骤105，在第一页面上进行DOM操作时，利用预设的类名获取函数，从修改后的类名中获取DOM操作对应的DOM节点的原始类名。

示例地，由于之前在添加DOM节点时，添加了第一页面对应的第一字符组合，修改了DOM节点的类名，为了在进行DOM操作时能够识别出DOM节点，需要对DOM节点的类名进行还原。一般的网页的开发软件中提供类名获取函数，例如，unieap.getRealClass函数，能够还原修改后的类名，也就是获取到DOM节点所对应的原始类名，以便实现对应的DOM节点的映射，顺利对其执行相应的操作。

由此可见，上述方案可以实现CSS文件的模块化时，无需映射成无意义的哈希值，方便调试。也能够使得在进行页面运行时，实现CSS文件的模块化，并且能够执行CSS相关的DOM操作。

图3是根据一示例性实施例示出的又一种层叠样式表模块化的方法的流程图，如图3所示，步骤101所述的对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，包括以下步骤：

步骤1011，在进行第一页面的开发时，获取被选中的CSS文件作为需要进行模块化的第一CSS文件。

示例地，当第一页面对应多个CSS文件时，可以直接选择某一个CSS文件作为第一CSS文件，则其中所有的CSS样式都需要进行模块化处理；或者可以将多个CSS文件中的多个CSS样式组合成第一CSS文件，根据实际应用场景，确定该第一CSS文件。

步骤1012，根据第一CSS文件，确定第一字符组合。

示例地，第一字符组合是用于将第一CSS文件中的CSS样式与其他样式进行区别，该第一字符组合不是已有的CSS样式的类名，是根据第一CSS文件中所有样式确定的具有区别性的字符组合，以便利用之后的步骤进行前缀和后缀的添加之后，能够清楚的将第一CSS文件中的CSS样式与非第一CSS文件中的CSS样式区分。

步骤1013，将第一字符组合分别作为前缀和后缀添加至第一CSS文件中的所有CSS样式的类名中，以得到第二文件。

也就是说，第二文件是在类名上添加了前缀和后缀的第一CSS文件，其中的CSS样式没有变化，只是将CSS样式的类名进行了修改。另外，值得一提的是，本公开中所采用的在第一CSS文件中的所有CSS样式的类名的前面和后面添加第一字符组合作为前缀和后缀的方案是示例性的。也可以根据需求，将该第一字符组合作为第一CSS文件中的所有CSS样式的类名的前缀，或者作为第一CSS文件中的所有CSS样式的类名的后缀。

步骤1014，将第二文件中的所有CSS样式添加至第一页面的HTML文件中。

示例地，由于对第一页面中的一些CSS样式进行了类名修改，因此需要将类名修改后的CSS样式再保存在第一页面的HTML(英文：HyperText Markup Language，中文：超文本标记语言)文件中，也就是保存了CSS文件的模块化处理结果。

图4是根据一示例性实施例示出的又一种层叠样式表模块化的方法的流程图，如图4所示，该方法还包括：

步骤106，当在第一页面上增加第二CSS样式时，根据第一CSS文件确定第二CSS样式的类名。

示例地，在步骤101完成了第一页面的CSS文件的模块化处理后，在网页开发期还可能在第一页面中添加新的CSS样式，为了保持第一页面的模块化，还需要判断该第二CSS样式是否属于需要进行模块化处理的CSS样式。

可选的，如图5所示，步骤105包括：

步骤1061，当增加第二CSS样式时，确定第一CSS文件中是否包含第二CSS样式。

当第一CSS文件中包含第二CSS样式时，执行步骤1062，将第一字符组合作为前缀和后缀分别添加至第二CSS样式的类名中。

当第一CSS文件中不包含第二CSS样式时，执行步骤1063，保持第二CSS样式的类名。

示例地，在根据步骤101所确定的第一CSS文件中查找是否包括第二CSS样式，当包括第二CSS样式时，说明该第二CSS样式也需要进行模块化处理，也就是在第二CSS样式的类名的前后添加第一字符组合；否则说明该第二CSS样式无需进行模块化处理，不需要进行类名的修改。

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

图6是根据一示例性实施例示出的一种层叠样式表模块化的装置的框图，如图6所示，用于执行上述图1-图5的任一所述的实施例，该装置600包括：

文件确定模块610，用于对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，第一字符组合是根据第一CSS文件中所有CSS样式的类名所确定的。

文件识别模块620，用于在第一页面开始运行时，根据第一字符组合确定属于第一页面的第二CSS文件，以及第一页面之外的其他页面的CSS文件。

清除模块630，用于清除第一页面之外的其他页面的CSS文件。

图7是根据一示例性实施例示出的另一种层叠样式表模块化的装置的框图，如图7所示，该装置600还包括：

类名修改模块640，用于在第一页面上添加新的文档对象模型DOM节点时，在新的DOM节点的原始类名中添加第一字符组合，以得到新的DOM节点的修改后的类名。

类名获取模块650，用于在第一页面上进行DOM操作时，利用预设的类名获取函数，从修改后的类名中获取DOM操作对应的DOM节点的原始类名。

图8是根据一示例性实施例示出的一种文件确定模块的框图，如图8所示，该文件确定模块610包括：

文件获取子模块611，用于在进行第一页面的开发时，获取被选中的CSS文件作为需要进行模块化的第一CSS文件。

字符确定子模块612，用于根据第一CSS文件，确定第一字符组合。

类名添加子模块613，用于将第一字符组合分别作为前缀和后缀添加至第一CSS文件中的所有CSS样式的类名中，以得到第二文件。

样式添加子模块614，用于将第二文件中的所有CSS样式添加至第一页面的HTML文件中。

图9是根据一示例性实施例示出的又一种层叠样式表模块化的装置的框图，如图9所示，该装置600还包括：

样式增加模块660，用于当在第一页面上增加第二CSS样式时，根据第一CSS文件确定第二CSS样式的类名。

图10是根据一示例性实施例示出的一种样式增加模块的框图，如图10所示，该文件确定模块样式增加模块660包括：

样式确定子模块661，用于当增加第二CSS样式时，确定第一CSS文件中是否包含第二CSS样式。

类名确定子模块662，用于当第一CSS文件中包含第二CSS样式时，将第一字符组合作为前缀和后缀分别添加至第二CSS样式的类名中。

类名确定子模块662，还用于当第一CSS文件中不包含第二CSS样式时，保持第二CSS样式的类名。

可选的，类名修改模块640，用于：

在第一页面上增加新的DOM节点时，通过正则匹配规则，将第一字符组合作为前缀和后缀添加至新的DOM节点的原始类名中，作为新的DOM节点的修改后的类名。

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

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图11是根据一示例性实施例示出的一种电子设备1100的框图。如图11所示，该电子设备1100可以包括：处理器1101，存储器1102。该电子设备1100还可以包括多媒体组件1103，输入/输出(I/O)接口1104，以及通信组件1105中的一者或多者。

其中，处理器1101用于控制该电子设备1100的整体操作，以完成上述的层叠样式表模块化的方法中的全部或部分步骤。存储器1102用于存储各种类型的数据以支持在该电子设备1100的操作，这些数据例如可以包括用于在该电子设备1100上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器1102可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件1103可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1102或通过通信组件1105发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口1104为处理器1101和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件1105用于该电子设备1100与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(NearField Communication，简称NFC)，2G、3G或4G，或它们中的一种或几种的组合，因此相应的该通信组件1105可以包括：Wi-Fi模块，蓝牙模块，NFC模块。

在一示例性实施例中，电子设备1100可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的层叠样式表模块化的方法。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的层叠样式表模块化的方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器1102，上述程序指令可由电子设备1100的处理器1101执行以完成上述的层叠样式表模块化的方法。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本公开对各种可能的组合方式不再另行说明。

此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。

Claims (10)

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样式时，将所述第一字符组合作为前缀和后缀分别添加至所述第二CSS样式的类名中；

当所述第一CSS文件中不包含所述第二CSS样式时，保持所述第二CSS样式的类名。

6.根据权利要求2所述的方法，其特征在于，所述在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名，包括：

在所述第一页面上增加新的DOM节点时，通过正则匹配规则，将所述第一字符组合作为前缀和后缀添加至所述新的DOM节点的原始类名中，作为所述新的DOM节点的修改后的类名。

7.一种层叠样式表模块化的装置，其特征在于，所述装置包括：

文件确定模块，用于对第一页面上需要进行模块化的第一层叠样式表CSS文件中的所有CSS样式的类名添加第一字符组合，得到第二CSS文件，所述第一字符组合是根据所述第一CSS文件中所有CSS样式的类名所确定的；

文件识别模块，用于在所述第一页面开始运行时，根据所述第一字符组合确定属于所述第一页面的所述第二CSS文件，以及所述第一页面之外的其他页面的CSS文件；

清除模块，用于清除所述第一页面之外的其他页面的CSS文件。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

类名修改模块，用于在所述第一页面上添加新的文档对象模型DOM节点时，在所述新的DOM节点的原始类名中添加所述第一字符组合，以得到所述新的DOM节点的修改后的类名；

类名获取模块，用于在所述第一页面上进行DOM操作时，利用预设的类名获取函数，从所述修改后的类名中获取所述DOM操作对应的DOM节点的原始类名。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-6中任一项所述方法的步骤。

10.一种电子设备，其特征在于，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-6中任一项所述方法的步骤。