CN113805881B - 一种不同框架间前端组件的转换方法及装置 - Google Patents
一种不同框架间前端组件的转换方法及装置 Download PDFInfo
- Publication number
- CN113805881B CN113805881B CN202111104964.7A CN202111104964A CN113805881B CN 113805881 B CN113805881 B CN 113805881B CN 202111104964 A CN202111104964 A CN 202111104964A CN 113805881 B CN113805881 B CN 113805881B
- Authority
- CN
- China
- Prior art keywords
- code
- syntax tree
- type
- file
- abstract syntax
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 36
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000012545 processing Methods 0.000 claims description 19
- 238000000926 separation method Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 12
- 238000013461 design Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003252 repetitive effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/425—Lexical analysis
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Devices For Executing Special Programs (AREA)
Abstract
本发明涉及一种不同框架间前端组件的转换方法及装置，所述方法包括以下步骤：1)接收前端组件代码源文件；2)判断该源文件的文件类型是否为可执行类型，若是，则执行步骤3)，若否，则退出；3)将所述源文件分离为样式代码块和核心代码块；4)根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树；5)根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；6)将所述第二抽象语法树反向生成代码，与所述步骤3)中的样式代码块合并生成前端组件代码目标文件。与现有技术相比，本发明具有减少重复性开发、提高前端开发效率等优点。
Description
技术领域
本发明涉及前端工程技术领域，尤其是涉及一种不同框架间前端组件的转换方法及装置。
背景技术
随着前端开发复杂度的日益提升，组件化开发应运而生，React、Vue等优秀的框架越来越流行。前端组件化是伴随着前端发展的一种不可或缺的设计思想，利用组件化设计，可以将Web应用中一些相关的功能封装在一起构建通用性、可重用的组件，从而构建大型应用程序，提高开发效率。
然而，前端组件是无法跨框架复用的，前端不同框架的组件实现的方式不一致，底层模式也不一样。如何解决前端组件的可移植性问题，从而减少重复性开发、提高前端开发效率，是本领域需要解决的技术问题。
发明内容
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种减少重复性开发、提高前端开发效率的不同框架间前端组件的转换方法及装置。
本发明的目的可以通过以下技术方案来实现：
第一方面，本发明提供一种不同框架间前端组件的转换方法，包括以下步骤：
1)接收前端组件代码源文件；
2)判断该源文件的文件类型是否为可执行类型，若是，则执行步骤3)，若否，则退出；
3)将所述源文件分离为样式代码块和核心代码块；
4)根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树；
5)根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；
6)将所述第二抽象语法树反向生成代码，与所述步骤3)中的样式代码块合并生成前端组件代码目标文件。
进一步地，所述可执行类型包括Vue组件和React组件。
进一步地，所述步骤2)中，根据文件后缀名以及关键字段匹配判断文件类型是否为可执行类型。
进一步地，所述核心代码块包括DOM元素展示代码块和业务逻辑处理代码。
进一步地，所述步骤4)中，实时判断解析过程是否发生语法错误，若是，则退出。
第二方面，本发明还提供一种不同框架间前端组件的转换装置，包括：
处理单元，用于接收前端组件代码源文件，判断该源文件的文件类型是否为可执行类型；
分离单元，在所述处理单元的判断结果为是时响应，用于将所述源文件分离为样式代码块和核心代码块；
解析单元，用于根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树；
转换单元，用于根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；
生成单元，用于将所述第二抽象语法树反向生成代码，与所述分离单元中的样式代码块合并生成前端组件代码目标文件。
进一步地，所述可执行类型包括Vue组件和React组件。
进一步地，所述处理单元中，根据文件后缀名以及关键字段匹配判断文件类型是否为可执行类型。
进一步地，所述核心代码块包括DOM元素展示代码块和业务逻辑处理代码。
进一步地，所述解析单元包括：
语法判断子单元，用于实时判断解析过程是否发生语法错误，并在判断结果为是时，产生退出指令。
与现有技术相比，本发明具有以下有益效果：
1、本发明通过对已经构建的组件进行转换处理，使得同一前端组件能够兼容于不同框架下，减少重复性开发、提高前端开发效率。
2、本发明能够支持主流前端框架Vue和React组件的相互转换，转换过程操作简单。
附图说明
图1为本发明方法的流程示意图；
图2为本发明装置的结构示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
实施例1
如图1所示，本实施例提供一种不同框架间前端组件的转换方法，包括：
步骤S101、接收前端单文件组件代码源文件，文件组件即把一个组件全部内容汇合到一个文件中。
步骤S102、根据文件后缀名以及关键字段匹配判断该源文件的文件类型是否为可执行类型，若是，则执行步骤S102，若否，则退出。
本实施例的可执行类型包括Vue组件和React组件，其中，React组件包括类组件和函数组件。若当前文件类型为Vue组件，则转换目标为React类组件；若当前类型为React组件，则转换目标为Vue组件。
步骤S103、将所述源文件分离为样式代码块和核心代码块。本实施例中，核心代码块包括DOM元素展示代码块和业务逻辑处理代码。分离出的三大块具体为：
1)样式代码，包括css/less/sass等；
2)DOM元素展示代码：React组件中的jsx部分/Vue中的Template部分；
3)业务逻辑处理代，一般为js或ts代码。
步骤S104、根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树，具体地，根据规则分别对DOM元素展示代码块和业务逻辑处理代码进行解析，解析获得DOM元素展示代码语法树和业务逻辑处理代码语法树。
步骤S105、在步骤S104的解析过程实时判断解析过程是否发生语法错误，若是，则退出，若否，且解析完成，则执行步骤S106。
步骤S106、根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树。
步骤S107、将所述第二抽象语法树反向生成代码，与所述步骤S103中的样式代码块合并生成前端组件代码目标文件。
上述方法能够支持主流前端框架Vue和React组件的相互转换。
上述方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
实施例2
如图2所示，本实施例提供一种不同框架间前端组件的转换装置，包括处理单元1、分离单元2、解析单元3、转换单元4和生成单元5，其中：
处理单元1用于接收前端组件代码源文件，通过文件后缀名以及关键字段匹配判断该源文件的文件类型是否为可执行类型；
分离单元2在所述处理单元的判断结果为是时响应，用于将所述源文件分离为样式代码块和核心代码块；
解析单元3用于根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树；
转换单元4用于根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；
生成单元5用于将所述第二抽象语法树反向生成代码，与所述分离单元中的样式代码块合并生成前端组件代码目标文件。
其余同实施例1。
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。
Claims (6)
1.一种不同框架间前端组件的转换方法，其特征在于，包括以下步骤：
1)接收前端组件代码源文件；
2)判断该源文件的文件类型是否为可执行类型，若是，则执行步骤3)，若否，则退出，具体地，根据文件后缀名以及关键字段匹配判断文件类型是否为可执行类型；
3)将所述源文件分离为样式代码块和核心代码块，所述核心代码块包括DOM元素展示代码块和业务逻辑处理代码；
4)根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树，具体地，根据规则分别对DOM元素展示代码块和业务逻辑处理代码进行解析，解析获得DOM元素展示代码语法树和业务逻辑处理代码语法树；
5)根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；
6)将所述第二抽象语法树反向生成代码，与所述步骤3)中的样式代码块合并生成前端组件代码目标文件。
2.根据权利要求1所述的不同框架间前端组件的转换方法，其特征在于，所述可执行类型包括Vue组件和React组件。
3.根据权利要求1所述的不同框架间前端组件的转换方法，其特征在于，所述步骤4)中，实时判断解析过程是否发生语法错误，若是，则退出。
4.一种不同框架间前端组件的转换装置，其特征在于，包括：
处理单元，用于接收前端组件代码源文件，判断该源文件的文件类型是否为可执行类型，具体地，根据文件后缀名以及关键字段匹配判断文件类型是否为可执行类型；
分离单元，在所述处理单元的判断结果为是时响应，用于将所述源文件分离为样式代码块和核心代码块，所述核心代码块包括DOM元素展示代码块和业务逻辑处理代码；
解析单元，用于根据预设词法和语法规则将所述核心代码块解析成与源类型对应的第一抽象语法树，具体地，根据规则分别对DOM元素展示代码块和业务逻辑处理代码进行解析，解析获得DOM元素展示代码语法树和业务逻辑处理代码语法树；
转换单元，用于根据转换目标类型，根据预设转换规则对所述第一抽象语法树进行转换，获得与转换目标类型对应的第二抽象语法树；
生成单元，用于将所述第二抽象语法树反向生成代码，与所述分离单元中的样式代码块合并生成前端组件代码目标文件。
5.根据权利要求4所述的不同框架间前端组件的转换装置，其特征在于，所述可执行类型包括Vue组件和React组件。
6.根据权利要求4所述的不同框架间前端组件的转换装置，其特征在于，所述解析单元包括：
语法判断子单元，用于实时判断解析过程是否发生语法错误，并在判断结果为是时，产生退出指令。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111104964.7A CN113805881B (zh) | 2021-09-18 | 2021-09-18 | 一种不同框架间前端组件的转换方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111104964.7A CN113805881B (zh) | 2021-09-18 | 2021-09-18 | 一种不同框架间前端组件的转换方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113805881A CN113805881A (zh) | 2021-12-17 |
| CN113805881B true CN113805881B (zh) | 2024-02-23 |
Family
ID=78896127
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111104964.7A Active CN113805881B (zh) | 2021-09-18 | 2021-09-18 | 一种不同框架间前端组件的转换方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113805881B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114489861A (zh) * | 2022-02-16 | 2022-05-13 | 平安普惠企业管理有限公司 | 目标组件转化方法、装置、电子设备及可读存储介质 |
| CN114625379B (zh) * | 2022-05-16 | 2022-08-26 | 杭州兑吧网络科技有限公司 | H5项目源码的生成方法及h5项目源码开发系统 |
| CN115951890B (zh) * | 2023-03-10 | 2023-05-12 | 成都数之联科技股份有限公司 | 一种不同前端框架间的代码转换方法及系统及装置 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110442330A (zh) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | 列表组件转换方法、装置、电子设备及存储介质 |
| CN112052000A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 组件复用、渲染方法及装置 |
| EP3751412A1 (en) * | 2019-06-11 | 2020-12-16 | ENGEL AUSTRIA GmbH | A computer-implemented method to generate an opc ua information model |
| CN112114807A (zh) * | 2020-09-28 | 2020-12-22 | 腾讯科技（深圳）有限公司 | 界面显示方法、装置、设备及存储介质 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9465608B2 (en) * | 2013-03-15 | 2016-10-11 | ArtinSoft Corporation | Code separation with semantic guarantees |
| US20140282373A1 (en) * | 2013-03-15 | 2014-09-18 | Trinity Millennium Group, Inc. | Automated business rule harvesting with abstract syntax tree transformation |
-
2021
- 2021-09-18 CN CN202111104964.7A patent/CN113805881B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112052000A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 组件复用、渲染方法及装置 |
| EP3751412A1 (en) * | 2019-06-11 | 2020-12-16 | ENGEL AUSTRIA GmbH | A computer-implemented method to generate an opc ua information model |
| CN110442330A (zh) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | 列表组件转换方法、装置、电子设备及存储介质 |
| CN112114807A (zh) * | 2020-09-28 | 2020-12-22 | 腾讯科技（深圳）有限公司 | 界面显示方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113805881A (zh) | 2021-12-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113805881B (zh) | 一种不同框架间前端组件的转换方法及装置 | |
| US8762962B2 (en) | Methods and apparatus for automatic translation of a computer program language code | |
| US9122540B2 (en) | Transformation of computer programs and eliminating errors | |
| CN110502520B (zh) | 一种数据入库的方法、系统、设备及计算机可读存储介质 | |
| WO2013029399A1 (zh) | 代码生成方法及系统 | |
| US20100095283A1 (en) | Migration Apparatus Which Convert Application Program of Mainframe System into Application Program of Open System and Method for Thereof | |
| CN111079408A (zh) | 一种语种识别方法、装置、设备及存储介质 | |
| CN110333867B (zh) | 一种多方安全计算数据处理方法、装置及系统 | |
| EP3422181B1 (en) | Method and device for generating code assistance information | |
| CN111026604B (zh) | 一种日志文件解析方法及装置 | |
| CN116595967A (zh) | 一种基于文本的自然语言规则编写方法及相关装置 | |
| CN111309299A (zh) | 工业机器人语言处理方法、装置、存储介质和电子设备 | |
| CN111079407B (zh) | 对用户输入的内容进行解析的方法和装置 | |
| CN114065197A (zh) | 调用序列生成方法、装置、电子设备、存储介质及产品 | |
| CN112579093A (zh) | 一种信息推送方法、装置及相关设备 | |
| CN112486479A (zh) | 一种数据采集方法及装置 | |
| CN111859929A (zh) | 一种数据可视化方法、装置及其相关设备 | |
| CN111475234A (zh) | 一种字符串传递方法、装置、计算机及可读存储介质 | |
| CN112579065A (zh) | 一种将图形组态画面生成跨平台代码的方法及系统 | |
| JP2011242956A (ja) | ソフトウェア仕様の証明装置、及び証明方法 | |
| CN117556835A (zh) | 语音翻译的方法、装置、电子设备和介质 | |
| JP2006079484A (ja) | システム移行に伴うソースプログラム変換プログラム | |
| CN114756474A (zh) | 一种cpu验证中随机向量的生成方法、装置以及电子设备 | |
| CN115794872A (zh) | 基于异构数据库的语句转化方法及装置、存储介质、设备 | |
| CN114443685A (zh) | 一种sql注入检测方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |