CN113901143B - 前端跨框架通信方法及前端框架结构 - Google Patents

Abstract

本申请涉及一种前端跨框架通信方法及前端框架结构，方法包括：在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为第一前端开发框架的内层框架，完成第一前端开发框架和第二前端开发框架的隔离。由于第一前端开发框架包括与第二前端开发框架相关联的第一关联组件，第二前端开发框架包括与第一前端开发框架相关联的第二关联组件，在第一前端开发框架中出现数据变化时，基于第一前端开发框架的数据同步方式，通过第一关联组件获取数据变化，并将数据变化发送到第二关联组件，再基于第二前端开发框架的数据同步方式，通过第二关联组件将数据变化在第二前端开发框架中进行同步。

Description

前端跨框架通信方法及前端框架结构

技术领域

本申请涉及前端框架通信技术领域，尤其涉及一种前端跨框架通信方法及前端框架结构。

背景技术

随着前端框架不断升级，前端框架的开发难度和开发效率快速提高。在研发出新的前端框架时，使用新框架需要重构代码，其过程繁琐。若继续使用旧框架执行开发工作则效率过低。现有技术中很难在保留旧框架开发功能的同时，使用新框架开发新功能，若将旧框架和新框架隔离开进行同时开发，旧框架和新框架之间也无法完成通信传输。

发明内容

为至少在一定程度上克服相关技术中新老框架难以同时进行开发且隔离后无法完成通信传输的问题，本申请提供一种前端跨框架通信方法及前端框架结构。

本申请的方案如下：

根据本申请实施例的第一方面，提供一种前端跨框架通信方法，包括：

在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为所述第一前端开发框架的内层框架；其中，所述第一前端开发框架包括与所述第二前端开发框架相关联的第一关联组件，所述第二前端开发框架包括与所述第一前端开发框架相关联的第二关联组件；

在所述第一前端开发框架中出现数据变化时，基于所述第一前端开发框架的数据同步方式，通过所述第一关联组件获取所述数据变化，并将所述数据变化发送到所述第二关联组件；

基于所述第二前端开发框架的数据同步方式，通过所述第二关联组件将所述数据变化在所述第二前端开发框架中进行同步。

优选的，在本申请一种可实现的方式中，还包括：

在所述第二前端开发框架中出现数据变化时，基于所述第二前端开发框架的数据同步方式，通过所述第二关联组件获取所述数据变化，并将所述数据变化发送到所述第一关联组件；

基于所述第一前端开发框架的数据同步方式，通过所述第一关联组件将所述数据变化在所述第一前端开发框架中进行同步。

优选的，在本申请一种可实现的方式中，所述第一前端开发框架和所述第二前端开发框架配置有不同的数据同步方式。

优选的，在本申请一种可实现的方式中，所述第一前端开发框架的数据同步方式包括：

在创建组件时，从预先设立的看板公共数据区域中获取公共变量数据；所述看板公共数据区域用于存储所述第一前端开发框架中的全部事件变化内容作为所述公共变量数据。

优选的，在本申请一种可实现的方式中，所述第二前端开发框架的数据同步方式包括：

将全部组件的变量进行绑定；

在一个组件的变量值发生变化时，将发生变化后的变量值同步到其他组件。

优选的，在本申请一种可实现的方式中，所述第一关联组件和所述第二关联组件基于消息传递函数进行通信。

根据本申请实施例的第二方面，提供一种前端框架结构，包括：

第一前端开发框架和第二前端开发框架；

所述第一前端开发框架设置为外层框架，所述第二前端开发框架以嵌入式框架的形式设置为所述第一前端开发框架的内层框架；

所述第一前端开发框架包括与所述第二前端开发框架相关联的第一关联组件，所述第二前端开发框架包括与所述第一前端开发框架相关联的第二关联组件；

所述第一关联组件用于在所述第一前端开发框架中出现数据变化时，基于所述第一前端开发框架的数据同步方式，获取所述数据变化并将所述数据变化发送到所述第二关联组件；

