CN113495727B - 业务组件开发方法、装置、电子设备及介质 - Google Patents

Abstract

本申请提供了一种业务组件开发方法、装置、电子设备及介质。该方法包括：获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息。本申请实现了降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

Description

业务组件开发方法、装置、电子设备及介质

技术领域

本申请涉及计算机软件技术领域，具体而言，本申请涉及一种业务组件开发方法、装置、电子设备及介质。

背景技术

随着互联网产业的高速发展，应用程序也呈现了高速增长的态势，应用程序包括至少一个业务组件，每个业务组件包括用户界面（User Interface，UI）组件以及业务逻辑。通常情况下，一些业务组件适用于多个应用程序，而针对这种情况，开发者需要针对每个应用程序开发相似的业务组件，极大的影响了开发效率，因此，如何对业务组件进行二次开发成为关键性的技术。

现有技术中，针对开发者开发的业务组件，其UI组件与业务逻辑的耦合度较高，即UI组件与业务逻辑强相关。针对这类UI组件与业务逻辑耦合度较高的业务组件，开发者难以从业务组件中抽取出UI组件以及业务逻辑，且在抽取得到的UI组件的基础上，开发者还需要编写与业务组件中的业务逻辑具有相似功能的新代码，即开发与原业务逻辑的功能相似的新业务逻辑，或者基于UI组件与业务逻辑耦合度较高的业务组件，采用React生态下业界现有的业务逻辑复用方案，实现对业务组件的二次开发，其中，React生态下业界现有的业务逻辑复用方案主要为以下三种：

1、第一种业务逻辑复用方案为Mixins，该方案是将一个对象的属性拷贝至另一个对象上，从而实现通过Mixin定义各生命周期中需执行的业务逻辑代码，并挂载到React组件中，例如：

var LogMixin={

log:function(){

console.log(‘log’);},

componentDidMount:function(){

console.log(‘in’);},

componentWillUnmount:function(){

console.log(‘out’);}};

var User=React.createClass({

mixins:[LogMixin],

render:function(){

return(<div>…</div>)}});

var Goods=React.createClass({

mixins:[LogMixin],

render:function(){

return(<div>…</div>)}});

上述代码为使用Mixin记录用户的行为的代码，在LogMixin中定义业务逻辑代码，并挂载到React.createClass中。

其中，Mixins复用方案中依然存在UI组件与业务逻辑耦合度较高的问题，且Mixins较多时可能存在Mixins之间相互耦合的问题，增加代码的复杂性；

2、第二种业务逻辑复用方案为高阶组件（Higher-Order Components，HOC），高阶组件接收一个组件作为参数，从中实现需要复用的逻辑，返回一个新组件，即高阶组件是一个包裹了另一个组件的React组件。HOC可以实现组合渲染、条件渲染、操作Props、劫持渲染等复杂组件渲染场景，其中，HOC方案中存在UI组件与业务逻辑耦合度较高、固定的Props被覆盖，以及无法清晰的标识数据来源等问题，增加调试和修复代码的时间；

3、第三种业务逻辑复用方案为Render Props，Render Props是一种在React组件之间使用一个值为函数的属性共享代码的技术。即Render Props为组件提供一个render属性让组件能够动态地决定如何渲染。其中，该方案中存在UI组件与业务逻辑耦合度较高的问题、无法在return语句外访问数据，且容易导致嵌套较多的问题，增加代码复杂性。

综上，由于开发者难以从UI组件与业务逻辑耦合度较高的业务组件中抽取出UI组件以及业务逻辑，且抽取出UI组件之后，还需要重新开发业务逻辑，导致开发者难以对业务组件进行二次开发，或者采用现有的业务逻辑复用方案对UI组件与业务逻辑耦合度较高的业务组件进行二次开发，会增加代码复杂性，从而增加业务组件二次开发的复杂度，极大的降低了开发效率。

发明内容

本申请提供了一种业务组件开发方法、装置、电子设备及介质，可以解决以上至少一种技术问题。

第一方面，提供了一种业务组件开发方法，该方法包括：

获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息；

基于目标代码信息确定目标业务组件对应的代码信息。

在另一种可能实现方式中，获取目标代码信息，包括：

获取用户输入的检索信息；

基于检索信息，通过Node包管理器NPM获取检索信息对应的数据包；

