微前端样式处理方法、装置、设备及介质制造方法及图纸

本申请公开了一种微前端样式处理方法、装置、介质及设备，方法应用于客户端，包括：将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；在抽象语法树文件中，为子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识第一元素所属的子项目；将修改后的抽象语法树文件转换为目标层叠样式表文件。本申请的方法解决了现有方法中微前端的多个子项目的多份层叠样式表互相影响，导致样式显示混乱的问题。样式显示混乱的问题。样式显示混乱的问题。

【技术实现步骤摘要】
微前端样式处理方法、装置、设备及介质


[0001]本申请涉及计算机
，尤其是涉及到一种微前端样式处理方法、装置、设备及介质。

技术介绍

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

技术实现思路

[0004]有鉴于此，本申请提供了一种微前端样式处理方法、装置、介质及设备，以解决现有方法中微前端的多个子项目的多份层叠样式表互相影响的问题。
[0005]本申请的第一方面，提供了一种微前端样式处理方法，所述方法包括：
[0006]将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；
[0007]在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；
[0008]将所述修改后的抽象语法树文件转换为目标层叠样式表文件。
[0009]本申请的第二方面，提供了一种微前端样式处理装置，所述装置包括：
[0010]转换模块，用于将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；
[0011]样式处理模块，在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；
[0012]所述转换模块，还用于将所述修改后的所述抽象语法树文件转换为目标层叠样式表文件。
[0013]本申请的第三方面，提供了一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的指令或代码，所述处理器执行所述指令或代码时实现上述微前端样式处理方法。
[0014]本申请的第四方面，提供了一种存储介质，其上存储有指令或代码，所述指令或代码被处理器执行时实现上述微前端样式处理方法。
[0015]上述基于微前端样式处理方法、装置、设备及介质所实现的方案，根据多个子项目的初始层叠样式表文件生成抽象语法树文件，利用了抽象语法树文件的树状结构，使得多个子项目的第一元素之间的层级关系更加清晰。通过修改抽象语法树文件，为项目中的第一元素对应的样式添加数据源属性，以利用数据源属性消除不同子项目共存时的相互影响。其中，第一元素可为id也可为class类型。在修改抽象语法树文件后，将其转换成为目标层叠样式表文件，此时利用目标层叠样式表文件即可清晰地表明多个子项目的第一元素之间的层级关系，避免了不同子项目之间互相干扰。
[0016]上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
[0017]为了更清楚地说明本专利技术实施例的技术方案，下面将对本专利技术实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0018]图1示出了本申请实施例提供的一种微前端样式处理方法的流程示意图；
[0019]图2示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0020]图3示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0021]图4示出了本申请实施例提供的另一种微前端样式处理方法的确定抽象语法树文件的示意图；
[0022]图5示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0023]图6示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0024]图7示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0025]图8示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0026]图9示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0027]图10示出了本申请实施例提供的另一种微前端样式处理方法的流程示意图；
[0028]图11示出了本申请实施例提供的一种微前端样式处理装置的结构框图；
[0029]图12示出了本申请实施例提供的一种电子设备的结构框图。
具体实施方式
[0030]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0031]本申请实施例提供的微前端样式处理方法，可以应用在具有指令或程序运行能力的电子设备，其中，电子设备可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电
脑和便携式可穿戴设备，也可以车载系统等。运行在不同的运算设备仅是方案在执行主体上的差异，本领域人员可预见在不同运算设备中运行能够产生相同的技术效果。下面通过具体的实施例对本专利技术进行详细的描述。
[0032]请参阅图1所示，图1为本专利技术实施例提供的微前端样式处理方法的一个流程示意图，包括如下步骤：
[0033]S10：将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；
[0034]本专利技术提供的方法，应用于微前端架构中。在实际使用场景中，微前端包括多个子项目，每个子项目包括一个或多个初始CSS(Cascading Style Sheets，层叠样式表)文件。
[0035]该实施例利用webpack工具实现微前端项目的打包配置，具体地，webpack工具在打包时若遇到子项目对应的初始层叠样式表文件，则自动调用loader(加载器)层，并将多个子项目对应的多个初始层叠样式表文件传入webpack打包配置的loader层，进而在loader层实现样式表文件的处理。此外，还可将涉及样式表的less、scss文件等一并传入loader层。
[0036]在将初始本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端样式处理方法，其特征在于，所述方法包括：将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；将所述修改后的抽象语法树文件转换为目标层叠样式表文件。2.根据权利要求1所述的方法，其特征在于，所述将多个子项目的初始层叠样式表文件传入webpack的加载器层之前，所述方法还包括：配置所述加载器层的配置参数，其中，所述配置参数包括属性名称参数以及属性值参数；所述为所述子项目中的第一元素对应的样式添加数据源属性，具体包括：为所述子项目中的第一元素对应的样式构建与所述数据源属性对应的结构；在所述结构中，根据所述属性名称参数以及所述属性值参数更新所述数据源属性。3.根据权利要求2所述的方法，其特征在于，所述为所述子项目中的第一元素对应的样式构建与所述数据源属性对应的结构，包括：遍历所述抽象语法树文件，根据标识选择器和/或类选择器查找所述第一元素；为查找到的所述第一元素构建属性选择器，其中，所述属性选择器与所述数据源属性对应。4.根据权利要求2所述的方法，其特征在于，所述根据所述属性名称参数以及所述属性值参数更新所述数据源属性之前，所述方法还包括：分别判断每个所述第一元素是否携带scoped属性；所述根据所述配置参数更新所述数据源属性，包括：若所述第一元素不携带所述scoped属性，则根据所述属性名称参数以及所述属性值参数更新所述数据源属性。5.根据权利要求4所述的方法，其特征在于，所述分别判断每个所述第一元素是否携带sco...

【专利技术属性】
技术研发人员：廖正明，
申请(专利权)人：平安壹钱包电子商务有限公司，
类型：发明
国别省市：