所述第二关联组件用于在接收到所述数据变化时，基于所述第二前端开发框架的数据同步方式，将所述数据变化在所述第二前端开发框架中进行同步。

优选的，在本申请一种可实现的方式中，所述第二关联组件还用于在所述第二前端开发框架中出现数据变化时，基于所述第二前端开发框架的数据同步方式，获取所述数据变化并将所述数据变化发送到所述第一关联组件；

所述第一关联组件还用于在接收到所述数据变化时，基于所述第一前端开发框架的数据同步方式，将所述数据变化在所述第一前端开发框架中进行同步。

本申请提供的技术方案可以包括以下有益效果：本申请中的前端跨框架通信方法，在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为第一前端开发框架的内层框架，完成第一前端开发框架和第二前端开发框架的隔离。由于第一前端开发框架包括与第二前端开发框架相关联的第一关联组件，第二前端开发框架包括与第一前端开发框架相关联的第二关联组件，在第一前端开发框架中出现数据变化时，基于第一前端开发框架的数据同步方式，通过第一关联组件获取数据变化，并将数据变化发送到第二关联组件，再基于第二前端开发框架的数据同步方式，通过第二关联组件将数据变化在第二前端开发框架中进行同步。即可在第一前端开发框架中出现数据变化时，将该数据变化同步到隔离的第二前端开发框架中，实现两个隔离的前端开发框架的信息同步。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1是本申请一个实施例提供的一种前端跨框架通信方法的流程示意图；

图2是本申请另一个实施例提供的一种前端框架结构的结构示意图；

图3是本申请又一个实施例提供的一种前端框架结构的结构示意图；

图4是本申请又一个实施例提供的一种前端框架结构的结构示意图。

附图标记：第一前端开发框架-21；第二前端开发框架-22。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

一种前端跨框架通信方法，参照图1，包括：

S11：在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为第一前端开发框架的内层框架；其中，第一前端开发框架包括与第二前端开发框架相关联的第一关联组件，第二前端开发框架包括与第一前端开发框架相关联的第二关联组件；

S12：在第一前端开发框架中出现数据变化时，基于第一前端开发框架的数据同步方式，通过第一关联组件获取数据变化，并将数据变化发送到第二关联组件；

S13：基于第二前端开发框架的数据同步方式，通过第二关联组件将数据变化在第二前端开发框架中进行同步。

本实施例中，优选的，嵌入式框架的形式可以但不限于为iframe形式。

本实施例中，第一前端开发框架和第二前端开发框架为不同的开发框架。例如，第一前端开发框架和第二前端开发框架其中一个可以为新的开发框架，另一个为旧的开发框架。

本实施例中，在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为第一前端开发框架的内层框架。其他实施例中，在确定第二前端开发框架作为外层框架时，也可以将第一前端开发框架以嵌入式框架的形式作为第而前端开发框架的内层框架，此处不做具体限定。

参照图2，本实施例中以第一前端开发框架为Angular框架，第二前端开发框架为Vue框架进行举例说明。

Angular框架中包括与Vue框架相关联的第一关联组件VueComponent，Vue框架中包括与Angular框架相关联的第二关联组件AngularPage。

VueComponent组件和AngularPage组件建立通信关系。

在Angular框架中出现数据变化时，基于Angular框架的数据同步方式，VueComponent组件获取数据变化，并将数据变化发送到AngularPage组件；基于第二前端开发框架的数据同步方式，通过AngularPage组件将数据变化在Vue框架中进行同步。即可在Angular框架中出现数据变化时，将该数据变化同步到隔离的Vue框架中，从而实现两个隔离的前端开发框架的信息同步。

一些实施例中前端跨框架通信方法，还包括：

在第二前端开发框架中出现数据变化时，基于第二前端开发框架的数据同步方式，通过第二关联组件获取数据变化，并将数据变化发送到第一关联组件；