利用预设解析工具解析检索信息对应的数据包，得到目标代码信息；

NPM对应的数据库中预存储有以下至少一项：

多个UI组件对应的数据包；多个业务逻辑对应的数据包。

在另一种可能实现方式中，利用预设解析工具解析检索信息对应的数据包，得到目标代码信息，包括：

基于检索信息对应的数据包中各个文件的文件名，利用预设解析工具确定待删除的文件；

利用预设解析工具删除待删除的文件，得到目标代码文件；

基于目标代码文件确定目标代码信息。

在另一种可能实现方式中，若目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则

基于目标代码信息确定目标业务组件对应的代码信息，包括：

获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，绑定代码信息用于绑定目标UI组件与目标业务逻辑；

基于目标业务逻辑对应的代码信息以及目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息。

在另一种可能实现方式中，目标业务逻辑对应的代码信息封装在钩子函数中；

则获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，包括：

针对目标UI组件对应的代码信息，获取用户在其中输入的目标UI组件与钩子函数的绑定代码信息，得到目标UI组件对应的更新后的代码信息。

在另一种可能实现方式中，若目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则：

基于目标代码信息确定目标业务组件对应的代码信息，之后还包括：

基于目标业务组件对应的代码信息生成目标业务组件对应的数据包；

将目标业务组件对应的数据包存储至NPM对应的数据库。

在另一种可能实现方式中，将目标业务组件对应的数据包存储至预设数据库，之后还包括：

通过NPM获取目标业务组件对应的数据包；

利用预设解析工具解析目标业务组件对应的数据包，得到目标业务组件对应的代码信息；

获取预设业务逻辑对应的代码信息；

基于预设业务逻辑对应的代码信息以及目标业务组件对应的代码信息，确定更新后的目标业务组件对应的代码信息。

第二方面，提供了一种业务组件开发装置，包括：

第一获取模块，用于获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息；

第一确定模块，用于基于目标代码信息确定目标业务组件对应的代码信息。

在另一种可能实现方式中，第一获取模块包括第一获取单元、第二获取单元以及解析单元，其中，

第一获取单元，用于获取用户输入的检索信息；

第二获取单元，用于基于检索信息，通过Node包管理器NPM获取检索信息对应的数据包；

解析单元，用于利用预设解析工具解析检索信息对应的数据包，得到目标代码信息；

NPM对应的数据库中预存储有以下至少一项：

多个UI组件对应的数据包；多个业务逻辑对应的数据包。

在另一种可能实现方式中，解析单元，具体用于基于检索信息对应的数据包中各个文件的文件名，利用预设解析工具确定待删除的文件；

解析单元，具体还用于利用预设解析工具删除待删除的文件，得到目标代码文件；

解析单元，具体还用于基于目标代码文件确定目标代码信息。

在另一种可能实现方式中，当目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则

第一确定模块包括第三获取单元以及确定单元，其中，

第三获取单元，用于获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，绑定代码信息用于绑定目标UI组件与目标业务逻辑；

确定单元，用于基于目标业务逻辑对应的代码信息以及目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息。

在另一种可能实现方式中，目标业务逻辑对应的代码信息封装在钩子函数中；

则第三获取单元，具体用于针对目标UI组件对应的代码信息，获取用户在其中输入的目标UI组件与钩子函数的绑定代码信息，得到目标UI组件对应的更新后的代码信息。

在另一种可能实现方式中，当目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则：

装置还包括生成模块以及存储模块，其中，

生成模块，用于基于目标业务组件对应的代码信息生成目标业务组件对应的数据包；

存储模块，用于将目标业务组件对应的数据包存储至NPM对应的数据库。

在另一种可能实现方式中，装置还包括第二获取模块、解析模块、第三获取模块以及第二确定模块，其中，

第二获取模块，用于通过NPM获取目标业务组件对应的数据包；

解析模块，用于利用预设解析工具解析目标业务组件对应的数据包，得到目标业务组件对应的代码信息；

第三获取模块，用于获取预设业务逻辑对应的代码信息；

第二确定模块，用于基于预设业务逻辑对应的代码信息以及目标业务组件对应的代码信息，确定更新后的目标业务组件对应的代码信息。

第三方面，提供了一种电子设备，其特征在于，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于：执行根据第一方面任一项所述的业务组件开发方法对应的操作。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现第一方面任一项所述的业务组件开发方法。

