CN113407255A - 组件调用方法、装置及计算机可读存储介质 - Google Patents

Abstract

本申请公开了一种组件调用方法、装置及计算机可读存储介质。其中，方法包括判断当前所需调用的组件即被使用组件与编译项目所使用的当前技术栈框架的组件类型是否相同，若被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型不同，则利用预设的组件更改规则对被使用组件进行处理，以得到符合当前技术栈框架的组件调用条件的子组件；基于组件调用指令，在编译项目编译过程中通过调用子组件以完成对被使用组件的调用。本申请实现了多种技术栈框架的共存，可高效、准确地调用所需组件，操作简单有效，占用计算资源少，有利于提高项目研发效率。

Description

组件调用方法、装置及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种组件调用方法、装置及计算机可读存储介质。

背景技术

随着计算机技术和互联网技术的快速发展和普及应用，软件技术也得到相应的发展，尤其是前端技术。目前互联网领域，在前端开发技术中对于一个编译项目只能采用一种框架进行开发，相应的，该项目中只能采用相同类型框架的组件，举例来说，Vue和React是互联网领域中前端开发技术使用最常见的两大开发框架，若当前项目中采用Vue框架，相应的只能采用Vue框架的组件。而随着项目规模的增大，大型的前端技术项目往往会运用第三方的组件，这样在一种框架的项目中只能选择同种类框架的组件，选择性受到了限制。此外，项目中的研发人员必须是相同技术栈的研发人员，而不能随意选择不同技术栈的研发人员，这就使得项目的兼容性和升级空间受到了限制。

现有的一些技术方案可以变相实现不同技术栈框架的资源互相引用，但其使用方式极度繁琐，也不能像正常引入同种类技术栈框架的组件那样使用通用性的方式引入，并且不能使用任意的第三方组件。不仅会占用大量计算资源，而且通用性差，操作繁琐，整个项目研发效率不高。

鉴于此，如何在不占用大量计算资源且操作简单的基础上，实现多种技术栈共存，高效、准确地调用所需组件，是所属领域技术人员需要解决的技术问题。

发明内容

本申请提供了一种组件调用方法、装置及计算机可读存储介质，实现多种技术栈共存，可高效、准确地调用所需组件，操作简单有效，占用计算资源少，有利于提高项目研发效率。

为解决上述技术问题，本发明实施例提供以下技术方案：

本发明实施例一方面提供了一种组件调用方法，包括：

判断被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型是否相同；

若所述被使用组件的组件类型与所述编译项目所使用的当前技术栈框架的组件类型不同，利用预设的组件更改规则对所述被使用组件进行处理，以得到符合所述当前技术栈框架的组件调用条件的子组件；

基于组件调用指令，在所述编译项目编译过程中通过调用所述子组件以完成对所述被使用组件的调用。

可选的，所述利用预设的组件更改规则对所述被使用组件进行处理，包括：

预先基于被使用组件的数据和使用方组件的数据构建包装转换组件；所述包装转换组件通过为所述被使用组件设置所述使用方组件的特性，以输出与所述使用方组件相匹配的同种类子组件；所述使用方组件为所述当前技术栈框架的组件；

根据所述被使用组件的组件类型和所述当前技术栈框架的组件类型，为所述被使用组件匹配相应的目标包装转换组件；

利用所述目标包装转换组件对所述被使用组件进行处理。

可选的，所述利用所述目标包装转换组件对所述被使用组件进行处理，包括：

根据所述使用方组件的数据创建与所述使用方组件相同类型的组件，以作为所述使用方组件的伪装层；所述伪装层根据接收到的所述被使用组件的数据创建与所述被使用组件相同类型的组件，以作为所述被使用组件的通信层；

所述伪装层通过调用所述通信层的接口实现将所述使用方组件所传入的数据信息以及传入的所述被使用组件的数据设置到所述通信层上，以实现不同技术栈框架的组件的生命周期的融合。

可选的，所述伪装层根据接收到的所述被使用组件的数据创建与所述被使用组件相同类型的组件，包括：

所述伪装层接收所述使用方组件向所述被使用组件传递的数据，所述数据包括所述使用方组件的属性、事件和插槽；

所述伪装层基于所述被使用组件的组件类型对所述数据进行转换，并将转换后的数据作为初始化数据进行所述通信层的构建。

可选的，所述利用所述目标包装转换组件对所述被使用组件进行处理，包括：

所述目标包装转换组件为基于被使用组件的数据和使用方组件的数据所构建的高阶函数；

调用所述高阶函数对所述被使用组件进行处理时，将所述被使用组件作为所述高阶函数的参数传入。

可选的，所述利用预设的组件更改规则对所述被使用组件进行处理，包括：

