CN114327464B - 一种组件构建方法、装置及存储介质 - Google Patents

Abstract

本申请的实施例涉及界面设计领域，一些实施例提供了一种组件构建方法、装置及存储介质，具体包括：获取待构建组件的显示需求和功能需求；根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，将所述第一代码段自动填入第一预设区域；以及根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，将所述第二代码段自动填入第二预设区域；对于不同的显示需求和不同的功能需求可以根据属性参数和/或类型参数调用相同的代码段对应的组件实现功能和显示，提高了组件的复用率。

Description

一种组件构建方法、装置及存储介质

技术领域

本申请的实施例涉及界面设计领域，更具体地涉及一种组件构建方法、装置及存储介质。

背景技术

现有技术中，Ant Design组件库作为当前用于界面设计的前端React技术栈最受欢迎的组件库之一，它提供了一套非常完整的组件化设计规范和组件化编码规范；其中，组件部分是Ant design组件库的最大亮点是利用其丰富的组件提供了能够覆盖绝大部分场景的能力。

但是对于有着大量的弹出框、表单、表格、查询、审批、详情页的功能需求的B端项目，开发时需要根据业务需求制定不同的样式和不同逻辑的组件，虽然Ant design组件库的功能较为完备，但是由于每个组件相对比较独立，因此组件的联动性和复用性较差，容易产生组件代码出现冗余和杂乱的情况，进而还会因为组件的复用性低下、代码冗余及杂乱的情况造成后期维护困难的问题。

发明内容

但是，出于需要根据业务需求制定不同的样式和不同逻辑的组件的原因，现有技术中根据业务需求定制组件时需要为各个组件定制不同的样式和逻辑，且都对于每种业务需求定制一部分相同的组件的代码冗余度较高。

因此在现有技术中，根据每种业务需求都定制一部分通用的组件是非常令人烦恼的过程。

为此，非常需要一种改进的组件构架方法，以使在不同业务需求下复用通用组件。

在本上下文中，本申请的实施例期望提供一种组件构建方法、装置及存储介质。

在本申请的第一方面中，提供了一种组件构建方法，包括：

获取待构建组件的显示需求和功能需求；

根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；

根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域。

在本申请的第二方面中，提供了一种组件构建装置，包括：

输入输出模块，被配置为获取待构建组件的显示需求和功能需求；

处理模块，被配置为根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段；以及

根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段；

所述输入输出模块，还被配置为将所述第一代码段自动填入第一预设区域，以及将所述第二代码段自动填入第二预设区域。

在本申请的第三方面中，提供了一种计算机可读存储介质，包括指令，当其在计算机上运行时，使得计算机执行第一方面所述的组件构建方法。

在本申请的第四方面中，提供了一种计算设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述计算机程序时实现第一方面所述的组件构建方法。

根据本申请实施例的组件构建方法、装置及存储介质，可以根据获取待构建组件的显示需求和功能需求，分别从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段以及从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，在分别将所述第二代码段自动填入第二预设区域以及将所述第一代码段自动填入第一预设区域；因此，不同的显示需求和不同的功能需求可以根据属性参数和/或类型参数调用相同的代码段对应的组件实现功能和显示，提高了组件的复用率，进而避免了在不同业务需求中为实现相同功能或显示编写代码构建组件的过程。

附图说明

通过参考附图阅读下文的详细描述，本申请示例性实施例的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本申请的若干实施例，其中：

图1为本申请一实施例提供的组件构建方法的应用场景示意图；

图2为本申请一实施例提供的组件构建方法的流程示意图；

图3为本申请一实施例提供的子元素节点包含的形态种类示意图；

图4为本申请一实施例提供的组件构建装置的结构示意图；

图5示意性地示出了本申请实施例的一种计算机可读存储介质的结构示意图；

图6示意性地示出了本申请实施例的一种计算设备的结构示意图。

在附图中，相同或对应的标号表示相同或对应的部分。在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施例来描述本申请的原理和精神。应当理解，给出这些实施例仅仅是为了使本领域技术人员能够更好地理解进而实现本申请，而并非以任何方式限制本申请的范围。相反，提供这些实施例是为了使本申请更加透彻和完整，并且能够将本声请的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本申请的实施例可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本申请可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