本申请提供的技术方案带来的有益效果是：

本申请提供了一种业务组件开发方法、装置、电子设备及介质，与现有技术相比，本申请通过获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息，实现了独立开发业务逻辑、独立开发UI组件，降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种业务组件开发方法的流程示意图；

图2为本申请实施例提供的一种业务组件开发装置的结构示意图；

图3为本申请实施例提供的一种电子设备的结构示意图；

图4为本申请实施例提供的一种解析逻辑的代码信息示意图；

图5为本申请实施例提供的一种业务逻辑对应的代码信息示意图；

图6为本申请实施例提供的一种UI组件对应的更新后的代码信息示意图；

图7为本申请实施例提供的一种从React组件中抽取业务逻辑的示意图；

图8为本申请实施例提供的一种对业务组件进行存储以及解析的示意图；

图9为本申请实施例提供的一种针对数据包进行解析的示意图；

图10为本申请实施例提供的一种存储业务组件的示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

本申请实施例中提供了一种业务组件开发方法，如图1所示，该方法可以由终端执行，也可以由服务器执行，该方法包括：

步骤S101，获取目标代码信息。

其中，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息。

对于本申请实施例，用户界面（User Interface，UI）组件用于封装组件的外观样式，因此，UI组件对应的代码信息中包括外观样式对应的代码信息，其中，业务组件的外观样式包括业务组件的形状、尺寸、颜色等。在本申请实施例中，UI组件对应的代码信息还可以包括业务组件功能对应的代码信息，例如，若提示UI组件用于以弹窗的形式展示提示信息，则提示UI组件对应的代码信息包括弹窗功能对应的代码信息；若提示UI组件用于以浮层的形式展示提示信息，则提示UI组件对应的代码信息包括浮层功能对应的代码信息；若轮播UI组件用于轮播展示图片，则轮播UI组件对应的代码信息包括轮播功能对应的代码信息。

对于本申请实施例，业务逻辑对应的代码信息为实现业务组件的核心功能的代码。例如，若榜单业务组件可以根据不同的条件从数据库中拉取排行榜信息并展示，则其业务逻辑对应的代码信息为实现根据不同的条件从数据库中拉取排行榜展示信息的功能的代码。

对于本申请实施例，可以将用户输入的独立开发的代码信息确定为目标代码信息，其中，独立开发的代码信息为UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，例如，可以将用户输入的独立开发的UI组件对应的代码信息，确定为目标代码信息；也可以从预设数据库中获取目标代码信息，例如从NPM（NodePackageManager，Node包管理器）对应的数据库中获取目标业务逻辑对应的代码信息。在本申请实施例中，可以获取目标UI组件对应的代码信息，也可以获取目标业务逻辑对应的代码信息，还可以获取目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，在本申请实施例中不做限定。

步骤S102，基于目标代码信息确定目标业务组件对应的代码信息。

对于本申请实施例，可以获取用户在目标UI组件对应的代码信息中编写的业务逻辑对应的代码信息，从而得到目标业务组件对应的代码信息；也可以获取用户在目标业务逻辑对应的代码信息中编写的UI组件对应的代码信息，从而得到目标业务组件对应的代码信息；还可以基于目标业务逻辑对应的代码信息以及目标UI组件对应的代码信息，确定目标业务组件对应的代码信息，在本申请实施例中不做限定。

进一步地，可以基于目标业务组件对应的代码信息生成目标业务组件对应的可执行文件，并将目标业务组件对应的可执行文件发送至终端，以使终端基于目标业务组件对应的可执行文件生成目标业务组件并显示，其中，可执行文件指的是可以由终端的操作系统进行加载并执行的文件，在本申请实施例中，并不限定终端的操作系统，也不限定可执行文件，例如，可执行文件可以为超文本标记语言（Hyper Text Markup Language，HTML）文件，也可以为应用程序（Application，App）文件。

本申请实施例提供了一种业务组件开发方法，与现有技术相比，本申请实施例通过获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息，实现了独立开发业务逻辑、独立开发UI组件，降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

本申请实施例的一种可能实现方式，步骤S101具体可以包括：获取用户输入的检索信息；基于检索信息，通过NPM获取检索信息对应的数据包；利用预设解析工具解析检索信息对应的数据包，得到目标代码信息。