预先基于所述预设的组件更改规则生成组件调整插件，并将所述组件调整插件安装在所述编译项目中；

调用所述组件调整插件对所述被使用组件进行处理。

可选的，所述判断被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型是否相同之前，还包括：

若当前编译项目不存在多个不同技术栈框架文件，则预先在编译项目中配置多个不同技术栈框架的文件；

将不同技术栈框架的文件存储至所述编译项目的不同目录中；

通过重写属性配置不同文件元素的解析规则，以采用相匹配的解析规则对相应的文件进行解析。

本发明实施例另一方面提供了一种组件调用装置，包括：

组件调整模块，用于若被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型不同，利用预设的组件更改规则对所述被使用组件进行处理，以得到符合所述当前技术栈框架的组件调用条件的子组件；

组件调用模块，用于基于组件调用指令，在所述编译项目编译过程中通过调用所述子组件以完成对所述被使用组件的调用。

本发明实施例还提供了一种组件调用装置，包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如前任一项所述组件调用方法的步骤。

本发明实施例最后还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有组件调用程序，所述组件调用程序被处理器执行时实现如前任一项所述组件调用方法的步骤。

本申请提供的技术方案的优点在于，对于调用与当前编译项目所使用的技术栈不同类型的组件时，通过组件更改规则将被使用组件转换为适配当前技术栈框架的组件，这样在调用该被使用组件时，系统会认为所调用的子组件与当前技术栈框架的组件类型为同一类型，这样编译项目就可以同时使用不同技术栈框架，也可以任意引用第三方组件，实现多种技术栈共存，从而解决现有技术中技术栈无法共存的问题；可以像使用同种技术栈组件一样的方式去使用不同种类的组件，从而解决通用性使用方式的问题，整个过程只需要利用组件更改规则对所述被使用组件进行处理便可得到允许被调用且不会出错的组件，操作简单，不仅可高效、准确地调用所需组件，而且占用计算资源少，组件调用效率高，有利于提高项目研发效率。

此外，本发明实施例还针对组件调用方法提供了相应的实现装置及计算机可读存储介质，进一步使得所述方法更具有实用性，所述装置及计算机可读存储介质具有相应的优点。

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

附图说明

为了更清楚的说明本发明实施例或相关技术的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种组件调用方法的流程示意图；

图2为本发明实施例提供的一个示例性应用场景的组件调用方法流程示意图；

图3为本发明实施例提供的图2所示的应用场景中的高阶函数处理数据流程示意图；

图4为本发明实施例提供的图2所示的应用场景中一种类型组件的组件转换流程示意图；

图5为本发明实施例提供的图2所示的应用场景中另一种类型组件的组件转换流程示意图；

图6为本发明实施例提供的组件调用装置的一种具体实施方式结构图；

图7为本发明实施例提供的组件调用装置的另一种具体实施方式结构图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等是用于区别不同的对象，而不是用于描述特定的顺序。此外术语“包括”和“具有”以及他们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可包括没有列出的步骤或单元。

在介绍了本发明实施例的技术方案后，下面详细的说明本申请的各种非限制性实施方式。

首先参见图1，图1为本发明实施例提供的一种组件调用方法的流程示意图，本发明实施例可包括以下内容：

本申请对于组件调用方法所适用于的应用场景至少包括下述两种，一种是在当前编译项目编译过程中直接使用不同技术栈的第三方组件，一种是编译项目本身就是多种技术栈共存的项目，在项目编译过程中，会涉及到不同技术栈的组件之间的互相调用。对于第一种应用场景，第三方组件如通过NPM安装的组件是已经编译好的，不会体现在编译项目中，且处于编译过程中的当前编译项目，其技术栈框架等文件也都是已经配置好的，对于该种场景，可以直接通过执行下述S101和S102实现对第三方组件进行调用处理。而对于第二种应用场景，就需要亲自编译不同技术栈的文件。具体的，在执行S101和S102之前，需要先在编译项目中配置多个不同技术栈框架的文件，并按照预设文件存储解析规则对各文件进行存储和解析。

其中，编译项目是指利用多个不同技术栈框架的软件项目，文件是指在使用某个技术栈框架的项目中被使用的文件，通常一个文件中包含多个组件，组件为项目中的最小单位。举例来说，Vue项目为使用Vue为技术栈框架的前端项目，项目最终的输出一般是一个网站。Vue文件即为在Vue项目中被使用的文件，一般是以.Vue为后缀名。Vue组件：一种抽象的单位，是Vue项目中的最小单位，一个Vue文件中可以包含多个Vue组件。React项目为使用React为技术栈框架的前端项目，项目最终的输出一般是一个网站。React文件为在React项目中被使用的文件，一般是以.jsx为后缀名。React组件是React项目中的最小单位，一个React文件中可以包含多个React组件。