本申请实施例提供的方案涉及网页界面设计、组件构建等技术，具体提供一种组件构建方法，具体提供了一种界面设计中同时出现不同业务需求时，提升组件复用性、关联性的组件构建方法、装置及存储介质，实现不同业务需求之间组件复用性的提升，本申请提供的组件构建方法可以应用于网页界面设计、软件应用界面设计以及手机软件界面设计等在各种业务需求下的组件应用，以期望提高界面设计中不同业务需求下通用组件的复用率，构建得到的组件可以具体应用于网页界面设计、软件界面设计以及手机软件界面设计等领域中。

其中，界面设计(User Interface，UI)是指人与信息交互的媒介和信息的采集与反馈、输入与输出，界面设计是信息产品的功能载体和典型特征，界面设计作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。这是物理表现层的设计，每一款产品或者交互形式都以这种形态出现，包括图形、图标、色彩、文字设计等，用户通过它们使用系统。在这一层面，界面设计可以理解为User Interface，即用户界面，这是界面设计作为人机交互的基础层面；界面设计也是基于界面而产生的人与产品之间的交互行为。在这一层面，界面设计可以理解为User Interaction，即用户交互，这是界面产生和存在的意义所在。人与非物质产品的交互更多依赖于程序的无形运作来实现，这种与界面匹配的内部运行机制，需要通过界面对功能的隐喻和引导来完成。因此，界面设计不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。

组件构建是对数据和方法的简单封装，组件是指系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。一个组件代表一个系统中实现的物理部分，包括软件代码(源代码，二进制代码，可执行代码)或者一些类似内容，如脚本或者命令文件。此外，组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

随着界面设计技术的研究和进步，界面设计在多个领域展开研究和应用，例如常见具有交互界面的智能家居、智能穿戴设备、虚拟助理、智能音箱、智能营销、无人驾驶、自动驾驶、无人机、机器人、智能医疗、智能客服等，相信随着技术的发展，界面设计技术将在更多的领域得到应用，并发挥越来越重要的价值。

相关技术中，界面设计中根据不同的业务需求对应构建用于功能实现的组件，在组件的构建过程中，由于不同业务需求的实现过程中会构建很多逻辑相同的组件，因此会产生代码冗余的情况，而且这些逻辑相同的组件在各个业务需求中还存在的复用率极低的问题。

为解决上述技术问题，本申请实施例提供了一种组件构建方法，可以应用于如图1所示的应用环境中。其中，终端设备102通过网络与服务器101进行通信。终端102向服务器101发送待构建组件的显示需求和功能需求，服务器101根据显示需求和功能需求分别从预先生成的组件库中，匹配获取所述显示需求的第一代码段以及匹配获取实现所述功能需求的第二代码段；服务器101将所述第一代码段和所述第二代码分别自动填入第一预设区域和第二预设区域。终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑，服务器101可以用独立的服务器或者是多个服务器组成的服务器集群来实现。终端设备102可以包括一个或者多个用户终端，这里将不对用户终端的数量进行限制。所述终端设备102中包含的一个或多个用户终端可以分别与上述服务器101进行网络连接，以便于每个终端设备可以通过该网络连接与服务器101进行数据交互。

其中，该终端设备102中的每个用户终端均可以包括：如图1所示的桌上型电脑102a和智能手机102b之外还可以有平板电脑、笔记本电脑等的智能终端。应当理解，如图1所示的用户终端中的每个用户终端均可以安装有目标应用(即应用客户端)，当该应用客户端运行于各用户终端中时，可以分别与上述图1所示的服务器之间进行数据交互；同时，服务器101可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

终端设备和服务器之间可以通过无线网络、有线网络或可移动存储介质进行通信。其中，上述的无线网络使用标准通信技术和/或协议。无线网络通常为互联网(Internet)、但也可以是任何网络，包括但不限于蓝牙、局域网(Local AreaNetwork，LAN)、城域网(Metropolitan Area Network，MAN)、广域网(Wide Area Network，WAN)、移动、专用网络或者虚拟专用网络的任何组合)。在一些实施例中，可以使用定制或专用数据通信技术取代或者补充上述数据通信技术。可移动存储介质可以为通用串行总线(UniversalSerial Bus，USB)闪存盘、移动硬盘或其他可移动存储介质等，本申请在此不做限制。

