CN107066240A - 组件功能的实现方法和装置 - Google Patents

Abstract

本申请提供一种组件功能的实现方法，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述方法包括：在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。通过本申请的技术方案，简化了内层组件代码的生成和维护，极大的提高了开发效率。

Description

组件功能的实现方法和装置

技术领域

本申请涉及软件技术领域，尤其涉及一种组件功能的实现方法和装置。

背景技术

用户在使用各种网络应用时，经常需要在用户设备的客户端或浏览器页面中输入指定的信息，以便服务提供商能够完成对用户的服务。通常服务提供商采用表单的形式来收集用户的信息。

在一些应用场景中，当用户依照表单显示的项目完成输入后，运行在用户设备上的客户端或浏览器会对用户的输入进行校验，看是否符合服务提供商为该表单项设定的输入类型。例如，当某个表单项请用户输入手机号码时，在用户完成输入时，会检查用户输入的是否是11位数字，如果不是，则播放提示音并在该表单栏后显示输入错误，以告知用户输入的手机号码需要修改。

对用户输入的采集和校验通常由客户端或网页代码中的表单组件来完成。现有技术中，开发人员采用命令式的编程方式来实现输入校验，即在表单组件的代码中写入对输入内容进行校验的具体判断过程。这种方式在代码的生成和维护上都需要花费较多的时间和精力，例如，在生成代码时要分别针对每个表单项来分别编码程序；再如，当修改表单项的输入类型时，要重复校验该表单项输入内容的语句编写和程度调试过程，难以达到理想的开发效率。

发明内容

有鉴于此，本申请提供一种组件功能的实现方法，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述方法包括：

在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；

在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；

在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。

本申请还提供了一种组件功能的实现装置，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述装置包括：

属性值传递单元，用于在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；

事件信息传递单元，用于在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；

组件功能运行单元，用于在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。

由以上技术方案可见，本申请的实施例中，在外层组件中以声明式编程方式规定组件功能的可配置功能属性，由内层组件中确定可配置功能属性的具体属性值；在外层组件收到内层组件与该功能相关的事件信息后，按照事件信息、可配置功能属性的属性值来运行相应的功能；这样，功能的具体实现采用声明式编程在外层组件中实现，在内层组件中只需确定可配置功能属性的属性值、收集并传递与功能相关的事件信息，即可实现功能的运行；外层组件能够复用于用于多个内层组件，并且在内层组件的功能变化时只要修改属性值和收集的事件信息即可，简化了内层组件代码的生成和维护，极大的提高了开发效率。

附图说明

图1是本申请实施例中一种组件功能的实现方法的流程图；

图2是本申请实施例所运行的设备的一种硬件结构图；

图3是本申请实施例中一种组件功能的实现装置的逻辑结构图。

具体实施方式

本申请的实施例提出一种新的组件功能的实现方法，以提供某项功能的组件为内层组件，在其上封装外层组件，在外层组件中规定功能的可配置功能属性并采用声明式编程实现由可配置功能属性可能属性值确定的功能；这样在内层组件中确定可配置功能属性的具体属性值、收集与功能相关的事件信息并传递给外层组件后，即可由外层组件实现对应的功能，使得内层组件的编程实现和代码维护得以简化，同时外层组件可以通用于要实现类似功能的内层组件，从而解决现有技术中存在的问题。

本申请的实施例可以应用在任何具有计算和存储能力的设备上，例如可以是手机、平板电脑、PC(Personal Computer，个人电脑)、笔记本、服务器、虚拟机等物理设备或逻辑设备；也可以由两个或两个以上分担不同职责的物理或逻辑设备、相互协同来实现本申请实施例中的各项功能。

本申请的实施例中，以要实现某项或某些项功能的组件为内层组件，创建外层组件来封装该内层组件。在外层组件中采用声明式语法定义该外层组件支持的每种组件功能的可配置功能属性，并且在外层组件中实现支持上述所有可配置功能属性的各种属性值的功能。

也就是说，抽象化(能够通用于所有属性值)的功能在外层组件中采用声明式编程方式实现；内层组件可以在外层组件中对可配置功能属性的定义范围内，通过指定可配置功能属性的属性值来将实现的功能的具体化(以适用于该内层组件服务的应用场景)，并将其指定的属性值传递给外层组件。其中，外层组件中一项到多项功能的可配置功能属性的定义范围可以包括外层组件支持哪些功能、每项功能的可配置功能属性有哪些，此外还可以包括允许每个可配置功能属性的取值范围是什么等等。