其中，NPM对应的数据库中预存储A1以及A2中的至少一项，检索信息对应的数据包即为目标代码信息对应的数据包。

A1，多个UI组件对应的数据包。

A2，多个业务逻辑对应的数据包。

对于本申请实施例，如图8所示，用户可以独立开发UI组件，得到UI组件对应的代码信息，并利用预设编译器将UI组件对应的代码信息转换为UI组件对应的数据包，并存储至NPM对应的数据库中；用户也可以独立开发业务逻辑，得到业务逻辑对应的代码信息，并利用预设编译器将业务逻辑对应的代码信息转换为业务逻辑对应的数据包，并存储至NPM对应的数据库中。

其中，如图9所示，NPM即Node包管理器，预设编译器可以为Bable，利用Bable将UI组件对应的代码信息转换为UI组件对应的数据包时，UI组件对应的数据包包括UI组件对应的src包以及UI组件对应的lib包，UI组件对应的src包中包括UI组件对应的代码信息，UI组件对应的lib包为UI组件对应的编译后的代码信息；利用Bable将业务逻辑对应的代码信息转换为业务逻辑对应的数据包时，业务逻辑对应的数据包包括业务逻辑对应的src包以及业务逻辑对应的lib包，业务逻辑对应的src包中包括业务逻辑对应的代码信息，业务逻辑对应的lib包为业务逻辑对应的编译后的代码信息。

其中，如图8所示，针对已存储至NPM对应的数据库中的任一数据包，可以建立该任一数据包与检索信息之间的映射关系，以使当开发人员输入该检索信息时，可以基于该检索信息从NPM对应的数据库中确定任一数据包，以便通过解析该任一数据包并二次使用解析得到的代码信息。例如，若业务逻辑为拉取数据库中的排行榜，则可以建立该业务逻辑对应的数据包与检索信息“Rank”之间的映射关系，当用户输入“Rank”时，可以基于“Rank”确定拉取数据库中的排行榜对应的数据包。需要说明的时，还可以建立该任一数据包与其他信息之间的映射关系，如任一数据包与版本编号之间的映射关系，在本申请实施例中不做限定。

进一步地，当获取到检索信息对应的数据包时，可以利用预设解析工具对该数据包进行解析操作，得到目标代码信息。如图8所示，检索信息对应的数据包包括UI组件对应的数据包以及业务逻辑对应的数据包中的至少一项，当检索信息对应的数据包为UI组件对应的数据包时，可以利用预设解析工具对UI组件对应的数据包进行解析，得到UI组件对应的代码信息，以便二次使用UI组件对应的代码信息；当检索信息对应的数据包为业务逻辑对应的数据包时，可以利用预设解析工具对业务逻辑对应的数据包进行解析，得到业务逻辑对应的代码信息，以便二次使用业务逻辑对应的代码信息。

其中，预设解析工具可以用于解析检索信息对应的数据包，将检索信息对应的数据包转换为目标代码文件。具体地，如图9所示，当检测到用户输入lego install<componentName>命令行时，可以基于“componentName”（检索信息）确定该检索信息对应的数据包，其中，该数据包中包括lib包以及src包，然后将该检索信息对应的数据包下载至预设解析工具对应的目录，如预设解析工具对应的目录可以为nodemodules，利用预设解析工具将检索信息对应的数据包转换为目标代码文件，即src包，并复制src包至相应文件夹，基于src包得到检索信息对应的目标代码信息。

进一步地，利用预设解析工具解析检索信息对应的数据包，得到目标代码信息，具体可以包括：基于检索信息对应的数据包中各个文件的文件名，利用预设解析工具确定待删除的文件；利用预设解析工具删除待删除的文件，得到目标代码文件；基于目标代码文件确定目标代码信息。

具体地，如图4所示，图4为一种解析逻辑对应的代码信息示意图，其中，预设解析工具对应的代码信息中包括解析逻辑对应的代码信息。具体地，预设解析工具可以利用“let{code}=shell.cp(‘-rf’,fromPath,toPath);”（即401所示的代码信息）将检索信息对应的数据包复制至预设存储路径中，预设解析工具可以利用“resolveJSDependency(toPath);”（即402所示的代码信息）识别预设存储路径中各个文件的文件名，即检索信息对应的数据包中各个文件的文件名，从中确定待删除的文件，并删除待删除的文件，得到目标代码文件。