可以理解的是，使用不同技术栈框架的项目尽管可使用相同的构建工具进行构建编译，但是不同技术栈框架构建配置不同，由于本步骤的编译项目同时使用多种不同技术栈框架，故在一个项目中同时解决多种技术栈的文件构建编译工作。本步骤在同一个编译项目中同时配置多个技术栈框架项目需要的构建配置，需要通过一定的文件放置规则和文件解析规则来区分不同技术栈框架的文件，也即本步骤中的预设文件存储解析规则，并且将此规则作为配置依据，根据配置依据的规则，在命中某个技术栈框架的文件时进行该技术栈框架相关的构建工作，如在命中React文件进行React相关的构建工作。作为一种可选的实施方式，可将不同技术栈框架的文件存储至编译项目的不同目录中；通过重写属性配置不同文件元素的解析规则，以采用相匹配的解析规则对相应的文件进行解析。

S101：判断被使用组件的组件类型与编译项目所使用的技术栈框架的组件类型是否相同；若否，则执行S102，若是，则直接调用被使用组件以响应组件调用指令。

由于本申请的同一个编译项目中使用多个不同技术栈框架，每个技术栈框架对应有多个组件，不可避免的，对于使用某个技术栈框架进行项目编译过程中，不仅会调用自身的组件，还会调用其他技术栈框架下的组件，由于不同技术栈框架的组件在不经过任何处理的情况下，要么不可调用，即使可强制调用，也会在调用过程中发生错误，如在Vue项目中可以正常使用Vue组件，无法使用React组件，若强行使用React组件，则会引发错误。所以在进行组件调用之前，需要对被调用组件的组件类型是否当前编译项目中使用的技术栈框架的组件类型一致进行判断。

S102：利用预设的组件更改规则对被使用组件进行处理，以得到符合当前技术栈框架的组件调用条件的子组件。

本步骤中，组件更改规则用于对被使用组件进行诸如转换、调整等处理，经按照组件更改规则进行处理后的被使用组件便符合当前技术栈框架对组件调用的条件了，为了区别经组件更改规则处理前后的组件，使用子组件来表示经组件更改规则处理后的被使用组件。组件更改规则可为以包装形式对被使用组件进行处理的规则，也可为修改源码的方式对被使用组件进行处理的规则。其中，包装的目的为了让系统认为是被使用组件与当前技术栈框架的组件类型相一致，通过包装之后输出的组件就是与当前文件相匹配的同种类组件，具备了当前类型组件的一切特性。包装的形式可通过高阶方法如高阶元件(High OrderComponents)或高阶函数(High Order Function)来实现，高阶函数可为代码库或代码如JS代码中的函数类型。由于通过包装方式是在浏览器运行时处理的，通过构建过程中修改源码的方式并非是在浏览器运行时处理，这种方式是破坏性的，并且也存在很多兼容性的问题。作为一种可选的实施方式，可采用通过包装方式对数据模型、事件、属性进行解析和处理。

S103：基于组件调用指令，在编译项目编译过程中通过调用子组件以完成对被使用组件的调用。

当当前编译项目需要调用组件时，可下发组件调用指令，系统在检测到存在组件调用指令时，响应组件调用指令，可从组件调用指令中读取被调用的组件也即被使用组件信息，然后确定经过S102处理后所得的子组件，将该子组件返回，以响应组件调用指令，系统会调用该子组件执行相应操作。

在本发明实施例提供的技术方案中，对于调用与当前编译项目所使用的技术栈不同类型的组件时，通过组件更改规则将被使用组件转换为适配当前技术栈框架的组件，这样在调用该被使用组件时，系统会认为所调用的子组件与当前技术栈框架的组件类型为同一类型，这样编译项目就可以同时使用不同技术栈框架，也可以任意引用第三方组件，实现多种技术栈共存，从而解决现有技术中技术栈无法共存的问题；可以像使用同种技术栈组件一样的方式去使用不同种类的组件，从而解决通用性使用方式的问题，整个过程只需要利用组件更改规则对所述被使用组件进行处理便可得到允许被调用且不会出错的组件，操作简单，不仅可高效、准确地调用所需组件，而且占用计算资源少，组件调用效率高，有利于提高项目研发效率。

在上述实施例中，对于如何执行步骤S102并不做限定，本实施例中给出利用预设的组件更改规则对被使用组件进行处理的一种实施方式，可包括如下步骤：

预先基于被使用组件的数据和使用方组件的数据构建包装转换组件。根据被使用组件的组件类型和当前技术栈框架的组件类型，为被使用组件匹配相应的目标包装转换组件；利用目标包装转换组件对被使用组件进行处理。