将哪些功能属性作为某项功能的可配置功能属性可以根据该项功能的特点、外层组件要支持的内层组件的应用场景类型等因素来确定，本申请的实施例不做限定。例如，对于表单组件的用户输入校验功能，可以将输入类型作为可配置功能属性，在内层组件中指定表单项的输入类型后，在外层组件中校验用户的输入内容是否符合该指定的输入类型；再如，对于页面组件的图标移动功能，可以将当前页面上的图标及其排列方式作为可配置功能属性，由内层组件将当前页面上的图标排列传递给外层组件，以便外层组件按照根据用户对图标的移动操作来重新排列页面上的图标。

此外，可以根据组件运行的硬件和软件系统环境、采用的编程语言等因素来确定组件封装的具体方式、和内层组件向外层组件传递属性值的具体方式。通常都可以采用现有技术中编程语言和开发框架提供的工具，例如，在JavaScript语言中，可以采用高阶组件的方式来进行内层组件的封装(即外层组件是内层组件的高阶组件)，采用ES2015(European Computer Manufacturers Association Script 2015，由欧洲计算机制造商协会制定的标准化脚本语言的2015版本)中的解构运算符来进行属性值的传递。

本申请的实施例中，组件功能的实现方法的流程如图1所示，该方法应用在组件运行的设备上。

步骤110，在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件。

根据应用场景的具体实现、功能的特点和可配置功能属性的特点等因素，内层组件可以采用各种方式获得可配置功能属性的属性值。例如，可以由开发人员将属性值写入代码，内层组件在运行过程中即可得到属性值；内层组件可以读取预定存储位置的配置文件来获得某项功能的可配置功能属性的属性值；内层组件也可以基于已知参数或已知对象，计算出某项功能的可配置功能属性的属性值；等等。

在得到要实现功能的可配置功能属性的具体属性值后，内层组件将这些属性值传递给外层组件。

步骤120，在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件。

步骤130，在外层组件中基于事件信息、运行由可配置功能属性的属性值确定的功能。

内层组件对与要实现的功能相关的事件进行监听，并在监听到相关事件发生时，收集事件信息。

与某项功能相关的事件包括启动该项功能、运行作为该项功能组成部分的某个处理过程、结束该项功能等的事件；事件可以由用户操作引发，也可以由其他组件的运行过程引发，还可以由所在设备的硬件或软件状态引发；本申请的实施例对事件的类型及来源均不做限定。

在内层组件中收集的事件信息包括外层组件完成由可配置功能属性的具体属性值确定的功能所需的所有事件信息，可根据功能的类型和内层组件的应用场景来确定。例如，对一些所在设备的硬件或软件状态引发的事件，事件信息可以仅包括事件本身(如所在设备处于极低电量状态)；再如，对一些只支持单一事件的应用场合，事件信息可以只包括事件参数；又如，对一些用户操作引发的事件，事件信息可以包括事件本身和事件参数(如移动图标的操作事件，以及移动前和移动后的图标位置)。

内层组件可以自行对与某项功能相关的事件进行监听并收集事件信息，也可以调用其他组件、函数或过程来监听并收集事件信息，不做限定。事件监听和事件信息收集可以参照现有技术实现，不再赘述。

内层组件完成事件信息的收集后，将事件信息传递给外层组件。在外层组件中采用事件信息，运行由可配置功能属性的属性值确定的对该事件的处理过程，从而实现由步骤110中传递的属性值具体化的功能。

可以根据内层组件和外层组件运行的硬件和软件系统环境、采用的编程语言、具体实现等因素来确定内层组件向外层组件传递事件信息的方式，本申请的实施例不做限定。

例如，外层组件可以为与某项功能相关的事件信息设置状态，当内层组件在监听到与该项功能相关的事件后，收集事件信息，并根据事件信息更新外层组件中该事件信息的状态；当外层组件检测到该项功能的事件信息状态发生更新时，根据更新后的状态运行由可配置功能属性的属性值确定的功能；事件信息的状态中包括该事件信息中所有变量(包括所发生的事件和事件参数)的更新值。在一些应用场景中，外层组件可能需要在运行相应的功能后重置事件信息的状态，以便对下一次的状态更新进行处理。

外层组件中运行运行由可配置功能属性的属性值确定的功能的具体实现可根据事件信息和功能类型，采用声明式编程方式参照现有技术实现。在事件信息包括所发生的事件和/或事件参数的应用场景中，可以在外层组件中根据所发生的事件、或所发生事件的事件信息、或所发生的事件及其事件参数，运行由可配置功能属性的属性值确定的功能。