需要说明的是，该应用环境中也可以仅包括终端设备102，而不包括该服务器101，该组件构建方法可以直接部署于终端设备102中。在该实现方式中，终端设备102也可以是一台服务器，或者由若干台服务器组成的服务器集群，或者是一个云计算服务中心。

下面参考本申请的若干代表性实施例，详细阐释本申请的原理和精神。

示例性方法

下面结合图1的应用场景，参考图2来描述根据本申请示例性实施例的组件构建的方法。需要注意的是，上述应用场景仅是为了便于理解本申请的精神和原理而示出，本申请的实施例在此方面不受任何限制。相反，本申请的实施例可以应用于适用的任何场景。

图2所示的本申请一实施例提供的组件构建方法的流程，包括：

步骤S201，获取待构建组件的显示需求和功能需求；

在本申请的一实施例中，所述显示需求和功能需求至少包括属性参数和/或类型参数，并且还可以是同时包括属性参数和类型参数，或者只包括属性参数和类型参数中的任一参数，其中，所述属性参数可以是用于确定所述显示需求和所述功能需求具体实现过程的参数，所述类型参数可以是用于确定所述显示需求类型和功能需求类型的参数。对于所述显示需求和所述功能需求中包括的参数，本申请不作任何限定。

步骤S202，根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；以及

根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域。

在本申请的一个实施例中，所述预先生成的组件库至少包括点击类型组件、确认类型组件、浮层弹出框/抽屉类型组件、浮层弹出框/抽屉表单提交类型组件、禁用类型组件、路由跳转类型组件以及加载类型组件；其中，所述预先生成的组件库中预先存储每一组件与对应的关键字映射关系，且预先存储每一组对应的显示控制代码段和/或逻辑控制代码段。

具体的，对于所述预先生成的组件库中包含的组件以及对应的显示控制代码段和/或逻辑控制代码段，本申请不做任何限定。

在本申请的一实施例中，由于所述显示需求中至少包括属性参数和/或类型参数，进而所述第一代码段是根据所述属性参数和/或类型参数从所述预先生成的组件库中获取所述属性参数和/或类型参数的第一组件关键字，再基于所述第一组件关键字确定的。

在本申请的一个实施例中，预先构建的组件库可以是ProButton，可以预先被配置为通过传入的type属性将待构建的组件按照业务逻辑分为主要的几类，例如普通click操作按钮、confirm确认型按钮、Modal/Drawer浮层弹出框/抽屉型按钮、Modal/Drawer浮层弹出框/抽屉表单提交型按钮、禁用型按钮、路由跳转型按钮、loading型按钮。

另外，在一个实施例中，可以通过传入的Children节点类型来确认待构建组件的形态，例如超链接型、普通文本型又或者Ant的Button型或icon、image型，不同的ChildNode节点可以复用相同的ProButton业务逻辑，来实现逻辑复用，组件复用。需要说明的是，各个待构建组件的Child Node节点不同，但是节点内的业务逻辑可以通过ProBtton实现，ChildNode节点只用于表示待构建组件当前显示形态，与功能无关。

其中，所述属性参数包括动作属性参数，在所述待构建组件构建完成后，执行所述待构建组件时，根据所述动作属性参数将所待构建组件刷新关联组件。

例如，在本申请一个实施例中，ProButton可以通过传入的actionRef属性来实现和Table表格组件的联动，当用户点击按钮进行完操作之后可以自动调用Table实例上的方法完成Table组件的reload刷新，无需开发者再每次手动定义click事件函数来进行Table的reload刷新。

另外，在一个实施例中，如果待构建组件为Modal/Drawer表单提交类型，ProButton会将传入的ChildNode节点作为一个弹出框/抽屉表单的触发媒介，每次点击Child节点时都会触发显示浮层打开表单框。当Form表单cancel或者commit finish时自动隐藏浮层和弹框，无需用户手动的维护visible状态来对浮层弹框Form的显示与隐藏进行控制；另外，在一个实施例中，仍然可以接收指令，传入visible属性使组件变为受控。本实施例的ProButton，减少了visible状态的使用，使用户将更多的精力倾注到业务逻辑中来。并且ProButton还将Modal/Drawer表单通用的页头和页脚的样式及逻辑集中提前封装，用户无需每次都对Form的样式和开关逻辑进行重复的定义，无需关心Form样式等问题。