在本实施例中，被使用组件即为要调用的组件，使用方组件即为当前所使用的技术栈框架的组件，包装转换组件通过为被使用组件设置使用方组件的特性，从而输出与使用方组件相匹配的同种类子组件，目标包装转换组件是为了与包装转换组件进行区别，特指与被使用组件匹配的包装转换组件。被使用组件的数据和使用方组件的数据包括但并不限制为属性、事件、插槽、子元素。属性是作为使用方组件传递给被使用组件的数据的最常用的方式，比如传递A＝1，那么被使用组件就可以通过属性获取到A＝1。事件是作为使用方组件想传递一个函数类型给被使用组件的最常用方式，插槽就是html片段，子元素也是泛指一种插槽。

作为本实施例的一种可选的实施方式，包装转换组件对被使用组件的处理过程可包括：

根据使用方组件的数据创建与使用方组件相同类型的组件，以作为使用方组件的伪装层；伪装层根据接收到的被使用组件的数据创建与被使用组件相同类型的组件，以作为被使用组件的通信层。也就是说，在被使用组件自身的基础上先设置伪装层，在由伪装层构建通信层，也即由内而外或者是由底层到高层的顺序为：伪装层-通信层-被使用组件本身。伪装层是用于告诉使用方文件，被使用组件是和使用方文件是同一种类型技术栈框架的组件，而通信层是用于告诉被使用的组件，自己是被同一种类型的技术栈框架的文件所使用，通信层负责传递与被使用组件相同技术栈框架规范的数据类型。举例来说，Vue组件能接收的数据包括属性、事件、html片段(又称为插槽)，属性可以是任何一种JS类型，事件只能是函数类型，html片段就是标准的html类型，其放置在组件的开始标签和结束标签之间。React组件能接收的数据包括属性和JSX片段，属性可以是任何一种JS类型以及JSX，JSX片段就是单纯的JSX类型，其放置在组件的开始标签和结束标签之间。以Vue组件(即被使用组件)输出为React组件(即使用方组件)为例，在Vue组件外层多包装一个React组件作为伪装层以及一个Vue组件充当通信层。包装之后的被使用组件＝(伪装层React组件)->(通信层Vue组件)->(原始Vue组件)，这样在React项目使用Vue组件时，React文件会认为在使用的是React组件。

其中，组件创建也即实例化组件，组件是个抽象概念，要创建一个Vue或者React组件，就是对一个JS类的实例化操作。比如创建一个Vue组件，就是new Vue(初始化参数)，初始化参数中必须要描述el属性，用来表示将Vue组件创建在哪个DOM节点中，初始化参数中还包含：组件的初始化的数据、事件、插槽。比如创建一个React组件，就是先定义一个Class，在Class中设置初始化参数，然后通过ReactDom.render方法将这个Class实例化并且创建到一个DOM节点中。在本实施例中信息传递是单向的，使用方组件将信息传递给被使用组件，被使用组件收到信息之后根据自己的逻辑进行展示。具体来说，使用方组件将数据传递给被使用组件，被使用组件根据数据进行展示，如果使用方组件传递了事件或者函数类型的数据给被使用组件，若被使用组件执行了相应的事件或者函数并且传递相关的参数，则这个事件在使用方组件中所对应的方法或者函数中的逻辑将被执行并且能接收到被使用组件调用方法或者函数时传入的参数。举例来说，使用方组件是React组件，其传递了一个A属性给伪装层，伪装层在创建通信层时，需要将这个A属性引用给通信层的初始化参数中的data属性中，也就是data.A。若使用方组件是Vue组件，Vue组件传递了一个A属性给伪装层，伪装层在创建通信层时，需要将这个A属性引用给通信层的初始化参数中的state对象中，也就是state.A。

可以理解的是，组件有生命周期的概念，比如组件创建、组件挂载、组件更新、组件销毁等，但是不同技术栈框架的生命周期的属性名称和含义并非完全相同。为了实现将另一种技术栈框架的组件的生命周期与现有技术栈框架的生命周期进行一一对应的融合，本实施例可监听伪装层的生命周期，并且触发相对应的通信层的生命周期。具体来说，伪装层通过调用通信层的接口如API(应用程序接口)实现将使用方组件所传入的数据信息以及传入的被使用组件的数据设置到通信层上，以实现不同技术栈框架的组件的生命周期的融合。