以内层组件中要实现的功能为校验用户在表单域中的输入是否符合指定输入类型为例，外层组件提供的可配置功能属性包括表单域的输入类型和错误提示信息；内层组件中指定某个表单项的输入类型和错误提示信息后，传递给外层组件；内层组件调用操作系统提供的函数对用户在表单项中的输入进行监听，当用户完成输入后，将操作系统从该表单项中接收的输入信息传递给外层组件；在外层组件收到该表单项的输入信息后，校验输入信息是否符合内层组件为该表单项指定的输入类型；如果不符合，显示内层组件指定的错误提示信息；如果符合并且已经显示了内层组件指定的错误提示信息，说明用户将以前输入的不符合要求的输入信息修改到已经符合要求，则清除对错误提示信息的显示。

可见，本申请的实施例中，以提供某项功能的组件为内层组件封装外层组件，在外层组件中以声明式编程方式规定该项功能的可配置功能属性，由内层组件中确定可配置功能属性的具体属性值并收集与功能相关的事件信息，由外层组件按照事件信息、可配置功能属性的属性值来实现相应的功能；从而使得外层组件能够复用于用于多个内层组件，同时使得内层组件的编程实现和代码维护得以简化，在内层组件的功能变化时只要修改属性值和收集的事件信息即可，提高了开发效率。

在本申请的一个应用示例中，采用JavaScript语言的表单组件中的一个表单输入项为邮箱地址，希望实现对用户的输入内容是否是邮箱地址进行校验的功能。

采用React(由Facebook开发的JavaScript库)高阶组件的方式，在表单组件上封装外层组件，该外层组件为一个新的表单组件，其使用方式与原来的表单组件完全一样。为叙述方面，以下称原来的表单组件为内层表单组件，封装的高阶组件为外层表单组件。

在外层表单组件中，定义了输入校验功能的可配置功能属性，包括是否必须、必须时的提示信息、输入类型、输入错误时的提示信息，并且采用声明式编程方式实现了校验用户是否输入了必须表单项、在为输入必须表单项时显示必须时的提示信息、输入内容是否符合输入类型的功能、在输入内容不符合输入类型时显示输入错误时的提示信息的功能。

外层表单组件通过组件属性将其支持的输入校验功能的可配置功能属性传递给内层表单组件。在内层组件中将函数调用集成到表单域的声明过程中，在函数中指定可配置功能属性的具体属性值，并通过ES2015提供的解构运算符“…”将该函数的返回值解构并传给外层表单组件。

在一个例子中，内层表单组件通过以下代码实现指定可配置功能属性的属性值，并将属性值回传给外层表单组件：

上述代码中，EnhancedRegisterForm为外层表单组件，RegisterForm为内层表单组件。EnhancedRegisterForm通过组件属性把`form`传递给内部的RegisterForm；在`form`中采用声明式语法定义了表单的可配置功能属性，指定该表单项为必须、输入类型为邮箱地址以及在输入信息不符合上述要求时的显示信息。在RegisterForm内使用`this.props.form.getFieldProps`，来将函数getFieldProps解构后的返回值传递给外层表单组件。

外层表单组件为该表单项的输入信息设置状态参数。内层表单组件监听表单域的事件，在该表单项的输入信息发生变化时，收集变化后的该表单项输入信息，并更新到外层表单组件设置的输入信息状态参数中。

外层表单组件从状态参数中读取更新后的该表单项输入信息，根据该输入信息是否为空、是否符合指定输入类型来确定是否显示、显示哪个提示信息。仍以上述代码为例，如果该输入信息为空，则显示“请填写邮箱”；如果该输入信息不为空并且输入信息符合邮箱地址的格式，则显示“邮箱格式不正确”；如果该输入信息不为空、符合邮箱地址的格式并且已经显示有“邮箱格式不正确”，则清除对“邮箱格式不正确”的显示。

可见，当内层表单组件的该表单项发生变化，例如不再填写邮箱地址而是改为手机号码时，只需将内层表单组件的指定可配置功能属性做对应的修改即可，而无需重新编写该表单项的具体校验过程代码。

与上述流程实现对应，本申请的实施例还提供了一种组件功能的实现装置。该装置可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为逻辑意义上的装置，是通过所在设备的CPU(Central Process Unit，中央处理器)将对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，除了图2所示的CPU、内存以及非易失性存储器之外，组件功能的实现装置所在的设备通常还包括用于进行无线信号收发的芯片等其他硬件，和/或用于实现网络通信功能的板卡等其他硬件。

