CN116431137A - 跨开发框架的组件转换方法、处理系统和组件转换装置 - Google Patents
跨开发框架的组件转换方法、处理系统和组件转换装置 Download PDFInfo
- Publication number
- CN116431137A CN116431137A CN202210002466.XA CN202210002466A CN116431137A CN 116431137 A CN116431137 A CN 116431137A CN 202210002466 A CN202210002466 A CN 202210002466A CN 116431137 A CN116431137 A CN 116431137A
- Authority
- CN
- China
- Prior art keywords
- component
- native
- processed
- preset
- converting
- 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.)
- Pending
Links
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 124
- 238000000034 method Methods 0.000 title claims abstract description 47
- 238000012545 processing Methods 0.000 title claims abstract description 27
- 238000011161 development Methods 0.000 claims abstract description 124
- 238000013515 script Methods 0.000 claims abstract description 73
- 230000008859 change Effects 0.000 claims description 14
- 230000006378 damage Effects 0.000 claims description 14
- 230000015654 memory Effects 0.000 claims description 11
- 238000004806 packaging method and process Methods 0.000 claims description 9
- 230000009466 transformation Effects 0.000 claims description 6
- 230000006870 function Effects 0.000 description 15
- 238000010586 diagram Methods 0.000 description 14
- 238000012423 maintenance Methods 0.000 description 13
- 238000004590 computer program Methods 0.000 description 11
- 238000011426 transformation method Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 4
- 238000013519 translation Methods 0.000 description 4
- 108010001267 Protein Subunits Proteins 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000014509 gene expression Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 239000000758 substrate Substances 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000000737 periodic effect Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
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/35—Creation or generation of source code model driven
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本公开提供了一种跨开发框架的组件转换方法、处理系统和组件转换装置。该方法包括：从基础库获取预设转换编译脚本和预设模板；从组件层获取待处理组件，其中，待处理组件是由第一开发框架构建得到；以及利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，其中，原生组件是由基于浏览器的原生组件开发框架构建得到。
Description
技术领域
本公开涉及计算机技术领域技术领域，更具体地，涉及一种跨开发框架的组件转换方法、跨框架组件的处理系统、组件转换装置、计算机系统和计算机可读存储介质。
背景技术
随着计算机技术的快速发展，越来越多的开发框架用于组件的构建，其中不同开发框架构建的组件与其对应的开发框架之间具有强耦合关系。
在实现本公开构思的过程中，发明人发现相关技术中至少存在如下问题：不同开发框架构建的组件不能在不同的技术栈环境下通用，且对不同框架构建的组件进行维护的成本较高。
发明内容
有鉴于此，本公开提供了一种跨开发框架的组件转换方法、跨框架组件的处理系统、组件转换装置、计算机系统和计算机可读存储介质。
本公开的一个方面提供了一种跨开发框架的组件转换方法，包括：
从基础库获取预设转换编译脚本和预设模板；
从组件层获取待处理组件，其中，上述待处理组件是由第一开发框架构建得到；以及
利用上述预设转换编译脚本和上述预设模板，将上述待处理组件转换为原生组件，其中，上述原生组件是由基于浏览器的原生组件开发框架构建得到。
根据本公开的实施例，上述待处理组件包括组件生命周期和组件参数；
其中，上述利用预设转换编译脚本和上述预设模板，将上述待处理组件转换为原生组件，包括：
利用上述预设转换编译脚本，将上述组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期；
利用上述预设转换编译脚本，将上述组件参数转换为原生参数；
基于上述预设模板，根据上述第一原生组件生命周期、上述第二原生组件生命周期和上述原生参数生成上述原生组件。
根据本公开的实施例，组件转换方法还包括：
在确定上述组件参数发生变更的情况下，生成参数变更通知；
利用上述参数变更通知更新上述第二原生组件生命周期，得到新的第二原生组件生命周期。
根据本公开的实施例，上述待处理组件还包括组件事件和组件样式；
其中，上述利用预设转换编译脚本和上述预设模板，将上述待处理组件转换为原生组件，还包括：
利用上述预设转换编译脚本，将上述组件事件转换为原生组件事件；
利用上述预设转换编译脚本，将上述组件样式转换为原生组件样式；
基于上述预设模板，根据上述第一原生组件生命周期、上述第二原生组件生命周期、上述原生参数、上述原生组件事件和上述原生组件样式生成上述原生组件。
根据本公开的实施例，上述组件生命周期包括挂载周期、销毁周期和已更新周期；
上述利用上述预设转换编译脚本，将上述组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期，包括：
利用上述预设转换编译脚本，将上述挂载周期转换为原生挂载周期；
利用上述预设转换编译脚本，将上述销毁周期转换为原生销毁周期；
利用上述预设转换编译脚本，将上述已更新周期转换为原生已更新周期，其中，上述原生已更新周期用于表征上述第二原生组件生命周期；以及
根据上述原生挂载周期和上述原生销毁周期生成上述第一原生组件生命周期。
根据本公开的实施例，组件转换方法还包括：
对上述原生组件进行打包，生成原生组件包；以及
将上述原生组件包存储于资源包管理器中。
根据本公开的实施例，上述第一开发框架包括Vue开发框架或React开发框架，上述原生组件开发框架包括Web Components开发框架。
本公开的另一个方面提供了一种跨框架组件的处理系统，包括：
基础库，用于存储预设转换编译脚本和创建预设模板；
组件层，用于存储待处理组件，其中，上述待处理组件是由第一开发框架构建得到；
桥梁层，用于利用从上述基础库获取到的预设模板和预设转换编译脚本，将从上述组件层获取到的上述待处理组件转换为原生组件，其中，上述原生组件是由基于浏览器的原生组件开发框架构建得到。
根据本公开的实施例，跨框架组件的处理系统还包括：
资源层，用于存储原生组件包，其中，上述原生组件包是上述桥梁层对上述原生组件进行打包生成的。
本公开的另一个方面提供了一种跨开发框架的组件转换装置，包括：
第一获取模块，用于从基础库获取预设转换编译脚本和预设模板；
第二获取模块，用于从组件层获取待处理组件，其中，上述待处理组件是由第一开发框架构建得到；以及
转换模块，用于利用上述预设转换编译脚本和上述预设模板，将上述待处理组件转换为原生组件，其中，上述原生组件是由基于浏览器的原生组件开发框架构建得到。
本公开的另一方面提供了一种计算机系统，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序，
其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述方法。
本公开的另一方面提供了一种计算机可读存储介质，存储有计算机可执行指令，所述指令在被执行时用于实现本公开实施例所述的方法。
本公开的另一方面提供了一种计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现本公开实施例所述的方法。
根据本公开的实施例，利用预设转换编译脚本和预设模板，将第一开发框架构开发的待处理组件转换成原生组件，由于原生组件是基于浏览器的原生组件开发框架构建的，因此使得转换后的原生组件能够运行在任意框架中，且维护时只需要维护原生组件，不需要维护不同框架下的待处理组件，所以至少部分地克服了不同开发框架构建的组件不能在不同的技术栈环境下通用，且对不同框架构建的组件进行维护的成本较高的技术问题，进而达到了能够转换后的原生组件可以在不同处理框架内复用，且降低了维护成本的技术效果。
附图说明
通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：
图1示意性示出了根据本公开实施例的应用组件转换方法的示例性系统架构；
图2示意性示出了根据本公开实施例的组件转换方法的流程图；
图3示意性示出了根据本公开实施例的组件转换方法的转换编译逻辑图；
图4示意性示出了根据本公开实施例的跨框架组件的处理系统的架构示意图；
图5示意性示出了根据本公开另一实施例的跨框架组件的处理系统的架构示意图；
图6示意性示出了根据本公开的实施例的跨开发框架的组件转换装置的框图；以及
图7示意性示出了根据本公开实施例的实现组件转换方法的电子设备的框图。
具体实施方式
以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。
在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。
在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。
在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。
随着前端技术栈的发展，不同开发框架构建的UI组件库都是基于其自身开发框架而言的，开发框架与其构建的UI组件库之间具有耦合性。换言之，UI组件库一般只能运行在开发该UI组件库的技术栈环境中，因此为了适应不同的开发框架就需要编写多套代码，才能分别运行在不同的技术栈环境中。
然而在多元复杂的团队环境下，可能存在着跨部门或跨团队的合作共建的场景，例如两个前端团队需要合作实现同一个项目，但是两个团队分别使用的技术栈环境是不同的，例如A团队使用Vue框架作为前端技术栈，B团队使用React框架作为前端技术栈。
此时，不同团队所开发的UI组件对于另一个团队是不能通用的。例如，无法在Vue工程中使用React组件，或者无法在React工程中使用Vue组件。而且，不同技术栈开发的组件之间的视觉交互也可能存在不一致的情况。
有鉴于此，发明人发现，可以将不同技术栈环境开发的不同的组件转换为原生组件，因为原生组件是基于底层浏览器的原生组件开发框架构建的，其可以运行在任意的开发框架中，同时，原生组件开发框架构建的原生组件具有框架零耦合、浏览器原生支持渲染、主流框架支持渲染以及组件样式隔离等特点。
因此，本公开的实施例提供了一种跨开发框架的组件转换方法、跨框架组件的处理系统、组件转换装置、计算机系统和计算机可读存储介质。该方法包括从基础库获取预设转换编译脚本和预设模板；从组件层获取待处理组件，其中，待处理组件是由第一开发框架构建得到；以及利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，其中，原生组件是由基于浏览器的原生组件开发框架构建得到。
图1示意性示出了根据本公开实施例的可以应用组件转换方法的示例性系统架构100。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。
如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线和/或无线通信链路等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有组件转换应用、即时通信工具、邮箱客户端和/或社交平台软件等(仅为示例)。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于平板电脑、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103对待处理组件进行转换提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行转换等处理，并将处理结果(例如根据用户请求获取或生成的原生组件、信息、或数据等)反馈给终端设备。
需要说明的是，本公开实施例所提供的组件转换方法一般可以由服务器105执行。相应地，本公开实施例所提供的组件转换装置一般可以设置于服务器105中。本公开实施例所提供的组件转换方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的组件转换装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。或者，本公开实施例所提供的组件转换方法也可以由终端设备101、102、或103执行，或者也可以由不同于终端设备101、102、或103的其他终端设备执行。相应地，本公开实施例所提供的组件转换装置也可以设置于终端设备101、102、或103中，或设置于不同于终端设备101、102、或103的其他终端设备中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
图2示意性示出了根据本公开实施例的组件转换方法的流程图。
如图2所示，跨开发框架的组件转换方法可以包括操作S210～S230。
在操作S210，从基础库获取预设转换编译脚本和预设模板。
在操作S220，从组件层获取待处理组件，其中，待处理组件是由第一开发框架构建得到。
在操作S230，利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，其中，原生组件是由基于浏览器的原生组件开发框架构建得到。
根据本公开的实施例，基础库内可以包括命令行工具，命令行工具可以提供预设转换编译脚本以及创建预设模板。其中，预设模板可以由开发人员根据实际需求进行调整，预设转换编译脚本可以具有将第一开发框架构建的待处理组件转换编译为原生组件的功能。
根据本公开的实施例，开发人员在第一开发框架构建的待处理组件可以存储在组件层中，利用从基础库获取的预设转换编译脚本和预设模板对组件层中的待处理组件进行转换，得到原生组件。其中，原生组件是基于底层浏览器的原生组件开发框架构建的，原生组件开发框架构构建的原生组件具有可以运行在任意开发框架的功能。因此，经过转换得到的原生组件不仅能够解决不同开发框架下的组件不能通用的问题，还使得开发人员在维护时，不需要根据不同开发框架对应的技术栈环境下的待开发组件进行维护，只需对原生组件开发框架下的原生组件进行维护。
根据本公开的实施例，利用预设转换编译脚本和预设模板，将第一开发框架构开发的待处理组件转换成原生组件，由于原生组件是基于浏览器的原生组件开发框架构建的，因此使得转换后的原生组件能够运行在任意框架中，且维护时只需要维护原生组件，不需要维护不同框架下的待处理组件，所以至少部分地克服了不同开发框架构建的组件不能在不同的技术栈环境下通用，且对不同框架构建的组件进行维护的成本较高的技术问题，进而达到了能够转换后的原生组件可以在不同处理框架内复用，且降低了维护成本的技术效果。
根据本公开的实施例，第一开发框架可以包括Vue开发框架或React开发框架，原生组件开发框架可以包括Web Components开发框架。需要说明的是，本公开实施例中的第一开发框架和原生组件开发框架并非限于此，本领域技术人员在了解到上述实施例中的示例性框架之后，可以扩展到相关技术中其他框架。
图3示意性示出了根据本公开实施例的组件转换方法的转换编译逻辑图。
如图3所示，待处理组件包括组件生命周期和组件参数。
其中，利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，可以包括如下操作。
利用预设转换编译脚本，将组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期；利用预设转换编译脚本，将组件参数转换为原生参数；基于预设模板，根据第一原生组件生命周期、第二原生组件生命周期和原生参数生成原生组件。
根据本公开的实施例，以两个待处理组件进行举例说明，其中，第一待处理组件是Vue开发框架构建的，第二待处理组件是React开发框架构建的。
根据本公开的实施例，第二原生组件生命周期可以包括属性变更周期，其在待处理组件中的元素的属性发生增加、移除或更改时被调用。
根据本公开的实施例，Vue开发框架或React开发框架构建的待处理组件均可以包括生命周期和组件参数。
根据本公开的实施例，利用从基础库获取的预设转换编译脚本，分别对组件生命周期和组件参数进行转换，得到与组件生命周期对应的第一原生组件生命周期和第二原生组件生命周期，以及与组件参数对应的原生参数。利用预设模板将第一原生组件生命周期、第二原生组件生命周期和原生参数生成原生组件。
如图3所示，组件转换方法还可以包括如下操作。
在确定组件参数发生变更的情况下，生成参数变更通知；利用参数变更通知更新第二原生组件生命周期，得到新的第二原生组件生命周期。
根据本公开的实施例，转换编译脚本可以实现将基于Vue开发框架或React开发框架编写的组件参数转换为Web Components开发框架需要的原生参数的参数声明方式。其中，预设转换编译脚本可以设置有观察者模式，观察者模式可以实现在参数变更的情况下，通知Web Components开发框架的组件参数已发生变更，并且生成参数变更通知。
根据本公开的实施例，例如，待处理组件中的组件参数发生变更的情况下，可以生成参数变更通知，利用参数变更通知更新第二原生组件生命周期，从而得到更新后的新的第二原生组件生命周期。
如图3所示，待处理组件还包括组件事件和组件样式。
其中，利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，还可以包括如下操作。
利用预设转换编译脚本，将组件事件转换为原生组件事件；利用预设转换编译脚本，将组件样式转换为原生组件样式；基于预设模板，根据第一原生组件生命周期、第二原生组件生命周期、原生参数、原生组件事件和原生组件样式生成原生组件。
根据本公开的实施例，Vue开发框架或React开发框架构建的待处理组件均还可以包括组件事件和组件样式。
根据本公开的实施例，Web Components开发框架下的原生组件事件可以包括dispatchEvent(new CustomEvent)事件，原生组件样式可以包括shadowRoot.appendChlid(style)样式。
根据本公开的实施例，预设转换编译脚本可以实现将基于Vue开发框架或React开发框架构建的待处理组件中的组件事件统一代理为Web Components开发框架可以使用的原生组件样式，也可以实现将Vue开发框架或React开发框架构建的待处理组件中的组件样式分离并注入到Web Components开发框架中的原生组件样式中。
根据本公开的实施例，通过上述利用预设转换编译脚本可以平滑的将待处理组件转换为Web Components开发框架下的原生组件，该原生组件可以在不同的开发框架下使用，解决了组件不能通用的问题。
如图3所示，组件生命周期包括挂载周期、销毁周期和已更新周期。
根据本公开的实施例，Vue开发框架构建的待处理组件的挂载周期、销毁周期和已更新周期可以分别是挂载(mounted)周期、销毁(destroyed)周期和已更新(updated)周期。React开发框架构建的待处理组件的挂载周期、销毁周期和已更新周期可以分别是组件已经加载(componentDidMount)周期、组件可能卸载(componentWillUnmount)周期和已更新(componentDidUpdate)周期，需要说明的是，上述括号中的内容为对应周期的回调函数。
如图3所示，利用预设转换编译脚本，将组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期，可以包括如下操作。
利用预设转换编译脚本，将挂载周期转换为原生挂载周期；利用预设转换编译脚本，将销毁周期转换为原生销毁周期；利用预设转换编译脚本，将已更新周期转换为原生已更新周期，其中，原生已更新周期用于表征第二原生组件生命周期；以及根据原生挂载周期和原生销毁周期生成第一原生组件生命周期。
根据本公开的实施例，原生挂载周期的回调函数可以包括connectedCallback函数，该函数可以在原生组件的组件元素第一次被文档连接时被调用。原生销毁周期的回调函数可以包括disconnectedCallback函数，该函数可以在原生组件的组件元素与文档断开连接时被调用。原生已更新周期的回调函数可以包括attributeChangedCallback函数，该函数可以在原生组件的组件元素的属性被增加、移除或更改时被调用。
根据本公开的实施例，将Vue开发框架构建的待处理组件中的挂载(mounted)周期或React开发框架构建的待处理组件中的已经加载(componentDidMount)周期转换为原生挂载周期；将Vue开发框架构建的待处理组件中的销毁(destroyed)周期或React开发框架构建的待处理组件中的组件可能卸载(componentWillUnmount)周期转换为原生销毁周期；将Vue开发框架构建的待处理组件中的已更新(updated)周期或React开发框架构建的待处理组件中的已更新(componentDidUpdate)周期转换为原生已更新周期。
根据本公开的实施例，组件转换方法还可以包括如下操作。
对原生组件进行打包，生成原生组件包，将原生组件包存储于资源包管理器中。
根据本公开的实施例，基础库内的命令行工具可以提供将原生组件打包为原生组件包的脚本，其中，原生组件包的格式可以包括但不限于UMD、ESM、CommonJS等格式。
根据本公开的实施例，资源包管理器可以包括静态资源包管理器，例如可以为NPM管理器、CDN管理器、Bower管理器、DPKG包管理系统、RPM红帽包管理器、Pacman包管理器等，其中，NPM管理器是Node.js的包管理工具，通过NPM管理器可以安装、共享、分发代码以及管理项目依赖关系；CDN管理器是可以将原生组件包进行存储的包管理器；Bower管理器是一个软件包管理器，其可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
图4示意性示出了根据本公开实施例的跨框架组件的处理系统的架构示意图。
如图4所示，跨框架组件的处理系统可以包括基础库、组件层和桥梁层。
基础库用于存储预设转换编译脚本和创建预设模板。根据本公开的实施例，基础库还可以用于存储命令行工具。
组件层用于存储待处理组件，其中，待处理组件是由第一开发框架构建得到，也可以是由原生组件开发框架构建。
桥梁层用于利用从基础库获取到的预设模板和预设转换编译脚本，将从组件层获取到的待处理组件转换为原生组件，并存储于桥梁层中，其中，在从组件层获取的待处理组件是由原生组件开发框架构建的情况下，桥梁层不对该待处理组件进行处理，原生组件是由基于浏览器的原生组件开发框架构建得到。
根据本公开的实施例，在桥梁层中利用从基础库获取的预设转换编译脚本和预设模板对从组件层获取的待处理组件进行转换编译，以得到可以运行在任何开发框架下的原生组件。例如，如图4所示，可以在桥梁层将从Vue开发框架或React开发框架构建的待处理组件转换为Web Components开发框架下的原生组件。
根据本公开的实施例，利用预设转换编译脚本和预设模板，将第一开发框架构开发的待处理组件转换成原生组件，由于原生组件是基于浏览器的原生组件开发框架构建的，因此使得转换后的原生组件能够运行在任意框架中，且维护时只需要维护原生组件，不需要维护不同框架下的待处理组件，所以至少部分地克服了不同开发框架构建的组件不能在不同的技术栈环境下通用，且对不同框架构建的组件进行维护的成本较高的技术问题，进而达到了能够转换后的原生组件可以在不同处理框架内复用，且降低了维护成本的技术效果。
图5示意性示出了根据本公开另一实施例的跨框架组件的处理系统的架构示意图。
如图5所示，跨框架组件的处理系统除了包括基础库、组件层和桥梁层之外，还可以包括资源层。关于基础库、组件层和桥梁层的描述可以参考图4或者其他实施例中的描述，为了描述的简洁起见，在此不再赘述。
资源层用于存储原生组件包，其中，原生组件包是桥梁层对原生组件进行打包生成的。
根据本公开的实施例，原生组件包可以存储在资源包管理器中。
如图5所示，跨框架组件的处理框架还可以包括应用层。
应用层用于在第一开发框架的环境下使用上述原生组件包。
根据本公开的实施例，跨框架组件的处理系统可以为CFC(Cross FrameworkComponents)系统。
图6示意性示出了根据本公开的实施例的跨开发框架的组件转换装置的框图。
如图6所示，跨开发框架的组件转换装置可以包括第一获取模块610、第二获取模块620和转换模块630。
第一获取模块610，用于从基础库获取预设转换编译脚本和预设模板。
第二获取模块620，用于从组件层获取待处理组件，其中，待处理组件是由第一开发框架构建得到。
转换模块630，用于利用预设转换编译脚本和预设模板，将待处理组件转换为原生组件，其中，原生组件是由基于浏览器的原生组件开发框架构建得到。
根据本公开的实施例，利用预设转换编译脚本和预设模板，将第一开发框架构开发的待处理组件转换成原生组件，由于原生组件是基于浏览器的原生组件开发框架构建的，因此使得转换后的原生组件能够运行在任意框架中，且维护时只需要维护原生组件，不需要维护不同框架下的待处理组件，所以至少部分地克服了不同开发框架构建的组件不能在不同的技术栈环境下通用，且对不同框架构建的组件进行维护的成本较高的技术问题，进而达到了能够转换后的原生组件可以在不同处理框架内复用，且降低了维护成本的技术效果。
根据本公开的实施例，待处理组件可以包括组件生命周期和组件参数。
根据本公开的实施例，转换模块630可以包括第一转换单元、第二转换单元和第一生成单元。
第一转换单元，用于利用预设转换编译脚本，将组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期。
第二转换单元，用于利用预设转换编译脚本，将组件参数转换为原生参数。
第一生成单元，用于基于预设模板，根据第一原生组件生命周期、第二原生组件生命周期和原生参数生成原生组件。
根据本公开的实施例，转换模块630还可以包括第二生成单元和第三生成单元。
第二生成单元，用于在确定组件参数发生变更的情况下，生成参数变更通知。
第三生成单元，用于利用参数变更通知更新第二原生组件生命周期，得到新的第二原生组件生命周期。
根据本公开的实施例，待处理组件还包括组件事件和组件样式。
根据本公开的实施例，转换模块630还可以包括第三转换单元、第四转换单元和第四生成单元。
第三转换单元，用于利用预设转换编译脚本，将组件事件转换为原生组件事件。
第四转换单元，用于利用预设转换编译脚本，将组件样式转换为原生组件样式。
第四生成单元，用于基于预设模板，根据第一原生组件生命周期、第二原生组件生命周期、原生参数、原生组件事件和原生组件样式生成原生组件。
根据本公开的实施例，组件生命周期包括挂载周期、销毁周期和已更新周期。
根据本公开的实施例，第一转换单元可以包括：第一转换子单元、第二转换子单元、第三转换子单元和第一生成子单元。
第一转换子单元，用于利用预设转换编译脚本，将挂载周期转换为原生挂载周期。
第二转换子单元，用于利用预设转换编译脚本，将销毁周期转换为原生销毁周期。
第三转换子单元，用于利用预设转换编译脚本，将已更新周期转换为原生已更新周期，其中，原生已更新周期用于表征第二原生组件生命周期。
第一生成子单元，用于根据原生挂载周期和原生销毁周期生成第一原生组件生命周期。
根据本公开的实施例，组件转换装置600还可以包括生成模块和存储模块。
生成模块，用于对原生组件进行打包，生成原生组件包。
存储模块，用于将原生组件包存储于资源包管理器中。
根据本公开的实施例，第一开发框架可以包括Vue开发框架或React开发框架，原生组件开发框架可以包括Web Components开发框架。
需要说明的是，本公开装置部分的实施例与本公开方法部分的实施例对应相同或类似，本公开在此不再赘述。
根据本公开的实施例的模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。
例如，第一获取模块610、第二获取模块620和转换模块630中的任意多个可以合并在一个模块/单元/子单元中实现，或者其中的任意一个模块/单元/子单元可以被拆分成多个模块/单元/子单元。或者，这些模块/单元/子单元中的一个或多个模块/单元/子单元的至少部分功能可以与其他模块/单元/子单元的至少部分功能相结合，并在一个模块/单元/子单元中实现。根据本公开的实施例，第一获取模块610、第二获取模块620和转换模块630中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，第一获取模块610、第二获取模块620和转换模块630中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。
图7示意性示出了根据本公开实施例的适于实现上文描述的方法的电子设备的框图。图7示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图7所示，根据本公开实施例的电子设备700包括处理器701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。处理器701例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器701还可以包括用于缓存用途的板载存储器。处理器701可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。
在RAM 703中，存储有电子设备700操作所需的各种程序和数据。处理器701、ROM702以及RAM 703通过总线704彼此相连。处理器701通过执行ROM 702和/或RAM 703中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 702和RAM 703以外的一个或多个存储器中。处理器701也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。
根据本公开的实施例，电子设备700还可以包括输入/输出(I/O)接口705，输入/输出(I/O)接口705也连接至总线704。系统700还可以包括连接至I/O接口705的以下部件中的一项或多项：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。
根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被处理器701执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。
本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。
根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质。例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 702和/或RAM 703和/或ROM 702和RAM 703以外的一个或多个存储器。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。
以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。
Claims (12)
1.一种跨开发框架的组件转换方法，包括：
从基础库获取预设转换编译脚本和预设模板；
从组件层获取待处理组件，其中，所述待处理组件是由第一开发框架构建得到；以及
利用所述预设转换编译脚本和所述预设模板，将所述待处理组件转换为原生组件，其中，所述原生组件是由基于浏览器的原生组件开发框架构建得到。
2.根据权利要求1所述的方法，其中，所述待处理组件包括组件生命周期和组件参数；
其中，所述利用预设转换编译脚本和所述预设模板，将所述待处理组件转换为原生组件，包括：
利用所述预设转换编译脚本，将所述组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期；
利用所述预设转换编译脚本，将所述组件参数转换为原生参数；
基于所述预设模板，根据所述第一原生组件生命周期、所述第二原生组件生命周期和所述原生参数生成所述原生组件。
3.根据权利要求2所述的方法，还包括：
在确定所述组件参数发生变更的情况下，生成参数变更通知；
利用所述参数变更通知更新所述第二原生组件生命周期，得到新的第二原生组件生命周期。
4.根据权利要求2所述的方法，其中，所述待处理组件还包括组件事件和组件样式；
其中，所述利用预设转换编译脚本和所述预设模板，将所述待处理组件转换为原生组件，还包括：
利用所述预设转换编译脚本，将所述组件事件转换为原生组件事件；
利用所述预设转换编译脚本，将所述组件样式转换为原生组件样式；
基于所述预设模板，根据所述第一原生组件生命周期、所述第二原生组件生命周期、所述原生参数、所述原生组件事件和所述原生组件样式生成所述原生组件。
5.根据权利要求2所述的方法，其中，所述组件生命周期包括挂载周期、销毁周期和已更新周期；
所述利用所述预设转换编译脚本，将所述组件生命周期转换为第一原生组件生命周期和第二原生组件生命周期，包括：
利用所述预设转换编译脚本，将所述挂载周期转换为原生挂载周期；
利用所述预设转换编译脚本，将所述销毁周期转换为原生销毁周期；
利用所述预设转换编译脚本，将所述已更新周期转换为原生已更新周期，其中，所述原生已更新周期用于表征所述第二原生组件生命周期；以及
根据所述原生挂载周期和所述原生销毁周期生成所述第一原生组件生命周期。
6.根据权利要求1所述的方法，还包括：
对所述原生组件进行打包，生成原生组件包；以及
将所述原生组件包存储于资源包管理器中。
7.根据权利要求1所述的方法，其中，所述第一开发框架包括Vue开发框架或React开发框架，所述原生组件开发框架包括Web Components开发框架。
8.一种跨框架组件的处理系统，包括：
基础库，用于存储预设转换编译脚本和创建预设模板；
组件层，用于存储待处理组件，其中，所述待处理组件是由第一开发框架构建得到；
桥梁层，用于利用从所述基础库获取到的预设模板和预设转换编译脚本，将从所述组件层获取到的所述待处理组件转换为原生组件，其中，所述原生组件是由基于浏览器的原生组件开发框架构建得到。
9.根据权利要求8所述的处理系统，还包括：
资源层，用于存储原生组件包，其中，所述原生组件包是所述桥梁层对所述原生组件进行打包生成的。
10.一种跨开发框架的组件转换装置，包括：
第一获取模块，用于从基础库获取预设转换编译脚本和预设模板；
第二获取模块，用于从组件层获取待处理组件，其中，所述待处理组件是由第一开发框架构建得到；以及
转换模块，用于利用所述预设转换编译脚本和所述预设模板，将所述待处理组件转换为原生组件，其中，所述原生组件是由基于浏览器的原生组件开发框架构建得到。
11.一种计算机系统，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序，
其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至7中任一项所述的方法。
12.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1至7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210002466.XA CN116431137A (zh) | 2022-01-04 | 2022-01-04 | 跨开发框架的组件转换方法、处理系统和组件转换装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210002466.XA CN116431137A (zh) | 2022-01-04 | 2022-01-04 | 跨开发框架的组件转换方法、处理系统和组件转换装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116431137A true CN116431137A (zh) | 2023-07-14 |
Family
ID=87093061
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210002466.XA Pending CN116431137A (zh) | 2022-01-04 | 2022-01-04 | 跨开发框架的组件转换方法、处理系统和组件转换装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116431137A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114217788A (zh) * | 2021-12-21 | 2022-03-22 | 北京达佳互联信息技术有限公司 | 跨框架组件的实现方法及装置 |
-
2022
- 2022-01-04 CN CN202210002466.XA patent/CN116431137A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114217788A (zh) * | 2021-12-21 | 2022-03-22 | 北京达佳互联信息技术有限公司 | 跨框架组件的实现方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2020119800A1 (zh) | 一种列表显示方法、装置、设备及存储介质 | |
| CN113312037A (zh) | 应用于微服务的数据处理方法、装置、设备和存储介质 | |
| CN111427579A (zh) | 插件、应用程序实现方法及系统和计算机系统及存储介质 | |
| US20230259358A1 (en) | Documentation enforcement during compilation | |
| CN110888639A (zh) | 一种业务代码编译打包方法和装置 | |
| CN115982491A (zh) | 页面更新方法及装置、电子设备和计算机可读存储介质 | |
| CN112631590A (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| CN113127361B (zh) | 应用程序的开发方法、装置、电子设备和存储介质 | |
| CN116431137A (zh) | 跨开发框架的组件转换方法、处理系统和组件转换装置 | |
| CN114443076A (zh) | 镜像构建方法、装置、设备及存储介质 | |
| CN113138768B (zh) | 应用程序包生成方法、装置、电子设备以及可读存储介质 | |
| CN115543440A (zh) | 安卓项目迁移到类安卓系统的方法、电子设备和存储介质 | |
| CN112596854A (zh) | 一种持续集成流水线运行的方法和装置 | |
| CN113778393A (zh) | 组件生成方法、装置、计算机系统和计算机可读存储介质 | |
| CN110599112B (zh) | 一种网络页面开发、维护方法和装置 | |
| CN111414154A (zh) | 前端开发的方法、装置、电子设备和存储介质 | |
| CN111191225A (zh) | 一种切换隔离对象的方法、装置、介质和电子设备 | |
| CN111142972B (zh) | 用于扩展应用程序的功能的方法、装置、系统及介质 | |
| CN115248680A (zh) | 软件构建方法、系统、设备、介质和程序产品 | |
| CN113656041A (zh) | 数据处理方法、装置、设备及存储介质 | |
| CN112068814A (zh) | 可执行文件的生成方法、装置、系统及介质 | |
| CN113760262A (zh) | 任务处理方法、装置、计算机系统和计算机可读存储介质 | |
| CN113032004A (zh) | 在开发环境中管理开发作业的方法、设备和程序产品 | |
| CN112882698A (zh) | 开发环境的生成方法及装置、计算机存储介质及电子设备 | |
| CN113342633B (zh) | 一种性能测试方法和装置 |
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 |