微前端样式处理方法、装置、设备及介质与流程

1.本技术涉及计算机技术领域，尤其是涉及到一种微前端样式处理方法、装置、设备及介质。


背景技术：

2.微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。
3.在现有的微前端技术中，通过网络请求拿到不同子项目的静态资源解析，通过一系列的隔离处理后动态插入容器项目指定的dom节点内，最终浏览器解析到的是一份包含容器项目、多个子项目整合在一起的html文档，由于容器与子项目共存，必然导致多个子项目的多份css样式表相互影响的问题。


技术实现要素：

4.有鉴于此，本技术提供了一种微前端样式处理方法、装置、介质及设备，以解决现有方法中微前端的多个子项目的多份层叠样式表互相影响的问题。
5.本技术的第一方面，提供了一种微前端样式处理方法，所述方法包括：
6.将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；
7.在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；
8.将所述修改后的抽象语法树文件转换为目标层叠样式表文件。
9.本技术的第二方面，提供了一种微前端样式处理装置，所述装置包括：
10.转换模块，用于将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；
11.样式处理模块，在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；
12.所述转换模块，还用于将所述修改后的所述抽象语法树文件转换为目标层叠样式表文件。
13.本技术的第三方面，提供了一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的指令或代码，所述处理器执行所述指令或代码时实现上述微前端样式处理方法。
14.本技术的第四方面，提供了一种存储介质，其上存储有指令或代码，所述指令或代码被处理器执行时实现上述微前端样式处理方法。
15.上述基于微前端样式处理方法、装置、设备及介质所实现的方案，根据多个子项目的初始层叠样式表文件生成抽象语法树文件，利用了抽象语法树文件的树状结构，使得多个子项目的第一元素之间的层级关系更加清晰。通过修改抽象语法树文件，为项目中的第一元素对应的样式添加数据源属性，以利用数据源属性消除不同子项目共存时的相互影响。其中，第一元素可为id也可为class类型。在修改抽象语法树文件后，将其转换成为目标层叠样式表文件，此时利用目标层叠样式表文件即可清晰地表明多个子项目的第一元素之间的层级关系，避免了不同子项目之间互相干扰。
16.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。
附图说明
17.为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
18.图1示出了本技术实施例提供的一种微前端样式处理方法的流程示意图；
19.图2示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
20.图3示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
21.图4示出了本技术实施例提供的另一种微前端样式处理方法的确定抽象语法树文件的示意图；
22.图5示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
23.图6示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
24.图7示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
25.图8示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
26.图9示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
27.图10示出了本技术实施例提供的另一种微前端样式处理方法的流程示意图；
28.图11示出了本技术实施例提供的一种微前端样式处理装置的结构框图；
29.图12示出了本技术实施例提供的一种电子设备的结构框图。
具体实施方式
30.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
31.本技术实施例提供的微前端样式处理方法，可以应用在具有指令或程序运行能力的电子设备，其中，电子设备可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电
脑和便携式可穿戴设备，也可以车载系统等。运行在不同的运算设备仅是方案在执行主体上的差异，本领域人员可预见在不同运算设备中运行能够产生相同的技术效果。下面通过具体的实施例对本发明进行详细的描述。
32.请参阅图1所示，图1为本发明实施例提供的微前端样式处理方法的一个流程示意图，包括如下步骤：
33.s10：将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；
34.本发明提供的方法，应用于微前端架构中。在实际使用场景中，微前端包括多个子项目，每个子项目包括一个或多个初始css(cascading style sheets，层叠样式表)文件。
35.该实施例利用webpack工具实现微前端项目的打包配置，具体地，webpack工具在打包时若遇到子项目对应的初始层叠样式表文件，则自动调用loader(加载器)层，并将多个子项目对应的多个初始层叠样式表文件传入webpack打包配置的loader层，进而在loader层实现样式表文件的处理。此外，还可将涉及样式表的less、scss文件等一并传入loader层。
36.在将初始层叠样式表文件传入loader层后，loader层接收传递过来的初始层叠样式表文件，并将这些文件转换成为抽象语法树(abstract syntax code，ast)结构的文件。其中，抽象语法树是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构。
37.其中，如图2所示，步骤s10中，将多个子项目的初始层叠样式表文件传入webpack的加载器层之前，还包括如下步骤：
38.s01：配置加载器层的配置参数，其中，配置参数包括属性名称参数以及属性值参数。
39.对于步骤s01，在利用loader层处理初始层叠样式表文件之前，首先通过设置配置参数的方式对loader层进行配置。其中，可以通过传入参数的方法设置配置参数，也可通过直接修改代码文件的方法设置配置参数，在此不做限定。
40.具体地，配置参数包括属性名称参数、属性值参数以及过滤参数。在实际应用场景中，属性名称参数attrname为属性名，其中，多个子项目的属性名可以一致；属性值参数attrval为与属性名对应的属性值，为兼容多个子项目共存的场景，可针对每个子项目配置成不同的值，默认取子项目的名称。
41.该实施例通过设置配置参数，使得不同子项目的样式可以相互区分，而不互相影响。
42.其中，如图3所示，步骤s10中，根据多个初始层叠样式表文件确定抽象语法树文件，包括如下步骤：
43.s11：依次读取每个初始层叠样式表文件中的每个字符，并根据读取到的字符构造词法单元，其中，词法单元包括词法单元类别以及词法单元值；
44.s12：组合词法单元，得到词法单元序列，并根据词法单元序列生成抽象语法树文件。
45.对于步骤s11-s12，首先读取初始层叠样式表文件，将一个初始层叠样式表文件作为一个字符串，依次读取字符串中的每个字符，并根据样式表文件的词法定义，依次识别单
词。例如，针对.color{color:#ff0000；}，可依次读取每个字符，并识别出其中的每个单词。
46.在识别出单词后，利用单词构造词法单元，例如《id,“x”》，其中，id为词法单元类别，“x”为词法单元值。根据多个语法单元之间的关系，将词法单元组成词法单元序列，进而生成ast结构的抽象语法树文件。
47.该实施例将初始层叠样式表文件转换成为ast结构的抽象语法树文件，更便于查找初始层叠样式表文件中的数据，提高了查找效率以及精确度。
48.图4示出了本技术另一个实施例的根据多个初始层叠样式表文件确定抽象语法树文件的示意图，如图所示，根据初始层叠样式表文件确定抽象语法树文件的过程包括词法分析以及语法分析两个步骤，在词法分析步骤中，读取源码也即初始层叠样式表文件中的每个字符，然后将其转换成为词法单元(token)序列；在语法分析步骤中，将词法分析器解析出的词法单元序列转换成为树状结构，得到抽象语法树文件。
49.s20：在抽象语法树文件中，为子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识第一元素所属的子项目；
50.在该步骤中，修改抽象语法树文件以使各子项目不相互影响，具体地，在抽象语法树文件中，针对子项目中的第一元素，为其对应的样式添加datasrc(数据源)属性，利用数据源属性中的参数来标识第一元素属于哪个子项目，避免多个子项目的第一元素相互混淆，以消除不同子项目共存时的相互影响，避免样式错乱。
51.其中，如图5所示，步骤s20中，为子项目中的第一元素对应的样式添加数据源属性，包括如下步骤：
52.s21：为子项目中的第一元素对应的样式构建与数据源属性对应的结构；
53.其中，如图6所示，步骤s21中，子项目中的第一元素对应的样式构建与数据源属性对应的结构，包括如下步骤：
54.s211：遍历所述抽象语法树文件，根据标识选择器和/或类选择器查找所述第一元素；
55.s212：为查找到的所述第一元素构建属性选择器，其中，所述属性选择器与所述数据源属性对应。
56.对于步骤s211-s212，在遍历抽象语法树文件的过程中，若遇到id或者class类型的节点，则认为查找到了子项目中的第一元素。具体地，可根据标识选择器(idselector)和/或类选择器(classselector)进行查找，若遇到idselector，则认为查找到了id类型的第一元素；若遇到classselector，则认为查找到了class类型的第一元素。
57.在查找到第一元素后，为第一元素构建属性选择器(attributeselector)，具体地，loader层为第二目标节点生成一个name为identifier类型、value也为identifier类型通过等号连接的attributeselector数据结构。s22：在结构中，根据属性名称参数以及属性值参数更新数据源属性。
58.对于步骤s22，根据属性名称参数以及属性值参数，为第一元素的数据源属性中的参数赋值，更新数据源属性，具体地，在前述attributeselector数据结构中，为identifier类型的name参数赋值值为data-[attrname]、为identifier类型的value参数赋值为attrval，其中attrname为属性名称参数，attrval为属性值参数。
[0059]
例如，为一个id类型的节点添加属性后，结构如下所示：
[0060][0061][0062]
该实施例通过配置参数，可以清晰区分每个第一元素的数据来源，即每个第一元
素属于哪个子项目，实现了样式隔离，避免由于多个子项目的css文件互相影响，导致样式混淆丢失。
[0063]
其中，如图7所示，步骤s22之前，还包括如下步骤：
[0064]
s23：分别判断每个第二目标节点是否携带scoped属性；
[0065]
对于步骤s23：scoped是基于层叠样式表文件中style标签的一个特殊属性，在style标签中设置样式会全局生效，而如果第一元素携带scoped属性，那么可认为其对应的样式只应用于该第一元素，也即实现样式的模块化。通过scoped属性，可以使得第一元素之间的样式不相互污染。
[0066]
下例为在初始层叠样式表中，携带scoped样式的第一元素的代码：
[0067]
.scoped[data-v-37dfd6fc]{
[0068]
position:absolute；
[0069]
}
[0070]
第一元素其中，如图8所示，步骤s23中，分别判断每个第二目标节点是否携带scoped属性，包括如下步骤：
[0071]
s231：若第一元素携带标识属性，且标识属性的属性值符合预设标识规则，则第一元素携带scoped属性。
[0072]
对于步骤s231，若第一元素携带scoped属性，则其名称为特殊样式，如data-v-469af010。基于此，可根据此特殊样式确定第一元素是否携带scoped属性。具体地，在抽象语法树文件中查找标识属性，其中标识属性是type参数的参数值为identifier的属性。若标识属性的name属性值符合data-v-xx格式的预设标识规则，则确定第一元素携带scoped属性。
[0073]
下例为携带scoped属性的第一元素的样式在抽象语法树文件中对应的代码：
[0074][0075]
如图9所示，在步骤s22中，根据配置参数更新数据源属性，包括如下步骤：
[0076]
s221：若第一元素不携带scoped属性，则根据属性名称参数以及属性值参数更新数据源属性。
[0077]
针对携带scoped属性的第一元素，可以认为其不需要设置全局样式。虽然根据属
性名称参数以及属性值参数为该第一元素添加属性也不会影响其样式，但是会增加代码长度。因此，在更新数据源属性时忽略掉该第一元素，而仅针对不携带scoped属性的第一元素进行更新。
[0078]
其中，配置参数包括过滤参数；
[0079]
过滤参数excludes为需要忽略处理的css类名。
[0080]
s30：将修改后的抽象语法树文件转换为目标层叠样式表文件。
[0081]
最后将修改后的语法树文件转换为目标层叠样式表文件，在展示每个子项目的样式时，只需解析目标层叠样式表文件即可。
[0082]
该实施例根据多个子项目的初始层叠样式表文件生成抽象语法树文件，利用了抽象语法树文件的树状结构，使得多个子项目的第一元素之间的层级关系更加清晰。通过修改抽象语法树文件，实现了子项目中第一元素的样式设置，为项目中的第一元素对应的样式添加数据源属性，以利用数据源属性消除不同子项目共存时的相互影响。其中，第一元素可为id也可为class类型。在修改抽象语法树文件后，将其转换成为目标层叠样式表文件，此时利用目标层叠样式表文件即可清晰地表明多个子项目的第一元素之间的层级关系，避免了不同子项目之间互相干扰。
[0083]
如图10所示，步骤s30之前，还包括如下步骤：
[0084]
s40：在抽象语法树文件中查找子项目的弹窗组件对应的第二元素；
[0085]
s50：根据第二元素对应的标识名或类名，更新过滤参数对应的参数值。
[0086]
对于步骤s40-s50，在微前端架构中，存在容器以及多个子项目，此时多个子项目的初始层叠样式表文件以及脚本都放在容器的div中。若子项目中包含弹窗组件，则弹窗组件插入的位置是在子项目的某个div下，然而在弹窗时，弹窗组件的样式在顶层也即容器的全局div中。因此，此时弹窗组件的层级高于其对应的初始层叠样式表文件的层级，若在其对应的初始层叠样式表文件中更改该弹窗组件的样式，则由于容器的全局div样式没有更改，而导致弹窗的样式更改不成功。
[0087]
基于此，该实施例利用过滤参数对子项目中弹窗组件的样式进行过滤。具体地，在抽象语法树文件中查找子项目中弹窗组件对应的元素作为第二元素，并确定查找到的第二元素的class名或者id名，将class名或id名写入loader层的过滤参数，实现参数值的更新。此后，在利用全局div样式进行前端展示时，自动过滤子项目的弹窗组件，使得弹窗组件可根据其对应子项目的样式进行展示。
[0088]
该实施例对子项目中弹窗组件的样式进行过滤，从而在对弹窗组件进行展示时，容器的全局div样式不对弹窗组件起作用，消除了全局div样式对子项目中弹窗组件的影响。
[0089]
可见，相较于已有微前端样式处理方法，上述方案根据多个子项目的初始层叠样式表文件生成抽象语法树文件，利用了抽象语法树文件的树状结构，使得多个子项目的第一元素之间的层级关系更加清晰。通过修改抽象语法树文件，实现了子项目中第一元素的样式设置，其中，第一元素可为id也可为class类型。具体地，为子项目中的第一元素设置attributeselector数据结构，并根据配置参数编辑该结构以实现数据源属性的更新，利用数据源属性实现样式的隔离设置。在此基础上，还针对已经携带scoped属性的第一元素进行忽略处理，使得该第一元素的样式独立于其他第一元素。进一步地，还通过excludes参数
实现了子项目中弹窗组件也即第二元素的样式设置，避免其受全局样式影响。在修改抽象语法树文件后，将其转换成为目标层叠样式表文件，此时利用目标层叠样式表文件即可清晰地表明多个子项目的元素之间的层级关系，避免了不同子项目之间互相干扰。
[0090]
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
[0091]
在一实施例中，提供一种微前端样式处理装置，该微前端样式处理装置与上述实施例中微前端样式处理方法一一对应。如图11所示，该微前端样式处理装置包括：转换模块以及样式处理模块。各功能模块详细说明如下：
[0092]
转换模块，用于将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；
[0093]
样式处理模块，用于在抽象语法树文件中，为子项目中的元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识元素所属的子项目；
[0094]
转换模块，还用于将修改后的抽象语法树文件转换为目标层叠样式表文件。
[0095]
在一个实施例中，装置还包括配置模块，用于：
[0096]
配置loader层的配置参数，其中，配置参数包括属性名称参数以及属性值参数；
[0097]
样式处理模块，用于为子项目中的元素对应的样式构建与数据源属性对应的结构；
[0098]
在结构中，根据属性名称参数以及属性值参数更新数据源属性。
[0099]
在一个实施例中，样式处理模块用于：
[0100]
遍历抽象语法树文件，根据标识选择器和/或类选择器查找元素；
[0101]
为查找到的元素构建属性选择器，其中，属性选择器与数据源属性对应。
[0102]
在一个实施例中，样式处理模块用于：
[0103]
分别判断每个元素是否携带scoped属性；
[0104]
根据配置参数更新数据源属性，包括：
[0105]
若元素不携带scoped属性，则根据属性名称参数以及属性值参数更新数据源属性。
[0106]
在一个实施例中，样式处理模块用于：
[0107]
若元素携带标识属性，且标识属性的属性值符合预设标识规则，则确定元素携带scoped属性。
[0108]
在一个实施例中，配置参数包括过滤参数；
[0109]
样式处理模块用于：
[0110]
在抽象语法树文件中查找子项目的弹窗组件对应的第一目标节点；
[0111]
根据第一目标节点对应的类名，更新过滤参数对应的参数值。
[0112]
在一个实施例中，转换模块用于：
[0113]
依次读取每个初始层叠样式表文件中的每个字符，并根据读取到的字符构造词法单元，其中，词法单元包括词法单元类别以及词法单元值；
[0114]
组合词法单元，得到词法单元序列，并根据词法单元序列生成抽象语法树文件。
[0115]
在一个实施例中，提供了一种电子设备，该电子设备其内部结构图可以如图12所
示。该电子设备包括通过处理器、存储器和网络模块。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性和/或易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、指令或代码。该内存储器为非易失性存储介质中的操作系统和指令或代码的运行提供环境。该指令或代码被处理器执行时以实现一种上述微前端样式处理方法的功能或步骤。该电子设备的网络模块可包括网络接口和/或无线网络模块，电子设备可通过网络模块与其他设备或服务平台通信。此外，该电子设备还可包括显示屏和输入装置等。
[0116]
在一个实施例中，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的指令或代码，处理器执行指令或代码时实现以下步骤：
[0117]
将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；
[0118]
在抽象语法树文件中，为子项目中的元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识元素所属的子项目；
[0119]
将修改后的抽象语法树文件转换为目标层叠样式表文件。
[0120]
在一个实施例中，提供了一种存储介质，其上存储有指令或代码，指令或代码被处理器执行时实现以下步骤：
[0121]
将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；
[0122]
在抽象语法树文件中，为子项目中的元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识元素所属的子项目；
[0123]
将修改后的抽象语法树文件转换为目标层叠样式表文件。
[0124]
需要说明的是，上述关于存储介质或电子设备所能实现的功能或步骤，可对应参阅前述方法实施例中的相关描述，为避免重复，这里不再一一描述。
[0125]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过指令或代码来指令相关的硬件来完成，所述的指令或代码可存储于一非易失性计算机可读取存储介质中，该指令或代码在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。
[0126]
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
[0127]
本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的单元或流程并不一定是实施本技术所必须的。本领域技术人员可以理解实施场景中的系统中的单
元可以按照实施场景描述进行分布于实施场景的系统中，也可以进行相应变化位于不同于本实施场景的一个或多个系统中。上述实施场景的单元可以合并为一个单元，也可以进一步拆分成多个子单元。
[0128]
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。