由于本实施例所涉及到伪装层和通信层分别是不同技术栈框架下的组件，而不同类型组件对数据如属性、事件、插槽等处理方式不同，所以伪装层和通信层就需要处理和抹平这些差异点，使得当前技术栈框架组件需要传输的属性、事件、插槽等数据传入至另外一技术栈框架的组件中。本实施例可通过当前技术栈框架组件需要传输的属性、事件、插槽等数据进行转化处理传递到另一种技术栈框架组件中，所谓的数据转化就是伪装层将收到的数据作为通信层的初始化数据进行创建，由于两种类型的组件的创建方式不同，所以称为数据转化。具体可包括：使用方组件的文件会传递相应的属性、事件、插槽等信息给被使用组件，由于伪装层的技术栈框架和使用组件的文件是一致的，所以在接收信息和生命周期的触发上都不需要做什么特殊处理，可以很顺利的接收到这些信息，也就是说，使用方组件向被使用组件传递的数据如使用方组件的属性、事件和插槽是最先由伪装层接收，由于伪装层会负责创建通信层，而通信层是和伪装层不同的技术栈框架，所以需要在创建通信层的时候进行相关信息的转化处理，伪装层基于被使用组件的组件类型对数据进行转换，并将转换后的数据作为初始化数据进行通信层的构建，同时作为通信层使用子组件的属性、事件、插槽。

作为本实施例的另外一种可选的实施方式，本实施例的目标包装转换组件可为基于被使用组件的数据和使用方组件的数据所构建的高阶函数；在对被使用组件进行处理时，可通过调用高阶函数来执行，同时将被使用组件作为高阶函数的参数传入。相应的，整个高阶函数包含伪装层和通信层两个功能，使用方组件将数据传递给了伪装层组件，伪装层组件会将收到的数据和被使用组件一起作为初始化信息创建通信层组件，通信层组件会将初始化的数据作为自己的数据，而且又将被使用组件作为自己的被使用组件，而又将自己的数据作为传递给被使用组件的信息。也就是使用方组件以为伪装层是自己的被使用组件，而被使用组件认为通信层是自己的使用方组件，一切的融合操作就是伪装层和通信层在做一系列的融合，因此使用方组件不需要做任何改动，被使用组件也不需要做任何的改动。

由上可知，本实施例通过高阶函数对被使用组件的处理，实现了不同技术栈框架的共存。

为了便于用户使用，提升整个技术方案的实用性、普适性、通用性和便利性，占用更少的计算资源，实现更高的研发效率，基于上述实施例，本申请还可包括：

预先基于预设的组件更改规则生成组件调整插件，并将组件调整插件安装在编译项目中；调用组件调整插件对被使用组件进行处理。

也就是说，任何一个编译项目只要安装了组件调整插件，就可通过组件调整插件包含的组件更改规则对被使用组件进行转化处理，最终得到符合当前技术栈框架的组件调用规则的组件，从而可被当前技术栈框架准确无误地调用。

举例来说，组件调整插件的组件更改规则是基于高阶函数的，而NPM作为安装和存放高阶函数的一个平台和途径，可将组件调整插件放置在NPM这个平台上，就变成了NPM的插件，也即组件调整插件可以NPM包的形式存在。通过将NPM包发布在公网上，这样便可作为公共插件通过NPM为任何一个需要实现不同技术栈共存的项目来安装此插件，在安装该插件后，便可实现任意类型组件的调用。举例来说，对于Vue项目调用React组件，只要通过NPM包为任何一个Vue项目安装此插件，该Vue项目就可以使用插件中包含的高阶函数调用React组件。

当然，作为另外一种可选的实施方式，还可将上述任何一种实现组件调用方法所依赖的计算机程序打包为一个源代码程序包，可直接通过文件复制的方式直接把该源代码复制到所需项目中使用，从而实现不同技术栈框架下任何类型组件的调用。

为了使所属领域技术人员更加清楚明白本申请的技术方案，本申请结合图2-图5，以被使用组件和使用方组件为Vue组件和React组件为例，阐述了本申请所公开的组件调用方法，可包括下述内容：

首先对在同一个项目中同时配置Vue项目和React的项目需要的构建配置，配置过程可包括：