具体的，可以直接利用所述自执行函数调用判断语句对所述显示需求中的类型参数进行判断，然后利用判断得到的判断结果与所述预先生成的组件库中的组件进行匹配，得到所述组件库中对应匹配的组件的关键字，最后根据所述关键字与组件之间的对应关系，选取对应的组件显示控制代码作为所述显示需求对应的第一代码段。

举例说明，假设判断结果得出的所述显示需求的类型参数的含义为：确认类型显示需求，可以通过判断出来的“确认类型”与所述预先生成组件库中的组件进行匹配，进而获取匹配到的所述组件库中“确认类型组件”的关键字，最后根据所述关键字与确认类型组件之间的映射关系，选取确认类型组件的显示控制代码作为所述显示需求对应的第一代码段。

在本申请的一个实施例中，所述第二代码段也是根据所述功能需求的属性参数和/或类型参数从所述预先生成的组件库中获取与所述功能需求的属性参数和/或类型参数的第二组关键字，根据所述第二组件关键字获取对应的第二代码段。

具体的，所述功能需求也可以通过自执行函数调用判断语句对所述功能需求的属性参数或类型参数进行判断，确定所述功能需求的具体功能或类型，再根据所述具体功能需求或类型需求与预先生成的组件库中的组件进行匹配，得到所述组件库中对应匹配的组件的关键字，最后根据所述关键字与组件之间的映射关系，选取对应的组件逻辑控制代码作为所述显示需求对应的第二代码段。

同样举例说明，假设通过自执行函数的判断语句根据所述功能需求中的属性参数判断出所述功能需求的具体功能需求是“路由跳转”，再将所述“路由跳转”的功能需求与所述组件库中的关键字进行匹配，获取成功匹配到的组件库中的“路由跳转类型组件”的关键字，最后根据所述关键字与路由跳转类型组件之间的映射关系，调用所述路由跳转类型组件的逻辑控制代码作为所述功能需求对应的第二代码段。

此外，若所述显示需求或功能需求中，包括符合预设阈值的属性参数和/或类型参数，则从预先生成的组件库中，匹配获取所述第一代码段或第二代码段。

在本申请的一个实施例中，将所述第一代码和/或第二代码段自动填入对应的预设区域的过程具体包括：根据所述属性参数和/或类型参数，从所述组件库中获取与所述属性参数和/或类型参数的组件关键字对应的子元素节点，并根据所述子元素节点获取用于实现所述显示需求或功能需求的代码段；将所述待构建组件作为所述子元素节点，将获取到的代码段自动填入对应的预设区域。

其中，所述待构建组件作为所述子元素节点可以有多个对应的显示形态，如图3所示，包括但不限于文本、超链接、图标、图片以及其他形式的子元素节点，对此，本申请不作任何限定。

举例说明，当所述显示需求的属性参数和/或类型参数对应的组件关键字为“禁用类型”，对应获取用于实现显示需求的子元素节点作为所述显示需求的输出端，调用所述子元素节点中对应的禁用形态的显示结果，再将待构建组件作为一个对应输出功能，并利用所述关键字“禁用类型”映射的禁用类型的代码段编写到指定的编译软件等的预设区域，实现所述输出功能，形成输出显示结果为禁用状态，实际输出功能为无法点击的禁用类型组件。

例如，在本申请的一个实施例中，ProButton可以根据传入ChildNode节点类型去匹配对应的禁用形态，在构建组件时，只需传入的type属性值为disabled，即可实现按钮不可点击的置灰效果，例如普通Button组件、超链接置为不可点击，文本、icon图标、img图片等会在鼠标移入时显示为“禁止”效果。

另外，根据所述属性参数和/或类型参数确定所述功能需求为二次确认需求时，从所述预先生成的组件库中，匹配获取与所述二次确认需求对应的第二代码段，并将所述第二代码段自动填入包裹所述待构建组件的代码段的第二预设区域；

例如，本申请一个实施例中，ProButton可以通过传入的confirm属性，自定义按钮点击后或者点击确认框二次确认后的callback逻辑处理，如轻提示、模态框提示等。在本实施例中，ProButton已经自动的帮助完成了一些callback逻辑处理，若仍不满足需求，本实施例中还可以传入confirm属性来丰富或者自定义callback，另外，为了保证待构建组件的唯一性，只有通过confirm才能自定义callback，其他方式不会生效。