进一步地，预设解析工具可以利用“resolveJSDependency(toPath);”删除检索信息对应的数据包中的lib包，得到src包即目标代码文件，从src包中提取目标代码信息。

本申请实施例的另一种可能实现方式，若目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则

步骤S102可以包括：获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息；基于目标业务逻辑对应的代码信息以及目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息。

其中，绑定代码信息用于绑定目标UI组件与目标业务逻辑。

对于本申请实施例，目标UI组件对应的代码信息为独立开发的代码信息，目标业务逻辑对应的代码信息为独立开发的代码信息，用户可以在目标UI组件对应的代码信息中输入绑定代码信息，以对目标UI组件对应的代码信息进行更新，得到目标UI组件对应的更新后的代码信息，其中，目标UI组件对应的更新后的代码信息已绑定目标UI组件与目标业务逻辑。

进一步地，目标业务逻辑对应的代码信息封装在钩子函数中。

对于本申请实施例，如图7所示，可以利用React构建React组件，其中，React为构建用户界面的 JavaScript 库，React组件即为业务组件。在本申请实施例中，React组件的生命周期可分为三个阶段，分别记为生命周期1、生命周期2以及生命周期3，其中，生命周期1为挂载，即React组件被实例化并挂载在到Dom树的过程，生命周期2为更新，即React组件的属性或者状态改变时会重新渲染，生命周期3为卸载，即当React组件被移出Dom树时，React组件就会被卸载。具体地，针对一个React组件，可以分析其生命周期1-3对应的代码信息，从中抽取出公用逻辑对应的代码信息，其中，该公用逻辑为至少一个业务逻辑。进一步地，开发者可以基于抽取出的公用逻辑对应的代码信息，对React组件进行独立开发，使得独立开发的React组件基于业务逻辑进行分割，而非基于生命周期进行分割。例如，在图7中，针对React组件，通过分析其生命周期1-3对应的代码信息，从中抽取出业务逻辑A、业务逻辑B以及业务逻辑C各自对应的代码信息，基于业务逻辑A、业务逻辑B以及业务逻辑C各自对应的代码信息，对React组件进行独立开发，以将React组件分割为业务逻辑A、业务逻辑B以及业务逻辑C。

进一步地，开发者可以在独立开发业务逻辑时，使用React提供的useState、useEffect、useRefs等应用程序接口（Application Programming Interface，API），将业务逻辑对应的代码信息封装在钩子函数（Hooks）中，如图5所示，可以将业务逻辑对应的代码信息（如502所示）封装在钩子函数“useRank”（如501所示）中，利用useState（如503所示）声明钩子函数中的状态变量，利用useEffect（如504所示）实现组件渲染。

其中，获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，可以包括：针对目标UI组件对应的代码信息，获取用户在其中输入的目标UI组件与钩子函数的绑定代码信息，得到目标UI组件对应的更新后的代码信息。

对于本申请实施例，如图6，针对如下所示的目标UI组件对应的代码信息：

import React from 'react'

const Rank=({

cgi=''

params={off_set:0,page_size:10},

})=>{

return(

<div>

…

</div>

)

}

export default Rank

可以获取用户在其中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，具体地，绑定代码信息包括601所示的代码信息以及602所示的代码信息，用于绑定上述所示的目标UI组件与图5中的钩子函数“useRank”。

其中，601所示的代码信息为import{useRank}from'./hooks'，602所示的代码信息为const{rank=[],myRank,isEnd}=useRank(cgi,params)。

本申请实施例的另一种可能实现方式，若目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则：

步骤S102之后还可以包括：基于目标业务组件对应的代码信息生成目标业务组件对应的数据包；将目标业务组件对应的数据包存储至NPM对应的数据库。

对于本申请实施例，如图8所示，可以基于目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，得到目标业务组件对应的代码信息，利用预设编译器将目标业务组件对应的代码信息转换为目标业务组件对应的数据包，并存储至NPM对应的数据库，其中，预设编译器可以为Bable。

进一步地，将目标业务组件对应的数据包存储至预设数据库，之后还可以包括：通过NPM获取目标业务组件对应的数据包；利用预设解析工具解析目标业务组件对应的数据包，得到目标业务组件对应的代码信息；获取预设业务逻辑对应的代码信息；基于预设业务逻辑对应的代码信息以及目标业务组件对应的代码信息，确定更新后的目标业务组件对应的代码信息。