无论是Vue还是React的项目，一般都会基于一种模块化构建工具如webpack，所谓的配置，就是对webpack进行配置，一般是配置项目中的webpack.config.js文件。一个项目要支持Vue，至少需要配置Vue-loader、babel-loader。一个项目要支持React，至少需要配置babel-loader。在项目中配置了babel-loader之后，需要再配置一个balel.config.js，对babel的处理进行描述。loader是webpack的构建方案，指名对特定类型的文件进行如何处理和构建，vue-loader就是对Vue文件进行处理，其会Vue文件拆分成html、js、css文件。babel-loader就是对js文件进行进一步处理，主要就是处理一些最新特性的js语法，比如JSX。JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。同样地，Vue也支持JSX，Vue中的JSX是用来声明Vue当中的元素.JSX需要通过babel-loader进行处理才能转换成浏览器可以识别和运行的JS语法，因此需要再babel.config.js中进行相应的配置来描述如何处理JSX。处理Vue的JSX需要在babel.config.js中配置transform-vue-jsx。处理React的JSX需要在babel.config.js中配置transform-react-jsx。一个项目即便都配置了vue-loader和babel-loader，也不能直接支持Vue和React，因为Vue和React都支持JSX，但是两者需要使用不同的babel配置对JSX进行处理，因此需要制定一种文件存放规则来区分如何使用正确的方式去处理JSX。本实施例将Vue文件和React文件分别存放在项目中不同的目录中，并且进一步配置babel.config.js文件，通过overrides属性来分开配置JSX的解析规则，在React目录里使用React的规则解析(即transform-react-jsx)，其他使用Vue的规则(即transform-vue-jsx)。比如将React文件放置在react_app目录中，将Vue文件放置在vue_app目录中，通过overrides(重写)属性配置一个数组，数组中每个对象元素都代表了一种规则配置，这个数组应该至少是两个对象元素，其中一个对象元素的test属性通过正则表达式识别是React_app目录下的文件，另一个识别是Vue_app目录下的文件，相应的使用对应的React或者Vue的处理JSX的规则即可。

其次，创建两个高阶函数，一种是将Vue组件使用在React文件中的高阶函数，另一种是将React组件使用在Vue文件中的高阶函数，具体的实现逻辑请参阅图4和图5，通过高阶函数包装Vue或者React的组件，将其转换成另一种类型技术栈框架的组件，将Vue组件输出为React组件，以及将React组件输出为Vue组件，从而实现在Vue的组件中可以正常调用React组件，在React的组件中可以正常调用Vue组件。

最后，基于高阶函数的组件处理过程为：

由于使用方组件和被使用组件不是同一种类型的组件，所以使用方组件不能直接使用被使用组件。所以使用方组件在使用被使用组件时，需要高阶函数进行包装。所谓使用高阶函数进行包装，也就是执行高阶函数，并且将被使用组件作为函数的参数传入。高阶函数在执行时，内部会先创建一个和使用方组件相同类型的组件(也即伪装层)，这个组件会接收使用方组件传入的所有信息以及被使用组件，而被使用组件从JS的角度上讲就是一种对象类型。

由于伪装层也是一个标准的组件，无论是Vue还是React组件都有生命周期的概念，生命周期就是表示组件的创建、组件数据的更新、组件的销毁的相关事件。所有组件都是会以一个DOM节点(html元素)的形式输出到浏览器上的，伪装层组件会在自己DOM节点上创建一个另一种类型的组件(即通信层组件)，创建完成之后，伪装层组件会通过调用通信层组件的相关API(Application Programming Interface，应用程序编程接口)从而实现将使用方组件所传入的信息以及传入的被使用组件设置到通信层组件上。

假如使用方组件是React，被使用组件是Vue，那么伪装层组件也会是React，通信层组件会是Vue，伪装层会直接把接收到的信息以及被使用组件在创建通信层时，直接初始化给通信层。这样通信层在创建时收到了使用方组件的信息以及将传入的被使用组件作为自己的被使用组件，并且会将自己的初始化数据作为传递给被使用组件的信息进行展示。当使用方组件的数据进行变更时，伪装层组件的生命周期中的组件数据更新事件会接收到数据变更，那么此时在这个生命周期中，就会通过触发通信层更新数据的API进行数据更新，由于通信层的数据进行了更新，并且通信层是将数据作为信息继续传递给被使用组件的，所以被使用组件收到的信息也进行了变更。

由上可知，本实施例可以使用Vue和React两种不同的前端技术栈框架开发同一个项目同一个页面甚至同一个组件，项目的人员选择性和机动性变得更强，Vue和React的技术栈都可以加入项目。项目的第三方插件选择性更强，任何一个第三方的Vue和React的插件都可以被项目使用。研发人员的技术交流性更强，研发人员不会被技术栈所限制。项目可以集成更多的业务代码，其他Vue和React项目的优秀代码可以快速引入。前端研发人员可以更好的学习Vue和React，了解两者的精华，促进团队在前端技术栈的广度。整个实施方式极其简便，只需要对不同技术栈组件进行一个高阶函数的包装即可，占用更少的计算资源，有利于提升整个研发效率。

需要说明的是，本申请中各步骤之间没有严格的先后执行顺序，只要符合逻辑上的顺序，则这些步骤可以同时执行，也可按照某种预设顺序执行，图1-图5只是一种示意方式，并不代表只能是这样的执行顺序。

本发明实施例还针对组件调用方法提供了相应的装置，进一步使得方法更具有实用性。其中，装置可从功能模块的角度和硬件的角度分别说明。下面对本发明实施例提供的组件调用装置进行介绍，下文描述的组件调用装置与上文描述的组件调用方法可相互对应参照。