若所述功能需求为跳转需求，则从所述预先生成的组件库中，匹配获取与所述跳转需求对应的第二代码段，并将所述第二代码段自动填入在执行时，排序在所述待构建组件的代码段之前的第二预设区域。

例如，在本申请一个实施例中，ProButton通过传入的routePath来实现按钮点击之后路由的跳转。

本申请实施例提供的一种按钮组件的构建方法，可以解决界面设计中组件复用率低下、联动性不强的问题，具体包括：获取待构建组件的显示需求和功能需求；然后根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，进而将所述第一代码段自动填入第一预设区域，其中，所述第一代码段是随着显示需求的变化而变化的；以及根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，进而将所述第二代码段自动填入第二预设区域，同时，所述第二代码段也是根据功能需求的变化而变化的，因此，不同的显示需求和不同的功能需求可以根据属性参数和/或类型参数调用相同的代码段对应的组件实现功能和显示，提高了组件的复用率。

示例性装置

在介绍了本申请示例性实施方式的方法之后，接下来，参考图4对本申请示例性实施方式的一种组件构建装置进行说明，所述装置包括：

输入输出模块301，被配置为获取待构建组件的显示需求和功能需求；

作为一种可选的实施方式，所述输入输出模块301还被配置为将所述第一代码段自动填入第一预设区域，以及将所述第二代码段自动填入第二预设区域。

作为一种可选的实施方式，所述输入输出模块301获取的待构建组件的显示需求和功能需求至少包括属性参数和/或类型参数，并且还可以是同时包括属性参数和类型参数，或者只包括属性参数和类型参数中的任一参数，其中，所述属性参数可以是用于确定所述显示需求和所述功能需求具体实现过程的参数，所述类型参数可以是用于确定所述显示需求类型和功能需求类型的参数。对于所述显示需求和所述功能需求中包括的参数，本申请不作任何限定。

处理模块302，被配置为根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；以及

根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域。

作为一种可选的实施方式，所述处理模块302所对应匹配获取实现显示需求和功能需求的所述预先生成的组件库至少包括点击类型组件、确认类型组件、浮层弹出框/抽屉类型组件、浮层弹出框/抽屉表单提交类型组件、禁用类型组件、路由跳转类型组件以及加载类型组件；其中，所述预先生成的组件库中预先存储每一组件与对应的关键字映射关系，且预先存储每一组对应的显示控制代码段和/或逻辑控制代码段。

具体的，对于所述预先生成的组件库中包含的组件以及对应的显示控制代码段和/或逻辑控制代码段，本申请不做任何限定。

作为一种可选的实施方式，所述处理模块302是根据所述属性参数和/或类型参数，从所述组件库中获取与所述属性参数和/或类型参数的第一组件关键字，根据所述第一组件关键字获取对应的第一代码段；以及

根据所述属性参数和/或类型参数，从所述组件库中获取所述属性参数和/或类型参数的第二组件关键字，根据所述第二组件关键字获取对应的第二代码段。

其中，所述属性参数包括动作属性参数，在所述待构建组件构建完成后，执行所述待构建组件时，根据所述动作属性参数将所待构建组件刷新关联组件。

此外，若所述显示需求或功能需求中，包括符合预设阈值的属性参数和/或类型参数，则从预先生成的组件库中，匹配获取所述第一代码段或第二代码段。

作为一种可选的实施方式，所述处理模块302将所述第一代码和/或第二代码段自动填入对应的预设区域的过程具体包括：根据所述属性参数和/或类型参数，从所述组件库中获取与所述属性参数和/或类型参数的组件关键字对应的子元素节点，并根据所述子元素节点获取用于实现所述显示需求或功能需求的代码段；将所述待构建组件作为所述子元素节点，将获取到的代码段自动填入对应的预设区域。

其中，所述待构建组件作为所述子元素节点可以有多个对应的显示形态，包括但不限于文本、超链接、图标、图片以及其他形式的子元素节点，对此，本申请不作任何限定。

此外，当所述功能需求为二次确认需求时，从所述预先生成的组件库中，匹配获取与所述二次确认需求对应的第二代码段，并将所述第二代码段自动填入包裹所述待构建组件的代码段的第二预设区域；

若所述功能需求为跳转需求，则从所述预先生成的组件库中，匹配获取与所述跳转需求对应的第二代码段，并将所述第二代码段自动填入在执行时，排序在所述待构建组件的代码段之前的第二预设区域。