基于第一前端开发框架的数据同步方式，通过第一关联组件将数据变化在第一前端开发框架中进行同步。

本实施例中，在第二前端开发框架中出现数据变化时，同理，可以将该数据变化同步到隔离的第一前端开发框架中，从而实现两个隔离的前端开发框架的信息同步。即隔离的两个开发框架中其中一个出现数据变化，都会将该数据变化同步到另一个开发框架中。

一些实施例中前端跨框架通信方法，第一前端开发框架和第二前端开发框架配置有不同的数据同步方式。

本实施例中，由于第一前端开发框架和第二前端开发框架为不同的开发框架，不同的开发框架优先配置适合该开发框架的数据同步方式。

参照图3，以Angular框架举例，Angular框架的数据同步方式为：

在创建组件时，从预先设立的看板公共数据区域中获取公共变量数据；看板公共数据区域用于存储第一前端开发框架中的全部事件变化内容作为公共变量数据。

即Angular框架预先设立一个看板公共数据区域，称之为Dashboard Data，通过Dashboard Data将Angular框架中的全部事件变化内容存储下来，Angular框架中所有组件被创建的时候，第一时间会先去获取这个Dashboard Data中的公共变量数据。这样做可以将Angular框架中的消息传递改为了数据同步，保证无论组件是何时创建的，都可以做到组件之间的数据同步。

以Vue框架举例，Vue框架的数据同步方式为：

将全部组件的变量进行绑定；

在一个组件的变量值发生变化时，将发生变化后的变量值同步到其他组件。

Vue框架本身提供了数据同步和共享工具Vuex，Vuex工具提供了数据修改并自动同步到所有组件的方法。Vuex工具能够将全部组件的变量做全局绑定，例如全局变量名称是loginUser，Vue框架中全部组件的loginUser变量都是一样的，所以Vue框架中的一个组件的变量值发生变化时，其他组件的变量值也会保持同步。

一些实施例中前端跨框架通信方法，第一关联组件和第二关联组件基于消息传递函数进行通信。

优选的，消息传递函数可以但不限于为PostMessage。本实施例中，通过调用Window对象的PostMessage在iframe内外传输数据。

一种前端框架结构，参照图4，包括：

第一前端开发框架21和第二前端开发框架22；

第一前端开发框架21设置为外层框架，第二前端开发框架22以嵌入式框架的形式设置为第一前端开发框架21的内层框架；

第一前端开发框架21包括与第二前端开发框架22相关联的第一关联组件，第二前端开发框架22包括与第一前端开发框架21相关联的第二关联组件；

第一关联组件用于在第一前端开发框架21中出现数据变化时，基于第一前端开发框架21的数据同步方式，获取数据变化并将数据变化发送到第二关联组件；

第二关联组件用于在接收到数据变化时，基于第二前端开发框架22的数据同步方式，将数据变化在第二前端开发框架22中进行同步。

本实施例中的前端框架结构，在确定第一前端开发框架21作为外层框架时，将第二前端开发框架22以嵌入式框架的形式作为第一前端开发框架21的内层框架，完成第一前端开发框架21和第二前端开发框架22的隔离。由于第一前端开发框架21包括与第二前端开发框架22相关联的第一关联组件，第二前端开发框架22包括与第一前端开发框架21相关联的第二关联组件，在第一前端开发框架21中出现数据变化时，基于第一前端开发框架21的数据同步方式，通过第一关联组件获取数据变化，并将数据变化发送到第二关联组件，再基于第二前端开发框架22的数据同步方式，通过第二关联组件将数据变化在第二前端开发框架22中进行同步。即可在第一前端开发框架21中出现数据变化时，将该数据变化同步到隔离的第二前端开发框架22中，实现两个隔离的前端开发框架的信息同步。

一些实施例中的前端框架结构，第二关联组件还用于在第二前端开发框架22中出现数据变化时，基于第二前端开发框架22的数据同步方式，获取数据变化并将数据变化发送到第一关联组件；