基于功能模块的角度，参见图6，图6为本发明实施例提供的组件调用装置在一种具体实施方式下的结构图，该装置可包括：

组件调整模块601，用于若被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型不同，利用预设的组件更改规则对被使用组件进行处理，以得到符合当前技术栈框架的组件调用条件的子组件。

组件调用模块602，用于基于组件调用指令，在编译项目编译过程中通过调用子组件以完成对被使用组件的调用。

可选的，在本实施例的一些实施方式中，上述组件调整模块601可包括：

包装转换组件构建单元，用于预先基于被使用组件的数据和使用方组件的数据构建包装转换组件；包装转换组件通过为被使用组件设置使用方组件的特性，以输出与使用方组件相匹配的同种类子组件；使用方组件为当前技术栈框架的组件；

组件匹配单元，用于根据被使用组件的组件类型和当前技术栈框架的组件类型，为被使用组件匹配相应的目标包装转换组件；

组件处理单元，用于利用目标包装转换组件对被使用组件进行处理。

作为本实施例的一种可选的实施方式，上述组件处理单元可进一步用于：根据使用方组件的数据创建与使用方组件相同类型的组件，以作为使用方组件的伪装层；伪装层根据接收到的被使用组件的数据创建与被使用组件相同类型的组件，以作为被使用组件的通信层；伪装层通过调用通信层的接口实现将使用方组件所传入的数据信息以及传入的被使用组件的数据设置到通信层上，以实现不同技术栈框架的组件的生命周期的融合。

作为本实施例的另一种可选的实施方式，上述组件处理单元还可用于：伪装层接收使用方组件向被使用组件传递的数据，数据包括使用方组件的属性、事件和插槽；伪装层基于被使用组件的组件类型对数据进行转换，并将转换后的数据作为初始化数据进行通信层的构建。

作为本实施例的其他一些可选的实施方式，上述组件处理单元还可用于：目标包装转换组件为基于被使用组件的数据和使用方组件的数据所构建的高阶函数；调用高阶函数对被使用组件进行处理时，将被使用组件作为高阶函数的参数传入。

可选的，在本实施例的另一种实施方式中，上述组件调整模块601可包括插件安装单元，该单元用于预先基于预设的组件更改规则生成组件调整插件，并将组件调整插件安装在编译项目中；调用组件调整插件对被使用组件进行处理。

可选的，在本实施例的其他一些实施方式中，上述装置例如还可包括构建编译模块，用于若当前编译项目不存在多个不同技术栈框架文件，则预先在编译项目中配置多个不同技术栈框架的文件，并按照预设文件存储解析规则对各文件进行存储和解析。作为一种可选的实施方式，上述构建编译模块可进一步用于：将不同技术栈框架的文件存储至编译项目的不同目录中；通过重写属性配置不同文件元素的解析规则，以采用相匹配的解析规则对相应的文件进行解析。

本发明实施例组件调用装置的各功能模块的功能可根据上述方法实施例中的方法具体实现，其具体实现过程可以参照上述方法实施例的相关描述，此处不再赘述。

由上可知，本发明实施例可高效、准确地调用所需组件，操作简单有效，占用计算资源少，有利于提高项目研发效率。

上文中提到的组件调用装置是从功能模块的角度描述，进一步的，本申请还提供一种组件调用装置，是从硬件角度描述。图7为本申请实施例提供的另一种组件调用装置的结构图。如图7所示，该装置包括存储器70，用于存储计算机程序；处理器71，用于执行计算机程序时实现如上述任一实施例提到的组件调用方法的步骤。

其中，处理器71可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器71可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器71也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器71可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器71还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器70可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器70还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器70至少用于存储以下计算机程序701，其中，该计算机程序被处理器71加载并执行之后，能够实现前述任一实施例公开的组件调用方法的相关步骤。另外，存储器70所存储的资源还可以包括操作系统702和数据703等，存储方式可以是短暂存储或者永久存储。其中，操作系统702可以包括Windows、Unix、Linux等。数据703可以包括但不限于组件调用结果对应的数据等。

在一些实施例中，组件调用装置还可包括有显示屏77、输入输出接口73、通信接口74或者称为网络接口、电源75以及通信总线76。其中，显示屏72、输入输出接口73比如键盘(Keyboard)属于用户接口，可选的用户接口还可以包括标准的有线接口、无线接口等。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。显示器也可以适当的称为显示屏或显示单元，用于显示在组件调用装置中处理的信息以及用于显示可视化的用户界面。通信接口74可选的可以包括有线接口和/或无线接口，如WI-FI接口、蓝牙接口等，通常用于在该组件调用装置与其他电子设备之间建立通信连接。通信总线76可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

