【技术实现步骤摘要】
本申请涉及计算机网络，尤其涉及一种前端框架组件自动转换方法、系统、电子设备及存储介质。
技术介绍
1、angu l ar框架是较早出现的一种前端开发框架，目前多数历史项目是基于angul ar框架实现的，并且已经更新迭代了好几年，未来也还会持续投入使用。随着近年前端技术的飞速发展，目前国内vue成为了前端框架的主战场，基于不同框架的项目无法实现代码共享，因此需要将angu l ar框架转换为vue框架。但angu l ar和vue这两个框架相差比较大，语法、代码的最佳实践还有一些特定场景的用法实现起来差异较大，目前只能通过人工迁移代码进行转换，需要占用开发者很多时间精力。
技术实现思路
1、本申请实施例的主要目的在于提出一种前端代码自动转换方法、系统、电子设备及存储介质，旨在自动将项目中的angu l ar框架组件转为vue框架组件，提升代码迁移的速度，减少开发者的重复工作。
2、为实现上述目的，本申请实施例的一方面提出了一种前端框架组件自动转换方法，所述方法包括：
3、获取angu l ar框架组件文件的第一层叠样式表、超文本标记语言模板和第一typescr ipt代码；
4、对所述第一层叠样式表进行解析和转换，得到第二层叠样式表；
5、对所述超文本标记语言模板进行语法语义解析和转换，得到超文本标记语言模板的第一文档对象模型树结构对象；
6、从所述第一文档对象模型树结构对象中采集数据，并将采集到的数据同步到所述第一typ
7、分别对所述第一typescr ipt代码中的第一变量、第一方法体和第一导入语句进行语法语义解析和转换，对应得到第二变量、第二方法体和第二导入语句；
8、将所述第一文档对象模型树结构对象转换为超文本标记语言模板字符串；
9、拼接多个所述第二方法体、所述第二变量和所述第二导入语句，得到符合vue框架语法规范的第二typescr ipt代码；
10、创建vue文件，将所述第二层叠样式表、所述超文本标记语言模板字符串和所述第二typescr i pt代码按照预设规则写入所述vue文件中的对应标签处，得到vue框架组件文件。
11、在一些实施例中，所述获取angu l ar框架组件文件的第一层叠样式表、超文本标记语言模板和第一typescr i pt代码，包括以下步骤：
12、获取第一层叠样式表引用路径、超文本标记语言模板引用路径和第一typescr ipt代码；
13、根据所述第一层叠样式表引用路径读取第一层叠样式表；
14、根据所述超文本标记语言模板引用路径读取超文本标记语言模板。
15、在一些实施例中，所述对所述第一层叠样式表进行解析和转换，得到第二层叠样式表，包括以下步骤：
16、对所述第一层叠样式表进行解析，得到所述第一层叠样式表中需要替换的目标修改部分；
17、通过正则表达式将所述目标修改部分进行转换，得到第二层叠样式表。
18、在一些实施例中，所述对所述超文本标记语言模板进行语法语义解析和转换，得到超文本标记语言模板的第一文档对象模型树结构对象，包括以下步骤：
19、通过解析器，对所述超文本标记语言模板的字符串进行解析，得到第二文档对象模型树结构对象，所述第二文档对象模型树结构对象包括若干个元素节点，所述元素节点用于表征指令或者属性；
20、递归遍历所述第二文档对象模型树结构对象中的元素节点，删除所述第二文档对象模型树结构对象中无用的元素节点，并将遍历的元素节点的父节点和遍历到的特殊元素节点记录到数据采集器中；
21、对所述第二文档对象模型树结构对象中对应指令的元素节点进行语法语义解析和转换，更新得到符合vue框架指令语法规范的元素节点；
22、对所述第二文档对象模型树结构对象中对应属性的元素节点进行语法语义解析和转换，更新得到符合vue框架语法属性规范的元素节点；
23、根据更新后的所有元素节点，得到第一文档对象模型树结构对象。
24、在一些实施例中，所述从所述第一文档对象模型树结构对象中采集数据，并将采集到的数据同步到所述第一typescr i pt代码，包括以下步骤：
25、遍历所述第一文档对象模型树结构对象中的所有元素节点，提取元素节点属性中的变量和方法；
26、将提取到的变量和方法同步到所述第一typescr i pt代码中。
27、在一些实施例中，所述分别对所述第一typescr i pt代码中的第一变量、第一方法体和第一导入语句进行语法语义解析和转换，得到第二变量、第二方法体和第二导入语句，包括以下步骤：
28、根据vue变量定义规则，对所述第一typescr i pt代码中的第一变量进行类型定义，并根据第一变量的类型采用对应的解析逻辑对所述第一变量进行解析得到第二变量，所述第二变量为符合vue框架语法规范的vue变量；
29、根据每一个所述第一方法体创建对应的抽象语法树结构对象；遍历所述抽象语法树结构对象中的每个节点得到需要替换的代码片段；通过正则表达式对所述需要替换的代码片段进行替换，得到第二方法体；
30、根据预设导入语句规则，对所述第一导入语句进行引用处理，得到第二导入语句，其中，所述引用处理包括引用删除、引用替换、公共引用转换或引用保留的其中一项。
31、在一些实施例中，所述拼接多个所述第二方法体、所述第二变量和所述第二导入语句，得到符合vue框架语法规范的第二typescr i pt代码，包括以下步骤：
32、将生命周期函数类型的第二方法体写入到vue环境对应的钩子函数中，得到钩子函数类型的第二方法体；
33、组装所有所述钩子函数类型的第二方法体后，组装普通函数类型的第二方法体，得到第一组装代码；
34、按照不同类型的第二变量拼接顺序，在所述第一组装代码上依次组装不同类型的所述第二变量，得到第二组装代码；
35、在所述第二组装代码上组装所述第二导入语句，得到符合vue框架语法规范的第二typescr i pt代码。
36、为实现上述目的，本申请实施例的另一方面提出了一种前端框架组件自动转换系统系统，所述系统包括：
37、第一模块，用于获取angu l ar框架组件文件的第一层叠样式表、超文本标记语言模板和第一typescr i pt代码；
38、第二模块，用于对所述第一层叠样式表进行解析和转换，得到第二层叠样式表；
39、第三模块，用于对所述超文本标记语言模板进行语法语义解析和转换，得到超文本标记语言模板的第一文档对象模型树结构对象；
40、第四模块，用于从所述第一文档对象模型树结构对象中采集数据，并将采集到的数据同步到所述第一typescr i pt代码；
41本文档来自技高网...
【技术保护点】
1.一种前端框架组件自动转换方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的方法，其特征在于，所述获取Angular框架组件文件的第一层叠样式表、超文本标记语言模板和第一TypeScript代码，包括以下步骤：
3.根据权利要求1所述的方法，其特征在于，所述对所述第一层叠样式表进行解析和转换，得到第二层叠样式表，包括以下步骤：
4.根据权利要求1所述的方法，其特征在于，所述对所述超文本标记语言模板进行语法语义解析和转换，得到超文本标记语言模板的第一文档对象模型树结构对象，包括以下步骤：
5.根据权利要求4所述的方法，其特征在于，所述从所述第一文档对象模型树结构对象中采集数据，并将采集到的数据同步到所述第一TypeScri pt代码，包括以下步骤：
6.根据权利要求1所述的方法，其特征在于，所述分别对所述第一TypeScri pt代码中的第一变量、第一方法体和第一导入语句进行语法语义解析和转换，得到第二变量、第二方法体和第二导入语句，包括以下步骤：
7.根据权利要求6所述的方法，其特征在于，所
8.一种前端框架组件自动转换系统，其特征在于，所述系统包括：
9.一种电子设备，其特征在于，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法。
...【技术特征摘要】
1.一种前端框架组件自动转换方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的方法，其特征在于，所述获取angular框架组件文件的第一层叠样式表、超文本标记语言模板和第一typescript代码，包括以下步骤：
3.根据权利要求1所述的方法，其特征在于，所述对所述第一层叠样式表进行解析和转换，得到第二层叠样式表，包括以下步骤：
4.根据权利要求1所述的方法，其特征在于，所述对所述超文本标记语言模板进行语法语义解析和转换，得到超文本标记语言模板的第一文档对象模型树结构对象，包括以下步骤：
5.根据权利要求4所述的方法，其特征在于，所述从所述第一文档对象模型树结构对象中采集数据，并将采集到的数据同步到所述第一typescri pt代码，包括以下步骤：
6.根据权利要求1所述的方法，其...
【专利技术属性】
技术研发人员：范伟梅，刘佳文，刘帅英，王连光，
申请(专利权)人：广州市玄武无线科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。