本申请实施例提供的一种组件的构建装置通过获取待构建组件的显示需求和功能需求；然后根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，进而将所述第一代码段自动填入第一预设区域；以及根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，进而将所述第二代码段自动填入第二预设区域；也就是说，在所述功能需求或所述显示需求相同的时候匹配所述第一代码段和第二代码段复用相同的组件实现所述功能需求和所述显示需求，通过本申请提供的组件构建装置可以提升组件的复用率。

示例性介质

在介绍了本申请示例性实施方式的方法和装置之后，接下来，参考图5对本申请示例性实施方式的计算机可读存储介质进行说明，其示出的计算机可读存储介质为光盘40，其上存储有计算机程序(即程序产品)，所述计算机程序在被处理器运行时，会实现上述方法实施方式中所记载的各步骤，例如，获取待构建组件的显示需求和功能需求；根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域。各步骤的具体实现方式在此不再重复说明。

需要说明的是，所述计算机可读存储介质的例子还可以包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他光学、磁性存储介质，在此不再一一赘述。

示例性计算设备

在介绍了本申请示例性实施方式的方法、装置及存储介质之后，接下来，参考图6对本申请示例性实施方式的用于构建组件的计算设备。

图6示出了适于用来实现本申请实施方式的示例性计算设备50的框图，该计算设备50可以是计算机系统或服务器。图6显示的计算设备50仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算设备50的组件可以包括但不限于：一个或者多个处理器或者处理单元501，系统存储器502，连接不同系统组件(包括系统存储器502和处理单元501)的总线503。

计算设备50典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算设备50访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器502可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)5021和/或高速缓存存储器5022。计算设备50可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，ROM6023可以用于读写不可移动的、非易失性磁介质(图6中未显示，通常称为“硬盘驱动器”)。尽管未在图6中示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线503相连。系统存储器502中可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本申请各实施例的功能。

具有一组(至少一个)程序模块5024的程序/实用工具5025，可以存储在例如系统存储器502中，且这样的程序模块5024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块5024通常执行本申请所描述的实施例中的功能和/或方法。

计算设备50也可以与一个或多个外部设备504(如键盘、指向设备、显示器等)通信。这种通信可以通过输入/输出(I/O)接口505进行。并且，计算设备50还可以通过网络适配器506与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图6所示，网络适配器506通过总线503与计算设备50的其它模块(如处理单元501等)通信。应当明白，尽管图6中未示出，可以结合计算设备50使用其它硬件和/或软件模块。处理单元501通过运行存储在系统存储器502中的程序，从而执行各种功能应用以及数据处理，例如，获取待构建组件的显示需求和功能需求；根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域。各步骤的具体实现方式在此不再重复说明。应当注意，尽管在上文详细描述中提及了组件构建装置的若干单元/模块或子单元/子模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

在本申请的描述中，需要说明的是，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

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

最后应说明的是：以上所述实施例，仅为本申请的具体实施方式，用以说明本申请的技术方案，而非对其限制，本申请的保护范围并不局限于此，尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本申请实施例技术方案的精神和范围，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

Claims (12)

1.一种组件构建方法，其中，包括：

获取待构建组件的显示需求和功能需求；

根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段，并将所述第一代码段自动填入第一预设区域；获取所述第一代码段具体包括：根据所述显示需求中包括的类型参数，从所述组件库中获取与所述类型参数的第一组件关键字对应的子元素节点，并根据所述子元素节点获取用于实现所述显示需求的第一代码段；其中，所述子元素节点仅用于表示待构建组件的当前显示形态；

根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段，并将所述第二代码段自动填入第二预设区域；获取所述第二代码段具体包括：根据所述功能需求中包括的属性参数，从所述组件库中获取所述属性参数的第二组件关键字，根据所述第二组件关键字获取用于实现所述功能需求的第二代码段；其中，在多个不同的待构建组件包括相同的功能需求时，所述多个不同的待构建组件的第二代码段相同；

其中，所述第一预设区域和所述第二预设区域为编译软件的预设区域。

2.根据权利要求1所述的组件构建方法，其中，所述预先生成的组件库至少包括点击类型组件、确认类型组件、浮层弹出框/抽屉类型组件、浮层弹出框/抽屉表单提交类型组件、禁用类型组件、路由跳转类型组件或加载类型组件；