图3所示为本申请实施例提供的一种组件功能的实现装置，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述装置包括属性值传递单元、事件信息传递单元和组件功能运行单元，其中：属性值传递单元用于在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；事件信息传递单元用于在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；组件功能运行单元用于在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。

可选的，所述事件信息传递单元具体用于：在监听到与所述功能相关的事件后，由内层组件收集事件信息并根据事件信息更新外层组件的状态；所述组件功能运行单元具体用于：在外层组件的状态发生更新时，根据更新后的状态运行由可配置功能属性的属性值确定的功能。

可选的，所述事件信息包括：所发生的事件和/或事件参数；所述组件功能运行单元具体用于：在外层组件中根据所发生的事件、所发生事件的时间参数、或所发生的事件及其时间参数运行由可配置功能属性的属性值确定的功能。

可选的，所述外层组件为内层组件的高阶组件。

可选的，所述可配置功能属性包括：表单域的输入类型和错误提示信息；所述事件信息包括：从所述表单域接收的输入信息；所述组件功能运行单元具体用于：在外层组件中校验所述输入信息是否符合所述输入类型，并且在不符合所述输入类型时显示所述错误提示信息、以及在符合所述输入类型并且已经显示所述错误提示信息时清除显示。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (10)

1.一种组件功能的实现方法，其特征在于，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述方法包括：

在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；

在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；

在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。

2.根据权利要求1所述的方法，其特征在于，所述在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件，包括：在监听到与所述功能相关的事件后，由内层组件收集事件信息并根据事件信息更新外层组件的状态；

所述在外层组件中基于事件信息、运行由可配置功能属性的属性值确定的功能，包括：在外层组件的状态发生更新时，根据更新后的状态运行由可配置功能属性的属性值确定的功能。

3.根据权利要求1所述的方法，其特征在于，所述事件信息包括：所发生的事件及事件参数；

所述在外层组件中基于事件信息、运行由可配置功能属性的属性值确定的功能，包括：在外层组件中根据所发生的事件，按照事件参数运行由可配置功能属性的属性值确定的功能。

4.根据权利要求1所述的方法，其特征在于，所述外层组件为内层组件的高阶组件。

5.根据权利要求1至4任意一项所述的方法，其特征在于，所述可配置功能属性包括：表单域的输入类型和错误提示信息；

所述事件信息包括：从所述表单域接收的输入信息；

所述在外层组件中基于事件信息、运行由可配置功能属性的属性值确定的功能，包括：在外层组件中校验所述输入信息是否符合所述输入类型，并且在不符合所述输入类型时显示所述错误提示信息、以及在符合所述输入类型并且已经显示所述错误提示信息时清除显示。

6.一种组件功能的实现装置，其特征在于，所述组件为封装有外层组件的内层组件，所述外层组件中包括采用声明式语法描述的所述功能的可配置功能属性；所述装置包括：

属性值传递单元，用于在内层组件中获取所述可配置功能属性的属性值，并传递给外层组件；

事件信息传递单元，用于在监听到与所述功能相关的事件后，由内层组件收集事件信息并将事件信息传递给外层组件；

组件功能运行单元，用于在外层组件中基于所述事件信息、运行由可配置功能属性的属性值确定的功能。

7.根据权利要求6所述的装置，其特征在于，所述事件信息传递单元具体用于：在监听到与所述功能相关的事件后，由内层组件收集事件信息并根据事件信息更新外层组件的状态；

所述组件功能运行单元具体用于：在外层组件的状态发生更新时，根据更新后的状态运行由可配置功能属性的属性值确定的功能。

8.根据权利要求6所述的装置，其特征在于，所述事件信息包括：所发生的事件和/或事件参数；

所述组件功能运行单元具体用于：在外层组件中根据所发生的事件、所发生事件的时间参数、或所发生的事件及其时间参数运行由可配置功能属性的属性值确定的功能。

9.根据权利要求6所述的装置，其特征在于，所述外层组件为内层组件的高阶组件。

10.根据权利要求6至9任意一项所述的装置，其特征在于，所述可配置功能属性包括：表单域的输入类型和错误提示信息；

所述事件信息包括：从所述表单域接收的输入信息；

所述组件功能运行单元具体用于：在外层组件中校验所述输入信息是否符合所述输入类型，并且在不符合所述输入类型时显示所述错误提示信息、以及在符合所述输入类型并且已经显示所述错误提示信息时清除显示。