第一关联组件还用于在接收到数据变化时，基于第一前端开发框架21的数据同步方式，将数据变化在第一前端开发框架21中进行同步。

本实施例中，在第二前端开发框架22中出现数据变化时，同理，可以将该数据变化同步到隔离的第一前端开发框架21中，从而实现两个隔离的前端开发框架的信息同步。即隔离的两个开发框架中其中一个出现数据变化，都会将该数据变化同步到另一个开发框架中。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (5)

1.一种前端跨框架通信方法，其特征在于，包括：

在确定第一前端开发框架作为外层框架时，将第二前端开发框架以嵌入式框架的形式作为所述第一前端开发框架的内层框架；其中，所述第一前端开发框架包括与所述第二前端开发框架相关联的第一关联组件，所述第二前端开发框架包括与所述第一前端开发框架相关联的第二关联组件；

在所述第一前端开发框架中出现数据变化时，基于所述第一前端开发框架的数据同步方式，通过所述第一关联组件获取所述数据变化，并将所述数据变化发送到所述第二关联组件；

基于所述第二前端开发框架的数据同步方式，通过所述第二关联组件将所述数据变化在所述第二前端开发框架中进行同步；

其中，所述第一前端开发框架和所述第二前端开发框架配置有不同的数据同步方式；

所述第一前端开发框架的数据同步方式包括：

在创建组件时，从预先设立的看板公共数据区域中获取公共变量数据；所述看板公共数据区域用于存储所述第一前端开发框架中的全部事件变化内容作为所述公共变量数据；

第二前端开发框架的数据同步方式包括：

将全部组件的变量进行绑定；

在一个组件的变量值发生变化时，将发生变化后的变量值同步到其他组件。

2.根据权利要求1所述的方法，其特征在于，还包括：

在所述第二前端开发框架中出现数据变化时，基于所述第二前端开发框架的数据同步方式，通过所述第二关联组件获取所述数据变化，并将所述数据变化发送到所述第一关联组件；

基于所述第一前端开发框架的数据同步方式，通过所述第一关联组件将所述数据变化在所述第一前端开发框架中进行同步。

3.根据权利要求1所述的方法，其特征在于，所述第一关联组件和所述第二关联组件基于消息传递函数进行通信。

4.一种前端框架结构，其特征在于，包括：

第一前端开发框架和第二前端开发框架；

所述第一前端开发框架设置为外层框架，所述第二前端开发框架以嵌入式框架的形式设置为所述第一前端开发框架的内层框架；

所述第一前端开发框架包括与所述第二前端开发框架相关联的第一关联组件，所述第二前端开发框架包括与所述第一前端开发框架相关联的第二关联组件；

所述第一关联组件用于在所述第一前端开发框架中出现数据变化时，基于所述第一前端开发框架的数据同步方式，获取所述数据变化并将所述数据变化发送到所述第二关联组件；

所述第二关联组件用于在接收到所述数据变化时，基于所述第二前端开发框架的数据同步方式，将所述数据变化在所述第二前端开发框架中进行同步；

其中，所述第一前端开发框架和所述第二前端开发框架配置有不同的数据同步方式；

所述第一前端开发框架的数据同步方式包括：

在创建组件时，从预先设立的看板公共数据区域中获取公共变量数据；所述看板公共数据区域用于存储所述第一前端开发框架中的全部事件变化内容作为所述公共变量数据；

第二前端开发框架的数据同步方式包括：

将全部组件的变量进行绑定；

在一个组件的变量值发生变化时，将发生变化后的变量值同步到其他组件。

5.根据权利要求4所述的前端框架结构，其特征在于，所述第二关联组件还用于在所述第二前端开发框架中出现数据变化时，基于所述第二前端开发框架的数据同步方式，获取所述数据变化并将所述数据变化发送到所述第一关联组件；

所述第一关联组件还用于在接收到所述数据变化时，基于所述第一前端开发框架的数据同步方式，将所述数据变化在所述第一前端开发框架中进行同步。

Images