对于本申请实施例，如图8所示，针对已存储至NPM对应的数据库中的目标业务组件对应的数据包，可以建立该目标业务组件对应的数据包与检索信息之间的映射关系，以使当开发人员输入该检索信息时，可以基于该检索信息从NPM对应的数据库中确定目标业务组件对应的数据包，以便通过解析该目标业务组件对应的数据包并二次使用解析得到的代码信息。具体地，针对业务组件对应的数据包，可以利用预设解析工具对业务组件对应的数据包进行解析，得到业务组件对应的代码信息，以便二次使用业务组件对应的代码信息。

其中，可以利用预设解析工具解析目标业务组件对应的数据包，得到目标业务组件对应的代码信息，与利用预设解析工具解析检索信息对应的数据包，得到目标代码信息的过程相似，在此不再赘述。

进一步地，可以将用户输入的独立开发的业务逻辑对应的代码信息确定为预设业务逻辑对应的代码信息，以获取预设业务逻辑对应的代码信息；也可以从预设数据库中获取预设业务逻辑对应的代码信息，如，可以基于用户输入的预设业务逻辑对应的检索信息，通过NPM获取该检索信息对应的代码信息，即预设业务逻辑对应的代码信息。

对于本申请实施例，目标业务组件对应的代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，可以获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，以绑定目标UI组件与预设业务逻辑，即绑定目标业务组件与预设业务逻辑，得到目标业务组件对应的更新后的代码信息，从而可以基于目标业务组件对应的更新后的代码信息以及获取到的预设业务逻辑对应的代码信息，确定更新后的目标业务组件对应的代码信息。其中，预设业务逻辑对应的代码信息封装在钩子函数中，获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，以绑定目标UI组件与预设业务逻辑，与获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息的步骤相似，可以想见上述实施例的相关说明，在此不再赘述。

上述从方法步骤的角度详细介绍了本申请的业务组件开发方法，下面将提供一个具体实例，以进一步解释本申请的业务组件开发方法，具体地：

如图10所示，开发人员可以根据React-Hooks独立开发至少一个UI组件，得到各个UI组件对应的代码信息，并将各个UI组件对应的代码信息托管至NPM对应的数据库（即npm仓库）中，进一步地，可以从NPM对应的数据库中获取任一个UI组件对应的代码信息，以得到任一个UI组件；开发人员也可以根据React-Hooks独立开发至少一个Hooks（业务逻辑），得到各个Hooks对应的代码信息，并将各个Hooks对应的代码信息托管至NPM对应的数据库中，进一步地，可以从NPM对应的数据库中获取任一个Hooks对应的代码信息，以得到任一个Hooks；开发人员还可以根据独立开发的一个UI组件以及独立开发的至少一个Hooks，编译得到一个业务组件，即得到一个业务组件对应的代码信息，并将一个业务组件对应的代码信息托管至NPM对应的数据库，进一步地，可以从NPM对应的数据库中获取任一个业务组件对应的代码信息，以得到任一个业务组件，并通过对任一个业务组件进行解析，得到一个UI组件以及至少一个Hooks。

需要说明的是，对于本申请的业务组件开发方法，除可以将UI组件对应的代码信息、业务逻辑对应的代码信息以及业务组件对应的代码信息中的至少一项，按照本申请提供的方式托管至NPM对应的数据库中之外，还可以采用现有的存储方式存储UI组件对应的代码信息、业务逻辑对应的代码信息以及业务组件对应的代码信息中的至少一项，现有的存储方式可以为Git方式或者SVN（英文全称：Subversion）方式，在本申请实施例中不做限定。

上述从方法步骤的角度详细介绍了本申请的业务组件开发方法，下面将从虚拟装置的角度详细介绍本申请的业务组件开发装置，具体地：

本申请实施例中提供了一种业务组件开发装置，如图2所示，该业务组件开发装置20可以包括第一获取模块201以及第一确定模块202，其中，

第一获取模块201，用于获取目标代码信息。

其中，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息。

第一确定模块202，用于基于目标代码信息确定目标业务组件对应的代码信息。

本申请实施例的另一种可能实现方式，第一获取模块201包括第一获取单元、第二获取单元以及解析单元，其中，

第一获取单元，用于获取用户输入的检索信息。

第二获取单元，用于基于检索信息，通过Node包管理器NPM获取检索信息对应的数据包。