本领域技术人员可以理解，图7中示出的结构并不构成对组件调用装置的限定，可以包括比图示更多或更少的组件，例如还可包括实现各类功能的传感器77。

本发明实施例组件调用装置的各功能模块的功能可根据上述方法实施例中的方法具体实现，其具体实现过程可以参照上述方法实施例的相关描述，此处不再赘述。

由上可知，本发明实施例可高效、准确地调用所需组件，操作简单有效，占用计算资源少，有利于提高项目研发效率。

可以理解的是，如果上述实施例中的组件调用方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、磁碟或者光盘等各种可以存储程序代码的介质。

基于此，本发明实施例还提供了一种计算机可读存储介质，存储有组件调用程序，所述组件调用程序被处理器执行时如上任意一实施例所述组件调用方法的步骤。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

以上对本申请所提供的一种组件调用方法、装置及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

Claims (10)

1.一种组件调用方法，其特征在于，包括：

判断被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型是否相同；

若所述被使用组件的组件类型与所述编译项目所使用的当前技术栈框架的组件类型不同，利用预设的组件更改规则对所述被使用组件进行处理，以得到符合所述当前技术栈框架的组件调用条件的子组件；

基于组件调用指令，在所述编译项目编译过程中通过调用所述子组件以完成对所述被使用组件的调用。

2.根据权利要求1所述的组件调用方法，其特征在于，所述利用预设的组件更改规则对所述被使用组件进行处理，包括：

预先基于所述被使用组件的数据和使用方组件的数据构建包装转换组件；所述包装转换组件通过为所述被使用组件设置所述使用方组件的特性，以输出与所述使用方组件相匹配的同种类子组件；所述使用方组件为所述当前技术栈框架的组件；

根据所述被使用组件的组件类型和所述当前技术栈框架的组件类型，为所述被使用组件匹配相应的目标包装转换组件；

利用所述目标包装转换组件对所述被使用组件进行处理。

3.根据权利要求2所述的组件调用方法，其特征在于，所述利用所述目标包装转换组件对所述被使用组件进行处理，包括：

根据所述使用方组件的数据创建与所述使用方组件相同类型的组件，以作为所述使用方组件的伪装层；所述伪装层根据接收到的所述被使用组件的数据创建与所述被使用组件相同类型的组件，以作为所述被使用组件的通信层；

所述伪装层通过调用所述通信层的接口实现将所述使用方组件所传入的数据信息以及传入的所述被使用组件的数据设置到所述通信层上，以实现不同技术栈框架的组件的生命周期的融合。

4.根据权利要求3所述的组件调用方法，其特征在于，所述伪装层根据接收到的所述被使用组件的数据创建与所述被使用组件相同类型的组件，包括：

所述伪装层接收所述使用方组件向所述被使用组件传递的数据，所述数据包括所述使用方组件的属性、事件和插槽；

所述伪装层基于所述被使用组件的组件类型对所述数据进行转换，并将转换后的数据作为初始化数据进行所述通信层的构建。

5.根据权利要求4所述的组件调用方法，其特征在于，所述利用所述目标包装转换组件对所述被使用组件进行处理，包括：

所述目标包装转换组件为基于被使用组件的数据和使用方组件的数据所构建的高阶函数；

调用所述高阶函数对所述被使用组件进行处理时，同时将所述被使用组件作为所述高阶函数的参数传入。

6.根据权利要求1至5任意一项所述的组件调用方法，其特征在于，所述利用预设的组件更改规则对所述被使用组件进行处理，包括：

预先基于所述预设的组件更改规则生成组件调整插件，并将所述组件调整插件安装在所述编译项目中；

调用所述组件调整插件对所述被使用组件进行处理。

7.根据权利要求5所述的组件调用方法，其特征在于，所述判断被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型是否相同之前，还包括：

若当前编译项目不存在多个不同技术栈框架文件，则预先在编译项目中配置多个不同技术栈框架的文件；

将不同技术栈框架的文件存储至所述编译项目的不同目录中；

通过重写属性配置不同文件元素的解析规则，以采用相匹配的解析规则对相应的文件进行解析。

8.一种组件调用装置，其特征在于，包括：

组件调整模块，用于若被使用组件的组件类型与编译项目所使用的当前技术栈框架的组件类型不同，利用预设的组件更改规则对所述被使用组件进行处理，以得到符合所述当前技术栈框架的组件调用条件的子组件；

组件调用模块，用于基于组件调用指令，在所述编译项目编译过程中通过调用所述子组件以完成对所述被使用组件的调用。

9.一种组件调用装置，其特征在于，包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1至7任一项所述组件调用方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有组件调用程序，所述组件调用程序被处理器执行时实现如权利要求1至7任一项所述组件调用方法的步骤。

Images