其中，所述预先生成的组件库中预先存储每一组件与对应的关键字映射关系，且预先存储每一组件对应的显示控制代码段和/或逻辑控制代码段。

3.根据权利要求1或2所述的组件构建方法，其中，将所述第二代码段自动填入第二预设区域，包括：

若所述功能需求为二次确认需求，则从所述预先生成的组件库中，匹配获取与所述二次确认需求对应的第二代码段，并将所述第二代码段自动填入包裹所述待构建组件的代码段的第二预设区域；

若所述功能需求为跳转需求，则从所述预先生成的组件库中，匹配获取与所述跳转需求对应的第二代码段，并将所述第二代码段自动填入在执行时，排序在所述待构建组件的代码段之前的第二预设区域。

4.根据权利要求3所述的组件构建方法，其中，根据所述显示需求或功能需求，从预先生成的组件库中，匹配获取所述第一代码段或第二代码段，包括：

若所述显示需求或功能需求中，包括符合预设阈值的属性参数和/或类型参数，则从预先生成的组件库中，匹配获取所述第一代码段或第二代码段。

5.根据权利要求3所述的组件构建方法，其中，所述属性参数包括动作属性参数，在所述待构建组件构建完成后，执行所述待构建组件时，根据所述动作属性参数将所待构建组件刷新关联组件。

6.一种组件构建装置，包括：

输入输出模块，被配置为获取待构建组件的显示需求和功能需求；

处理模块，被配置为根据所述显示需求，从预先生成的组件库中，匹配获取实现所述显示需求的第一代码段；具体包括：根据所述显示需求中包括的类型参数，从所述组件库中获取与所述类型参数的第一组件关键字对应的子元素节点，并根据所述子元素节点获取用于实现所述显示需求的第一代码段；其中，所述子元素节点仅用于表示待构建组件的当前显示形态；

所述处理模块，还被配置为根据所述功能需求，从预先生成的组件库中，匹配获取实现所述功能需求的第二代码段；具体包括：根据所述功能需求中包括的属性参数，从所述组件库中获取所述属性参数的第二组件关键字，根据所述第二组件关键字获取用于实现所述功能需求的第二代码段；其中，在多个不同的待构建组件包括相同的功能需求时，所述多个不同的待构建组件的第二代码段相同；

所述输入输出模块，还被配置为将所述第一代码段自动填入第一预设区域，以及将所述第二代码段自动填入第二预设区域；

其中，所述第一预设区域和所述第二预设区域为编译软件的预设区域。

7.根据权利要求6所述的组件构建装置，其中，所述预先生成的组件库至少包括点击类型组件、确认类型组件、浮层弹出框/抽屉类型组件、浮层弹出框/抽屉表单提交类型组件、禁用类型组件、路由跳转类型组件或加载类型组件；

其中，所述预先生成的组件库中预先存储每一组件与对应的关键字映射关系，且预先存储每一组件对应的显示控制代码段和/或逻辑控制代码段。

8.根据权利要求6或7所述的组件构建装置，所述输入输出模块还被配置为通过以下方式将第二代码段自动填入第二预设区域：

若所述功能需求为二次确认需求，则从所述预先生成的组件库中，匹配获取与所述二次确认需求对应的第二代码段，并将所述第二代码段自动填入包裹所述待构建组件的代码段的第二预设区域；

若所述功能需求为跳转需求，则从所述预先生成的组件库中，匹配获取与所述跳转需求对应的第二代码段，并将所述第二代码段自动填入在执行时，排序在所述待构建组件的代码段之前的第二预设区域。

9.根据权利要求8所述的组件构建装置，其中，所述处理模块还被配置为通过以下方式从预先生成的组件库中，匹配获取所述第一代码段或第二代码段：

若所述显示需求或功能需求中，包括符合预设阈值的属性参数和/或类型参数，则从预先生成的组件库中，匹配获取所述第一代码段或第二代码段。

10.根据权利要求8所述的组件构建装置，其中，所述属性参数包括动作属性参数，在所述待构建组件构建完成后，执行所述待构建组件时，根据所述动作属性参数将所述 待构建组件刷新关联组件。

11.一种计算机可读存储介质，其包括指令，当其在计算机上运行时，使得计算机执行如权利要求1-5中任一项所述的方法。

12.一种计算设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如权利要求1-5中任一项所述的方法。

Images