解析单元，用于利用预设解析工具解析检索信息对应的数据包，得到目标代码信息。

NPM对应的数据库中预存储有以下至少一项：

多个UI组件对应的数据包；多个业务逻辑对应的数据包。

本申请实施例的另一种可能实现方式，解析单元，具体用于基于检索信息对应的数据包中各个文件的文件名，利用预设解析工具确定待删除的文件。

解析单元，具体还用于利用预设解析工具删除待删除的文件，得到目标代码文件。

解析单元，具体还用于基于目标代码文件确定目标代码信息。

本申请实施例的另一种可能实现方式，当目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则

第一确定模块202包括第三获取单元以及确定单元，其中，

第三获取单元，用于获取用户在目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息。

其中，绑定代码信息用于绑定目标UI组件与目标业务逻辑。

确定单元，用于基于目标业务逻辑对应的代码信息以及目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息。

本申请实施例的另一种可能实现方式，目标业务逻辑对应的代码信息封装在钩子函数中；

则第三获取单元，具体用于针对目标UI组件对应的代码信息，获取用户在其中输入的目标UI组件与钩子函数的绑定代码信息，得到目标UI组件对应的更新后的代码信息。

本申请实施例的另一种可能实现方式，当目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息，则：

业务组件开发装置20还可以包括生成模块以及存储模块，其中，

生成模块，用于基于目标业务组件对应的代码信息生成目标业务组件对应的数据包。

存储模块，用于将目标业务组件对应的数据包存储至NPM对应的数据库。

本申请实施例的另一种可能实现方式，业务组件开发装置20还包括第二获取模块、解析模块、第三获取模块以及第二确定模块，其中，

第二获取模块，用于通过NPM获取目标业务组件对应的数据包。

解析模块，用于利用预设解析工具解析目标业务组件对应的数据包，得到目标业务组件对应的代码信息。

第三获取模块，用于获取预设业务逻辑对应的代码信息。

第二确定模块，用于基于预设业务逻辑对应的代码信息以及目标业务组件对应的代码信息，确定更新后的目标业务组件对应的代码信息。

对于本申请实施例，第一获取模块201、第二获取模块以及第三获取模块可以为同一个获取模块，也可以为不同的获取模块，还可以任意两个为相同的获取模块；第一确定模块202以及第二确定模块可以为同一个确定模块，也可以为两个不同的确定模块；第一获取单元以及第二获取单元可以为同一个获取单元，也可以为两个不同的获取单元，在本申请实施例中不做限定。

本申请实施例的业务组件开发装置适用于上述方法实施例的相关操作，其实现原理类似，在本申请实施例中不再赘述。

本申请实施例提供了一种业务组件开发装置，与现有技术相比，本申请实施例通过获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息，实现了独立开发业务逻辑、独立开发UI组件，降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

上述从虚拟装置的角度详细介绍了本申请的业务组件开发装置，下面将从实体设备的角度介绍本申请的电子设备，如下所示：

本申请实施例提供了一种电子设备，如图3所示，图3所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU（Central Processing Unit，中央处理器），通用处理器，DSP（Digital Signal Processor，数据信号处理器），ASIC（Application SpecificIntegrated Circuit，专用集成电路），FPGA（Field Programmable Gate Array，现场可编程门阵列）或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI（Peripheral Component Interconnect，外设部件互连标准）总线或EISA（ExtendedIndustry Standard Architecture，扩展工业标准结构）总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM（Read Only Memory，只读存储器）或可存储静态信息和指令的其他类型的静态存储设备，RAM（Random Access Memory，随机存取存储器）或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM（Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器）、CD-ROM（Compact DiscRead Only Memory，只读光盘）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器4003用于存储执行本申请方案的应用程序代码，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示的内容。

本申请实施例中提供了一种电子设备，该电子设备包括：存储器和处理器；至少一个程序，存储于存储器中，用于被处理器执行时，与现有技术相比可实现：通过获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息，实现了独立开发业务逻辑、独立开发UI组件，降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

上述从实体设备的角度介绍了本申请的电子设备，下面将从介质的角度介绍本申请的计算机可读存储介质，具体地：

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与现有技术相比，通过获取目标代码信息，目标代码信息包括目标用户界面UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息分别为独立开发的代码信息，基于目标代码信息确定目标业务组件对应的代码信息，实现了独立开发业务逻辑、独立开发UI组件，降低UI组件与业务逻辑之间的耦合度，从而可以方便的利用独立开发的业务逻辑和UI组件中的至少一项开发业务组件，进而降低业务组件二次开发的复杂度，提高开发效率。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上所述仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (8)

1.一种业务组件开发方法，其特征在于，包括：

获取目标代码信息，所述目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，所述目标UI组件对应的代码信息以及所述目标业务逻辑对应的代码信息分别为独立开发的代码信息；

若所述目标代码信息包括所述目标UI组件对应的代码信息以及所述目标业务逻辑对应的代码信息，获取用户在所述目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，所述绑定代码信息用于绑定所述目标UI组件与所述目标业务逻辑；

基于所述目标业务逻辑对应的代码信息以及所述目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息；

其中，所述目标业务逻辑对应的代码信息封装在钩子函数中；则所述获取用户在所述目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，包括：

针对所述目标UI组件对应的代码信息，获取用户在其中输入的所述目标UI组件与所述钩子函数的绑定代码信息，得到所述目标UI组件对应的更新后的代码信息。

2.根据权利要求1所述的方法，其特征在于，所述获取目标代码信息，包括：

获取用户输入的检索信息；

基于所述检索信息，通过Node包管理器NPM获取所述检索信息对应的数据包；

利用预设解析工具解析所述检索信息对应的数据包，得到所述目标代码信息；

所述NPM对应的数据库中预存储有以下至少一项：

多个UI组件对应的数据包；多个业务逻辑对应的数据包。

3.根据权利要求2所述的方法，其特征在于，所述利用预设解析工具解析所述检索信息对应的数据包，得到所述目标代码信息，包括：

基于所述检索信息对应的数据包中各个文件的文件名，利用所述预设解析工具确定待删除的文件；

利用所述预设解析工具删除所述待删除的文件，得到目标代码文件；

基于所述目标代码文件确定所述目标代码信息。

4.根据权利要求1-3任一项所述的方法，其特征在于，若所述目标代码信息包括所述目标UI组件对应的代码信息以及所述目标业务逻辑对应的代码信息，则：

所述基于所述目标业务逻辑对应的代码信息以及所述目标UI组件对应的更新后的代码信息，确定所述目标业务组件对应的代码信息，之后还包括：

基于所述目标业务组件对应的代码信息生成所述目标业务组件对应的数据包；

将所述目标业务组件对应的数据包存储至NPM对应的数据库。

5.根据权利要求4所述的方法，其特征在于，所述将所述目标业务组件对应的数据包存储至预设数据库，之后还包括：

通过所述NPM获取所述目标业务组件对应的数据包；

利用预设解析工具解析所述目标业务组件对应的数据包，得到所述目标业务组件对应的代码信息；

获取预设业务逻辑对应的代码信息；

基于所述预设业务逻辑对应的代码信息以及所述目标业务组件对应的代码信息，确定更新后的目标业务组件对应的代码信息。

6.一种业务组件开发装置，其特征在于，包括：

第一获取模块，用于获取目标代码信息，所述目标代码信息包括目标UI组件对应的代码信息以及目标业务逻辑对应的代码信息中的至少一项，所述目标UI组件对应的代码信息以及所述目标业务逻辑对应的代码信息分别为独立开发的代码信息；

第一确定模块，用于若所述目标代码信息包括所述目标UI组件对应的代码信息以及所述目标业务逻辑对应的代码信息，获取用户在所述目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息，基于所述目标业务逻辑对应的代码信息以及所述目标UI组件对应的更新后的代码信息，确定目标业务组件对应的代码信息，所述绑定代码信息用于绑定所述目标UI组件与所述目标业务逻辑；

其中，所述目标业务逻辑对应的代码信息封装在钩子函数中；则所述第一确定模块，在获取用户在所述目标UI组件对应的代码信息中输入的绑定代码信息，得到目标UI组件对应的更新后的代码信息时，具体用于：

针对所述目标UI组件对应的代码信息，获取用户在其中输入的所述目标UI组件与所述钩子函数的绑定代码信息，得到所述目标UI组件对应的更新后的代码信息。

7.一种电子设备，其特征在于，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于：执行根据权利要求1~5任一项所述的业务组件开发方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-5任一项所述的业务组件开发方法。