CN111736835A - 一种表单处理的方法、装置及存储介质 - Google Patents

Abstract

本申请实施例提供一种表单处理的方法、装置及存储介质，所述方法包括：获取第一输入信息，所述第一输入信息为所述用户在表现层中对目标表单中的第一表单项输入的信息；通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；通过所述行为层将所述第一输入信息传入数据层；在所述数据层，根据所述第一输入信息对所述目标表单进行更新。本方案能够编码的复杂度，提高编码效率且易于维护和扩展。

Description

一种表单处理的方法、装置及存储介质

技术领域

本申请实施例涉及云技术领域，尤其涉及一种表单处理的方法、装置及存储介质。

背景技术

在表单系统中通常涉及表单的创建、更新、注册、登录等场景。一般情况下，表单系统采用MVVM框架能够分离数据和用户界面(user interface，UI)，由于表单数据都存储在表单的html元素中，所以在处理表单的层面上，依然在使用传统的方式，即逐项进行编码处理。在更高一级，则只会对表单的表现层进行封装后形成表单生成器。

在对现有技术的研究和实践过程中，本申请实施例的发明人发现，在针对大型表单的场景(例如大型、分步式表单的场景)时，基于MVVM框架的表单系统在事件处理和数据传递方面仍然没有进行很好的处理，因此导致在这些大型表单场景下，处理表单时的需要复杂的编程工作，冗余代码较多且局限性较大。

发明内容

本申请实施例提供了一种表单处理的方法、装置及存储介质，能够能够编码的复杂度，提高编码效率且易于维护和扩展。

第一方面中，本申请实施例提供一种表单处理的方法，所述方法包括：

获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；

通过所述行为层将所述第一输入信息传入数据层；

在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

一些实施方式中，所述通过行为层将所述第一输入信息传入数据层之前，所述方法还包括：

确定所述表现层中的至少一个第一表单项，所述第一表单项为自定义表单项、或分步式表单项或规模大于预设规模的表单项中的至少一项；

在所述表现层，分别将各第一表单项转换为对应的受控组件。

一些实施方式中，所述在所述表现层，分别将各第一表单项转换为对应的受控组件，包括：

将所述第一表单项转换为受控组件；

通过所述受控组件渲染至少一个表单操作的网页元素，并为所述网页元素设置回调函数的监听事件；

在所述受控组件中设置内部值；

向所述受控组件中输入初始值，根据默认值和所述初始值更新所述内部值，通过所述受控组件对至少一个表单操作的网页元素进行渲染，以使所述受控组件生效。

一些实施方式中，所述为所述网页元素设置回调函数的监听事件之后，所述方法还包括：

当所述第一输入信息触发网页元素的第一监听事件时，将基于所述监听事件获取的所述第一输入信息更新到所述内部值中，并触发所述回调函数，以将更新后的所述内部值作为所述回调函数的参数输出至所述行为层。

一些实施方式中，当所述数据层中的所述目标表单发生变化时，所述方法还包括：

在所述数据层，根据所述目标表单的状态值以更新所述第一表单项，并对所述目标表单进行重新渲染，以更新目标受控组件中的初始值；

在所述行为层，从所述数据层获取重新渲染后的所述目标表单，并通过所述目标受控组件传入所述表现层；

在所述表现层，通过所述目标受控组件对重新渲染后的所述目标表单进行数据展示。

一些实施方式中，所述获取第一输入信息之前，所述方法还包括：

获取初始表单和初始表单的状态值；

接收到对所述初始表单的编辑指令后，在所述数据层，向Provide组件输入第一初始值；

通过所述Provide组件将所述第一初始值初始化为所述状态值，以得到所述目标表单，并通过内容实例将所述目标表单传入所述行为层；

通过所述行为层将所述目标表单传入所述表现层，以在所述表现层进行可视化展示。

一些实施方式中，在所述行为层，从所述数据层获取与目标受控组件名称对应的第一表单数据，将所述第一表单数据作为实时值，以及从所述表现层获取所述目标表单的第二表单数据；

将所述实时值、默认值和所述第二表单数据添加到入参对象中，并将所述入参对象输入所述表现层。

一些实施方式中，所述在所述行为层，从所述数据层获取与目标受控组件名称对应的第一表单数据，包括：

根据所述第一输入信息确定目标受控组件名称；

从所述数据层中获取与所述目标受控组件名称对应的所述第一表单数据，将所述第一表单数据作为实时值；

若确定数据层中目标表单的数据与表现层中所述目标表单的数据在内容上不一致，则调用数据解析组件将所述目标表单对应的实时值进行数据变换，得到所述第一表单数据。

一些实施方式中，所述从所述表现层获取所述第二表单数据，包括：

在所述行为层，通过行为包裹组件监听所述表现层的数据变化；

若监听到所述表现层的所述目标表单中发生变化的第一表单数据符合预设监听事件，则拦截符合所述预设监听事件的行为；

从所述表现层获取所述第二表单数据，并触发在第一时长内监听用户在所述表现层的输入事件的行为。

一些实施方式中，所述行为层包括封装组件，所述数据层包括分发组件，所述方法还包括：

在所述行为层中，通过所述封装组件将所述表现层中的至少一个组件进行封装；以及监听所述目标表单中的表单项是否发生数据变化；

当所述目标表单中发生数据变化的第一表单项符合至少一种预设监听事件时，在所述行为层中，通过所述分发组件拦截所述表现层中发生变化的第一表单项并传入所述数据层，以触发对所述目标表单的状态值的更新。

一些实施方式中，所述方法还包括：

在所述数据层，根据所述目标受控组件的组件标识获取所述目标受控组件的表单数据；

将所述目标受控组件的表单数据作为实时值和默认值传入所述行为层；

在所述行为层，通过分发组件将所述目标受控组件的表单数据传入所述表现层，以更新所述表现层中的目标表单。

一些实施方式中，所述数据层还包括状态组件和内容组件，所述方法还包括：

在所述数据层，通过所述状态组件保存所述第二表单数据；

若所述第二表单数据在所述数据层中发生变化，则在所述数据层中，通过所述内容组件将发生变化后的所述第二表单数据通过所述行为层输入所述表现层。

第二方面中，本申请实施例提供一种表单处理装置，具有实现对应于上述第一方面提供的表单处理的方法的功能。所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块，所述模块可以是软件和/或硬件。

一种可能的设计中，所述表单处理装置包括：

获取模块，用于获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

输入输出模块，用于通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；

通过所述行为层将所述第一输入信息传入数据层；

处理模块，用于在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

本申请实施例又一方面提供了一种表单处理装置，其包括至少一个连接的处理器、存储器和收发器，其中，所述存储器用于存储计算机程序，所述处理器用于调用所述存储器中的计算机程序来执行上述各方面所述的方法。

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

根据本申请的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述第一方面、第二方面或者第三方面的各种可能的设计中提供的方法。

相较于现有技术，本申请实施例提供的方案中，由于获取的第一输入信息为用户在所述表现层中对目标表单中的第一表单项输入的信息，而该第一表单项与目标受控组件关联，因此，能够利用目标受控组件的受控特性去更新目标表单。由于通过将表单系统从逻辑上划分为表现层、行为层和逻辑层，由行为层桥接表现层与数据层之间的数据交互，因此，当不同的表单有不同的事件需要处理，或者传入不同的数据时，可以仅仅在行为层对这些事件或数据进行处理，而不用修改表现层，因此，能够做到对行为层的分离和解耦，以及有效减少表单编写的复杂度，并且简单、易于维护。

附图说明

图1a为本申请实施例中React框架的一种架构示意图示意图；

图1b为本申请实施例中获取数据的react hook封装的一种代码示意图；

图1c为本申请实施例中获取dispatch组件的react hook封装一种代码示意图；

图2a为本申请实施例中封装后的FormInput组件的一种结构示意图；

图2b为本申请实施例中下拉框的一种示意图；

图3a为本申请实施例中数据层编辑表单的一种流程示意图；

图3b为本申请实施例中向Provider组件中传入初始表单的初始值的一种代码示意图；

图4a为本申请实施例中表单处理的方法的一种流程示意图；

图4b为本申请实施例中BehaviorWrapper函数的一种结构示意图；

图4c为本申请实施例中BehaviorWrapper组件的一种结构示意图；

图5a为本申请实施例中双下拉框的一种界面示意图；

图5b为本申请实施例中实现对象在表现层显示的一种代码示意图；

图5c为本申请实施例中使用valueFormat进行格式转换的一种示意图；

图5d为本申请实施例中使用valueParse将字符串转换成对象的一种示意图；

图6为本申请实施例中表单处理的方法的一种流程示意图；

图7为本申请实施例中传统表单处理与本申请处理表单的效果对比示意图；

图8为本申请实施例中表单处理装置的一种结构示意图；

图9为本申请实施例中执行表单处理的方法的实体设备的一种结构示意图；

图10为本申请实施例中服务器的一种结构示意图。

具体实施方式

本申请实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请实施例中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式，例如多个模块可以结合成或集成在另一个系统中，或一些特征可以忽略，或不执行，另外，所显示的或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，模块之间的间接耦合或通信连接可以是电性或其他类似的形式，本申请实施例中均不作限定。并且，作为分离部件说明的模块或子模块可以是也可以不是物理上的分离，可以是也可以不是物理模块，或者可以分布到多个电路模块中，可以根据实际的需要选择其中的部分或全部模块来实现本申请实施例方案的目的。

本申请实施例供了一种表单处理的方法、装置及存储介质，可用于登录表单、注册表单等场景，该方法可用于服务器或终端。本申请实施例仅以服务器为例，服务器侧部署了表单处理装置，能够实现表单处理装置全部或部分、相同或相似的功能。

本申请实施例中的表单系统可基于React框架实现，图1a为React框架的一种架构示意图，图1a中的箭头代表数据的流动方向，首先用户在界面上输入内容，内容流动到数据层之后，经过行为层处理后存储到数据层中。当页面刷新或者其他原因导致表单需要重新渲染，数据则从数据层中流转到行为层，再输出到表现层中，并展现给用户。一些实施方式中，可将表单系统从逻辑上进行分层，例如分为表现层、行为层和数据层。下面分别进行说明。

一、表现层

表现层为展现给用户的一个个表单组件，在表现层中会接收用户的输入。

二、行为层

行为层用于对数据层和表现层起到承接的作用，行为层获取数据层的数据传递给表现层；同时，行为层也接收表现层中用户的输入，并存储到数据层中。行为层由一个HOC函数构成，可以根据不同场景有不同的实现。一些实施方式中，在行为层，使用HOC特性将表现层的各个受控组件进行增强，在HOC函数中，可将行为层的HOC函数命名为BehaviorWrapper函数，该BehaviorWrapper函数中可定义一个新的组件(命名为：BehaviorWrapper)，新BehaviorWrapper组件对表现层中的受控组件的事件(如：onChange、onInput等，也可以是自定义的事件)进行拦截监听，监听到事件则会将数据存储到数据层，让数据层保持数据的唯一性。同时BehaviorWrapper组件也接收来自数据层的数据作为输入，根据不同组件(用name或key值标记)将数据传入表现层。图4b为本申请实施例中BehaviorWrapper函数的一种结构示意图，图4c为本申请实施例中BehaviorWrapper组件的一种结构示意图，本申请实施例不对BehaviorWrapper函数、BehaviorWrapper组件的结构图作限定。

三、数据层

数据层用于存储用户的输入，以及确保数据的唯一性。数据层接收来自“行为层”的数据，并在数据发生变化时，及时地将数据经“行为层”传递给“表现层”，并展现出来。数据层，使用React组件的state来存储数据；传递数据则使用Context，Context传递数据有一个好处就是可以将数据不受组件层级的限制往子组件传递。

(1)使用React.CreateContext()函数创建Context实例

(2)定义Provider组件

Provider组件使用state存储数据，然后通过Context往子组件传递。此外，我们还定义触发state更改的dispatch组件，同样也通过Context往子组件传递。如此在行为层中就可以获取到dispatch组件，用于将拦截到的表现层的数据存储到数据层中。Provider使用时需要放在所有表现层组件的顶层，以保证行为层和表现层组件将获取到来自数据层的数据和dispatch组件。

Provider组件接收children、initialValue这两个参数：

children:children就是其包裹的所有子组件。

initialValue:initialValue是表单的初始值，在编辑表单时使用。initialValue是表单的初始值，在编辑表单时传入，存储到“数据层”的Provider中，Provider接收到initialValue后会将initialValue初始化为state。初始化state之后，数据会通过“行为层”传递到“表现层”将数据展现出来。

一些实施方式中，对于数据层而言，可将Provider组件放在行为层组件的顶部，以及使用behaviorWrapper组件对FormInput进行封装。

在使用behaviorWrapper组件对FormInput进行封装前，需要引入表现层的FormInput组件和行为层的behaviorWrapper组件，然后用behaviorWrapper对FormInput组件进行增强处理，得到一个新组件(名称为：BehaviorWrapper(FormInput))，新组件在具备表现层的功能外，还兼具行为层的能力，经过增强后的新组件就可以直接渲染在表单界面上。

(3)dispatch组件

dispatch组件的参数为一个对象，key值为payload，需要存储在数据层中的数据都放在payload中传入，格式形如{name:‘name1’,value:‘value1’}。而name可能会有“.”分隔，代表其数据层级，需要切分处理。

另外setStore使用回调的方式存储数据，是为了在密集地触发数据存储时仍然能保证数据的唯一性。

(4)获取数据的react hook封装

一些实施方式中，可采用如图1b所示的代码获取数据的react hook封装。

(5)获取dispatch组件的react hook封装

一些实施方式中，可采用如图1c所示的代码获取dispatch组件的react hook封装。

在本申请实施例中，React框架具备受控特性和高阶组件(Higher OrderComponent，HOC)特性。其中，HOC是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，而是一种基于React的组合特性而形成的设计模式。HOC是参数为组件，返回值为新组件的函数。高阶组件是将组件转换为另一个组件。HOC通过将组件包装在容器组件中来组成新组件。也可将HOC看作参数化容器组件。

HOC可为表现层中的组件添加特性，例如添加受控特性，HOC返回的组件与原组件保持类似的接口。HOC还可将入参(props)即传入数据透传给被包装组件即受控组件，将props传递给处理渲染用户界面(User Interface，UI)。

组件是将props转换为UI，组件是React中代码复用的基本单元，组件为元素构成。组件接受任意的props，并返回用于描述页面展示内容的React元素。一个React元素代表某个特定时刻的UI。因此要更新UI时，需要创建一个新元素，然后将该新元素传入ReactDOM.render()，通过回调函数setInterval()调用ReactDOM.render()，以更新已渲染的React元素，可将一个React元素渲染为DOM。

当React元素为自定义组件时，则是将JSX所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件，可将该对象称为props。

在React中，由于在表单元素上设置了value属性，可变状态(mutable state)通常保存在组件的state属性中，并且只能通过使用setState()来更新。因此，显示的value将始终为this.state.value，使得React的state成为唯一数据源。例如，每次用户在表单中输入时都会执行并更新React的state，因此显示的value将随着用户输入而更新。渲染表单的React组件还控制着用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素则称作受控组件。例如，想让前一个示例在提交时打印出名称，那可将表单写为受控组件。因此，当数据层的数据源发生变化时，可调用setState函数来更新state，setState函数接收一个新的state值并将组件的一次重新渲染加入队列。state允许React组件随用户操作、网络响应或者其他变化而动态更改输出内容。

对于受控组件来说，输入的值始终由React的state驱动。可以将value传递给其他UI元素，或者通过其他事件处理函数重置。

其中，需要特别说明的是，本申请实施例本申请实施例涉及云技术(Cloudtechnology)中的云计算、云存储、数据库、数据库管理系统以及大数据等技术，具体通过如下实施例进行说明：

其中，云技术(Cloud technology)基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。

云计算(cloud computing)指IT基础设施的交付和使用模式，指通过网络以按需、易扩展的方式获得所需资源；广义云计算指服务的交付和使用模式，指通过网络以按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关，也可是其他服务。云计算是网格计算(Grid Computing)、分布式计算(Distributed Computing)、并行计算(Parallel Computing)、效用计算(Utility Computing)、网络存储(Network StorageTechnologies)、虚拟化(Virtualization)、负载均衡(Load Balance)等传统计算机和网络技术发展融合的产物。

云存储(cloud storage)是在云计算概念上延伸和发展出来的一个新的概念，分布式云存储系统(以下简称存储系统)是指通过集群应用、网格技术以及分布存储文件系统等功能，将网络中大量各种不同类型的存储设备(存储设备也称之为存储节点)通过应用软件或应用接口集合起来协同工作，共同对外提供数据存储和业务访问功能的一个存储系统。例如，第二终端可以对观众用户的用户数据进行存储、以及存储从服务端获取的关联关系进行云存储。

目前，存储系统的存储方法为：创建逻辑卷，在创建逻辑卷时，就为每个逻辑卷分配物理存储空间，该物理存储空间可能是某个存储设备或者某几个存储设备的磁盘组成。客户端在某一逻辑卷上存储数据，也就是将数据存储在文件系统上，文件系统将数据分成许多部分，每一部分是一个对象，对象不仅包含数据而且还包含数据标识(ID entity，ID)等额外的信息，文件系统将每个对象分别写入该逻辑卷的物理存储空间，且文件系统会记录每个对象的存储位置信息，从而当客户端请求访问数据时，文件系统能够根据每个对象的存储位置信息让客户端对数据进行访问。

数据库(Database)，简而言之可视为电子化的文件柜——存储电子文件的处所，用户可以对文件中的数据进行新增、查询、更新、删除等操作。所谓“数据库”是以一定方式储存在一起、能与多个用户共享、具有尽可能小的冗余度、与应用程序彼此独立的数据集合。例如，本申请实施例中第二终端对观众用户的用户数据进行存储、以及存储从服务端获取的关联关系。

数据库管理系统(Database Management System，DBMS)是为管理数据库而设计的电脑软件系统，一般具有存储、截取、安全保障、备份等基础功能。数据库管理系统可以依据它所支持的数据库模型来作分类，例如关系式、即可扩展标记语言(Extensible MarkupLanguage，XML)；或依据所支持的计算机类型来作分类，例如服务器群集、移动电话；或依据所用查询语言来作分类，例如结构化查询语言(Structured Query Language，SQL)、XQuery；或依据性能冲量重点来作分类，例如最大规模、最高运行速度；亦或其他的分类方式。不论使用哪种分类方式，一些DBMS能够跨类别，例如，同时支持多种查询语言。例如，本申请实施例中第二终端在收到主播用户的指令后，可从数据库管理系统查询观众用户的用户数据，以及从服务端获取的关联关系。

此外，本申请实施例涉及的服务器，可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

本申请实施例主要提供以下技术方案：

由于应用程序的UI是动态的，并会伴随着时间的推移而变化。因此，可将通过将表单系统划分为表现层、行为层和数据层，并将表单项封装为受控组件，并通过HOC函数对受控组件进行增强，则是对表单在“数据”、“行为”(或者事件)和“表现”(即UI)三个层面进行抽象分离，在保证表现层统一的情况下，对于数据层和行为层又能通过HOC函数来根据不同场景进行自由扩充。因此，由于通过将表单系统从逻辑上划分为表现层、行为层和逻辑层，由行为层桥接表现层与数据层之间的数据交互，因此，当不同的表单有不同的事件需要处理，或者传入不同的数据时，可以仅仅在行为层对这些事件或数据进行处理，而不用修改表现层，因此，能够做到对行为层的分离和解耦，以及有效减少表单编写的复杂度，并且简单、易于维护。

在介绍本申请实施例所提供的一种表单处理的方法之前，先介绍将表现层中的各表单项封装成受控组件的流程。具体来说，本申请实施例包括：

101、确定所述表现层中的至少一个第一表单项。

其中，所述第一表单项为自定义表单项、或分步式表单项或规模大于预设规模的表单项中的至少一项。例如，第一表单项可包括单/多行输入、下拉框、单选框、开关等表单项。

102、在所述表现层，分别将各第一表单项转换为对应的受控组件。

一些实施方式中，可采取封装的方式将各第一表单项转换为对应的受控组件。具体来说，通过利用受控特性将第一表单项封装为受控组件，这样就使得具备受控特性的第一表单项可以随意扩展。这样，在不同的表单中都可以引用这些第一表单项，例如在登录表单、注册表单等场景中的表单均可引用这些第一表单项，即在目标表单中可调用至少一个所述第一表单项。

本申请实施例中，通过将第一表单项封装为受控组件，能够将表单的数据实时存储到状态组件state中并将表单的数据派发到行为层，行为层也同样会将表单的数据传递到数据层中存储，这样表单的数据就跟着数据层中的数据一起更改，即受到数据层中数据的控制。

一些实施方式中，可通过下述操作分别将各第一表单项转换为对应的受控组件：

将所述第一表单项转换为受控组件；

通过所述受控组件渲染至少一个表单操作的网页元素，并为所述网页元素设置回调函数的监听事件；

在所述受控组件中设置内部值；

向所述受控组件中输入初始值，根据默认值和所述初始值更新所述内部值，通过所述受控组件对至少一个表单操作的网页元素进行渲染，以使所述受控组件生效。

其中，当表单操作为输入操作时，网页元素可为input元素。

以单行输入框为例介绍将单行输入框封装为受控组件的流程。封装得到受控组件可命名为：FormInput。下面对FormInput组件进行介绍：

(1)FormInput的输入：

defaultValue：输入框的默认值。

value：输入框的实时值。

onChange：当输入框发生变化时的回调函数，用于传递输入框的内容。

(2)FormInput的输出：

value：输入框中用户输入的内容，使用onChange进行传递。

(3)FormInput的受控实现：

a、FormInput组件渲染一个input html元素,并为该input html元素添加onChange监听事件；

b、在FormInput组件内部维护一个innerValue值,

当input元素的onChange事件触发时，将onChange事件接收到的用户输入内容更新到innerValue中，同时触发FormInput组件的输入中的onChange函数，将innerValue作为该onChange函数的参数传出；

c、在FormInput组件第一次渲染时，根据输入的value、defaultValue更新FormInput组件内部的innerValue值。

以上即完成对单行输入框进行受控特性的封装，具体封装后得到的FormInput组件的一种结构图可参考图2a。可将表现层中的所有需要封装成受控组件的表单项均做上述的处理，表现层中的其他需要利用受控特性的第一表单项可以参考对单行输入框的实施例，不做赘述。

本申请实施例中，经过封装的表现层的受控组件，可以放在不同的表单中，形成统一的表现层。如上面例子提到的FormInput组件的使用，在“登录界面填写用户名”的场景可以使用，而在“注册页面填写用户名、地址等信息”的场景也可以使用，只需要根据不同的场景传递不同的name参数即可。

可见，通过分层和将表单项封装为受控组件的方式，能够使得表单项具备具备受控组件的受控特性，这样便于表现层与数据层之间的数据交互、以及数据的一致性，将表现层与数据层完全隔离开。

在本申请实施例中，表现层中通过封装得到的受控组件可以放在不同的表单中，以形成统一的表现层。例如，上述FormInput组件被封装为受控组件后，就可以应用于、登录界面填写用户名、注册页面填写用户名或地址等信息等场景，只需要根据不同的场景传递不同的name参数即可。同理对于下拉框也可以封装，并命名成“FormSelect”，也可以适应不同的表单场景。下拉框的一种示意图可参考图2b。

在本申请实施例的一些实施例中，在数据层先新创建表单，然后将表单通过行为层传递至表现层，以在表现层对表单进行可视化展示。由于表单都有初始值且表单数据都存储在数据层中，因此，后续需要对该表单进行编辑时，在Provider组件中传入初始值initialValue即可对表单进行编辑。下面介绍在数据层编辑表单的流程，如图3a所示，本申请实施例包括：

201、获取初始表单的状态值。

其中，初始表单可为空白表单或者预先设置的模板表单，具体本申请实施例不作限定。

状态值是指React组件中的state当前所存储的表单数据。state中的表单数据为编辑表单所需的数据，即state包含数据层中的表单发生变化的数据。

202、接收到对所述初始表单的编辑指令后，在所述数据层，向Provide组件输入第一初始值。

其中，第一初始值为所述初始表单的初始值。

一些实施方式中，在数据层编辑初始表单时，向Provider组件中传入初始表单的初始值(initialValue)，具体可参考如图3b所示的一种代码来实现。

203、通过所述Provide组件将所述第一初始值初始化为状态值，以得到所述目标表单，并通过内容实例将所述目标表单传入所述行为层。

在编辑表单时，向Provider组件中传入初始表单的initialValue，并存储到Provider组件中，Provider组件接收到initialValue后，则将initialValue初始化为state。初始化为state之后，即得到了所述目标表单，然后将该目标表单的表单数据通过行为层传递到表现层，以在表现层将表单数据展现出来。

204、通过所述行为层将所述目标表单传入所述表现层，以在所述表现层进行可视化展示。

本申请实施例中，在编辑表单时，基于本申请实施例编辑表单时，由于对各第一表单项进行封装为受控组件，因此，无论对于表单的新建，还是编辑，都可以统一处理，不用再做区分，有效降低表单的复杂度，做到数据层、行为层和表现层的抽象分离。

在表现层对表单进行可视化展示后，用户在浏览表单的过程中，可能会向表单输入一些信息，因此，本申请实施例还提供一种表单处理的方法，下面主要从场景1和场景2来介绍。场景1主要针对表现层→行为层→数据层这个方向的数据流的处理。场景2主要针对数据层→行为层→表现层这个方向的数据流的处理

场景1中：以基于用户的输入信息来更新、同步表单数据为例，具体来说，如图4a所示，本申请实施例包括：

301、获取第一输入信息。

其中，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息。

302、通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层。

303、通过所述行为层将所述第一输入信息传入数据层。

一些实施方式中，所述行为层包括行为包裹组件，所述数据层包括dispatch组件。

行为层获取数据层的dispatch组件，将所述第一输入信息存储到dispatch组件的payload中，便于将从表现层拦截的第一输入信息存储到数据层中(即通过dispatch组件来触发state的更新)。其中，dispatch组件的参数为一个对象，key值为payload，需要存储在数据层中的数据都放在payload中传入，格式可为{name:‘name1’,value:‘value1’}。

304、在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

一些实施方式中，数据层基于React架构实现时，为了将数据传递到数据层中，行为层需要使用到数据层中定义的dispatch组件来处理拦截行为，以便将数据派发到数据层中。在React中，HTML表单元素通常会保持内部的state，使得表单具有默认的HTML表单行为，即在用户提交表单后浏览到新页面。因此，在React中执行相同的代码，能便于处理表单的提交，以及访问用户填写的表单数据。在通过受控组件实现时，当引入dispatch组件时，所述目标表单可存储于存储于数据层中的state中，若基于dispatch组件传递第一输入信息，则可通过dispatch组件来触发state的更新。具体来说，所述方法还包括：

在所述行为层中，通过所述行为包裹组件将所述表现层中的至少一个组件进行包裹；以及监听所述目标表单中的表单项是否发生数据变化；

当所述目标表单中发生数据变化的第一表单项符合至少一种预设监听事件时，在所述行为层中，通过所述dispatch组件拦截所述表现层中发生变化的第一表单项并传入所述数据层，以触发对所述目标表单的状态值的更新，即触发对react组件的state进行更新。

可见，由于在数据层与表现层之间抽离出一个行为层，当不同的表单有不同的事件需要处理，或者传入不同的数据时，可以仅仅对行为层进行处理，而不用修改表现层，做到分离和解耦。

一些实施方式中，在对所述目标表单进行更新时，还要考虑到表现层与数据层在数据格式上的不同，为提高数据更新的效率，可引入数据格式化函数valueFormat，valueFormat用于处理表现层和数据层数据格式之间的不同。valueFormat由使用者定义，参数是表现层传入的数据，返回值为存储在数据层的数据。valueFormat可以为空，则默认将表现层的数据不做任何处理就存储到数据层中。

一般情况下，如果数据层和表现层的数据格式是一致的，valueParse和valueFormat可以不设置。但是数据层的数据和表现层的数据存在格式不一致的场景下，则需要使用valueParse和valueFormat。下面以双下拉框为例，分别介绍valueParse和valueFormat的使用场景：

如图5a所示的表单项之双下拉框，其由两个下拉框组成，在数据层存储的数据是字符串，形如：

'{"key1":"value1","key2":"value2"}"'；

在表现层为了方便展现，则是一个对象(取key1的值value1显示在第一个下拉框中，取key2的值value2显示在第二个下拉框中)，实现代码如图5b所示。

当在行为层接收到表现层传递过来的数据时，数据时一个对象，但是数据层中存储的数据却是字符串，则使用valueFormat进行格式转换，可采用如图5c所示的代码实现使用valueFormat进行格式转换。

在行为层自动接收到数据层传递过来的数据时，发现数据是字符串，在传递给表现层之前，使用valueParse将字符串转换成对象，可采用如图5d所示的代码实现使用valueFormat进行格式转换。

与现有技术相比，本申请实施例中，由于获取的第一输入信息为用户在所述表现层中对目标表单中的第一表单项输入的信息，而该第一表单项与目标受控组件关联，因此，能够利用目标受控组件的受控特性去更新目标表单。由于通过将表单系统从逻辑上划分为表现层、行为层和逻辑层，由行为层桥接表现层与数据层之间的数据交互，因此，当不同的表单有不同的事件需要处理，或者传入不同的数据时，可以仅仅在行为层对这些事件或数据进行处理，而不用修改表现层，因此，能够做到对行为层的分离和解耦，以及有效减少表单编写的复杂度，并且简单、易于维护。

可选的，在本申请实施例的一些实施例中，在为所述网页元素设置回调函数的监听事件之后，所述方法还包括：

当所述第一输入信息触发网页元素的第一监听事件时，将基于所述监听事件获取的所述第一输入信息更新到所述内部值中，并触发所述回调函数，以将更新后的所述内部值作为所述回调函数的参数输出至所述行为层

例如，由于在FormInput组件内部维护了一个内部值(innerValue)，因此，当input元素的onChange事件触发时，将onChange事件接收到的用户输入的内容(例如上述第一输入信息)更新到innerValue中，同时触发FormInput组件的输入中的onChange函数，将innerValue作为该onChange函数的参数输出至所述行为层。

场景2中：以数据层中的数据发生变化(例如页面刷新或者其他原因导致表单重新渲染)时，更新、同步表单数据为例，具体来说，如图6所示，本申请实施例包括：

401、在所述数据层，根据所述目标表单的状态值以更新所述第一表单项。

402、对所述目标表单进行重新渲染，以更新目标受控组件中的初始值。

403、在所述行为层，从所述数据层获取重新渲染后的所述目标表单。

404、通过所述目标受控组件将重新渲染后的所述目标表单传入所述表现层。

405、在所述表现层，通过所述目标受控组件对重新渲染后的所述目标表单进行数据展示。

可选的，在本申请实施例的一些实施例中，由于在数据层，用name值作为唯一标识将数据存储在一个对象中，因此，还可根据name获取存储在数据层的数据，具体来说，本申请实施例包括：

a、在所述行为层，从所述数据层获取与目标受控组件名称name对应的第一表单数据。

一些实施方式中，考虑到数据层的数据和表现层的数据不一样的场景，可引入数据解析函数valueParse，将实时值value转换后传递给表现层的组件中。可通过以下步骤获取第一表单数据：

根据所述第一输入信息确定所述目标受控组件名称；

从所述数据层中获取与所述目标受控组件名称对应的所述第一表单数据，将所述第一表单数据作为实时值；

若确定数据层中目标表单的数据与表现层中所述目标表单的数据在内容上不一致，则调用数据解析组件将所述目标表单name对应的实时值进行数据变换，得到所述第一表单数据。

本实施方式中，数据解析函数由使用者定义，数据解析函数的参数为数据层中name对应的value，数据解析函数的返回值是经过处理后的数据(例如经过数据变换后得到的第一表单数据)；valueParse可以为空，在获取value时就不做数据解析处理。

另一些实施方式中，如果存储的数据结构有较深的层级，name值可以使用“.”号作为分隔来代表其层级(如：”name.subName”)，在获取数据时，也会根据“.”号来获取深层级的数据。相应的，在获取第一表单数据时，可根据所述目标name确定所述第一表单数据的第一层级，然后根据所述第一层级从所述数据层中获取所述第一层级对应所述目标name的第一表单数据。

b、将所述第一表单数据作为实时值，以及从所述表现层获取所述目标表单的第二表单数据。

一些实施方式中，所述从所述表现层获取所述第二表单数据，包括：

在所述行为层，通过行为包裹组件监听所述表现层的数据变化；

若监听到所述表现层中所述目标表单中发生变化的第一表单数据符合预设监听事件，则拦截符合所述预设监听事件的行为；

从所述表现层获取所述第二表单数据，并触发在第一时长内监听用户在所述表现层的输入事件的行为。

c、将所述实时值、默认值和所述第二表单数据添加到入参对象inputProps中，并将所述入参对象输入所述表现层。

其中，入参对象inputProps为数据层使用者传递给表现层中受控组件的对象。入参对象inputProps为BehaviorWrapper组件的参数。

可见，通过对第一表单项进行封装后，无论对于表单的新建，还是编辑，都可以统一处理，不用再做区分，有效降低了表单的复杂度，做到数据、行为和表现的分离。

可选的，在本申请实施例的一些实施例中，所述行为层包括封装组件，所述数据层包括分发组件，所述方法还包括：

在所述行为层中，通过所述封装组件将所述表现层中的至少一个组件进行封装；以及监听所述目标表单中的表单项是否发生数据变化；

当所述目标表单中发生数据变化的第一表单项符合至少一种预设监听事件时，在所述行为层中，通过所述分发组件拦截所述表现层中发生变化的第一表单项并传入所述数据层，以触发对所述目标表单的状态值的更新。

可选的，在本申请实施例的一些实施例中，所述数据层还包括状态组件和内容组件，所述方法还包括：

在所述数据层，通过所述状态组件保存所述第二表单数据；

若所述第二表单数据在所述数据层中发生变化，则在所述数据层中，通过所述内容组件将发生变化后的所述第二表单数据通过所述行为层输入所述表现层。

为便有理解，以一个网站中有10个表单为例，采用传统方式编码，需要处理新建和编辑两种情况，就相当于处理了20种情况。而使用本申请的方案后，10个表单只处理10种情况即可。具体的额对比图可参考图7.

图1a至图7中任一项所对应的实施例中所提及的任一技术特征也同样适用于本申请实施例中的图8至图10所对应的实施例，后续类似之处不再赘述。

以上对本申请实施例中一种表单处理的方法进行说明，以下对执行上述表单处理的方法的装置进行介绍。

参阅图7，如图7所示的一种表单处理装置的结构示意图，其可应用于表单系统。本申请实施例中的表单处理装置能够实现对应于上述图1a至图7中任一项所对应的实施例中所执行的表单处理的方法的步骤。表单处理装置实现的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块，所述模块可以是软件和/或硬件。所述表单处理装置可包括处理模块、输入输出模块和获取模块，所述处理模块、所述输入输出模块和所述显示模块的功能实现可参考图1a至图7中任一项所对应的实施例中所执行处理表单的任意操作，此处不作赘述。例如，所述处理模块可用于控制所述输入输出模块的输入输出操作。

一些实施方式中，所述获取模块可用于获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

所述输入输出模块可用于通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；通过所述行为层将所述第一输入信息传入数据层；

所述处理模块可用于在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

所述通过行为层将所述第一输入信息传入数据层之前，所述方法还包括：

确定所述表现层中的至少一个第一表单项，所述第一表单项为自定义表单项、或分步式表单项或规模大于预设规模的表单项中的至少一项；

在所述表现层，分别将各第一表单项转换为对应的受控组件。

一些实施方式中，所述在所述表现层，分别将各第一表单项转换为对应的受控组件，包括：

将所述第一表单项转换为受控组件；

通过所述受控组件渲染至少一个表单操作的网页元素，并为所述网页元素设置回调函数的监听事件；

在所述受控组件中设置内部值；

向所述受控组件中输入初始值，根据默认值和所述初始值更新所述内部值，通过所述受控组件对至少一个表单操作的网页元素进行渲染，以使所述受控组件生效。

一些实施方式中，所述为所述网页元素设置回调函数的监听事件之后，所述方法还包括：

当所述第一输入信息触发网页元素的第一监听事件时，将基于所述监听事件获取的所述第一输入信息更新到所述内部值中，并触发所述回调函数，以将更新后的所述内部值作为所述回调函数的参数输出至所述行为层。

一些实施方式中，当所述数据层中的所述目标表单发生变化时，所述方法还包括：

在所述数据层，根据所述目标表单的状态值以更新所述第一表单项，并对所述目标表单进行重新渲染，以更新目标受控组件中的初始值；

在所述行为层，从所述数据层获取重新渲染后的所述目标表单，并通过所述目标受控组件传入所述表现层；

在所述表现层，通过所述目标受控组件对重新渲染后的所述目标表单进行数据展示。

一些实施方式中，所述获取第一输入信息之前，所述方法还包括：

获取初始表单和初始表单的状态值；

接收到对所述初始表单的编辑指令后，在所述数据层，向Provide组件输入第一初始值；

通过所述Provide组件将所述第一初始值初始化为所述状态值，以得到所述目标表单，并通过内容实例将所述目标表单传入所述行为层；

通过所述行为层将所述目标表单传入所述表现层，以在所述表现层进行可视化展示。

一些实施方式中，所述获取模块还用于在所述行为层，从所述数据层获取与目标受控组件名称对应的第一表单数据，将所述第一表单数据作为实时值，以及从所述表现层获取所述目标表单的第二表单数据；

所述输入输出模块还用于将所述实时值、默认值和所述第二表单数据添加到入参对象中，并将所述入参对象输入所述表现层。

一些实施方式中，所述获取模块具体用于：

根据所述第一输入信息确定目标受控组件名称；

从所述数据层中获取与所述目标受控组件名称对应的所述第一表单数据，将所述第一表单数据作为实时值；

若确定数据层中目标表单的数据与表现层中所述目标表单的数据在内容上不一致，则调用数据解析组件将所述目标表单对应的实时值进行数据变换，得到所述第一表单数据。

一些实施方式中，所述获取模块具体用于：

在所述行为层，通过行为包裹组件监听所述表现层的数据变化；

若监听到所述表现层的所述目标表单中发生变化的第一表单数据符合预设监听事件，则拦截符合所述预设监听事件的行为；

从所述表现层获取所述第二表单数据，并触发在第一时长内监听用户在所述表现层的输入事件的行为。

一些实施方式中，所述行为层包括封装组件，所述数据层包括分发组件，所述处理模块还用于：

在所述行为层中，通过所述封装组件将所述表现层中的至少一个组件进行封装；以及监听所述目标表单中的表单项是否发生数据变化；

当所述目标表单中发生数据变化的第一表单项符合至少一种预设监听事件时，在所述行为层中，通过所述分发组件拦截所述表现层中发生变化的第一表单项并通过所述输入输出模块传入所述数据层，以触发对所述目标表单的状态值的更新。

一些实施方式中，所述获取模块还用在所述数据层，根据所述目标受控组件的组件标识获取所述目标受控组件的表单数据；

将所述目标受控组件的表单数据作为实时值和默认值传入所述行为层；

所述输入输出模块还用于在所述行为层，通过分发组件将所述目标受控组件的表单数据传入所述表现层，以更新所述表现层中的目标表单。

一些实施方式中，所述数据层还包括状态组件和内容组件，还用于所所述处理模块还用于：

在所述数据层，通过所述状态组件保存所述第二表单数据；

若所述第二表单数据在所述数据层中发生变化，则在所述数据层中，通过所述内容组件将发生变化后的所述第二表单数据通过所述行为层输入所述表现层。

上面从模块化功能实体的角度对本申请实施例中的表单处理装置进行了描述，下面从硬件处理的角度分别对本申请实施例中的执行表单处理的方法的服务器进行描述。需要说明的是，在本申请实施例图8所示的实施例中的输入输出模块对应的实体设备可以为输入/输出单元、收发器、射频电路、通信模块和输出接口等，获取模块和处理模块对应的实体设备可以为处理器。图8所示的装置80可以具有如图9所示的结构，当图8所示的装置80具有如图9所示的结构时，图9中的处理器和输入输出单元能够实现前述对应该装置的装置实施例提供的处理模块、输入输出模块和获取模块相同或相似的功能，图9中的存储器存储处理器执行上述表单处理的方法时需要调用的计算机程序。

图10是本申请实施例提供的一种服务器结构示意图，该服务器1020可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(英文全称：centralprocessing units，英文简称：CPU)1022(例如，一个或一个以上处理器)和存储器1032，一个或一个以上存储应用程序1042或数据1044的存储介质1030(例如一个或一个以上海量存储设备)。其中，存储器1032和存储介质1030可以是短暂存储或持久存储。存储在存储介质1030的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器1022可以设置为与存储介质1030通信，在服务器1020上执行存储介质1030中的一系列指令操作。

服务器1020还可以包括一个或一个以上电源1026，一个或一个以上有线或无线网络接口1050，一个或一个以上输入输出接口1058，和/或，一个或一个以上操作系统1041，例如Windows Server，Mac OS X，Unix,Linux，FreeBSD等等。

上述实施例中由服务器所执行的步骤可以基于该图10所示的服务器1020的结构。例如上述实施例中由图10所示的装置60所执行的步骤可以基于该图10所示的服务器结构。例如，所述处理器1022通过调用存储器1032中的指令，执行以下操作：

获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

通过与所述第一表单项关联的目标受控组件，通过输入输出接口1058将所述第一输入信息输入行为层；

在所述行为层，通过输入输出接口1058将所述第一输入信息传入数据层；

在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

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

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

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

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。

所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机计算机程序时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

以上对本申请实施例所提供的技术方案进行了详细介绍，本申请实施例中应用了具体个例对本申请实施例的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请实施例的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请实施例的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请实施例的限制。

Claims (14)

1.一种表单处理的方法，其特征在于，所述方法包括：

获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；

通过所述行为层将所述第一输入信息传入数据层；

在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

2.根据权利要求1所述的方法，其特征在于，所述通过行为层将所述第一输入信息传入数据层之前，所述方法还包括：

确定所述表现层中的至少一个第一表单项，所述第一表单项为自定义表单项、或分步式表单项或规模大于预设规模的表单项中的至少一项；

在所述表现层，分别将各第一表单项转换为对应的受控组件。

3.根据权利要求2所述的方法，其特征在于，所述在所述表现层，分别将各第一表单项转换为对应的受控组件，包括：

将所述第一表单项转换为受控组件；

通过所述受控组件渲染至少一个表单操作的网页元素，并为所述网页元素设置回调函数的监听事件；

在所述受控组件中设置内部值；

向所述受控组件中输入初始值，根据默认值和所述初始值更新所述内部值，通过所述受控组件对至少一个表单操作的网页元素进行渲染，以使所述受控组件生效。

4.根据权利要求3所述的方法，其特征在于，所述为所述网页元素设置回调函数的监听事件之后，所述方法还包括：

当所述第一输入信息触发网页元素的第一监听事件时，将基于所述监听事件获取的所述第一输入信息更新到所述内部值中，并触发所述回调函数，以将更新后的所述内部值作为所述回调函数的参数输出至所述行为层。

5.根据权利要求1-4中任一项所述的方法，其特征在于，当所述数据层中的所述目标表单发生变化时，所述方法还包括：

在所述数据层，根据所述目标表单的状态值以更新所述第一表单项，并对所述目标表单进行重新渲染，以更新目标受控组件中的初始值；

在所述行为层，从所述数据层获取重新渲染后的所述目标表单，并通过所述目标受控组件传入所述表现层；

在所述表现层，通过所述目标受控组件对重新渲染后的所述目标表单进行数据展示。

6.根据权利要求4所述的方法，其特征在于，所述数据层包括Provide组件；所述获取第一输入信息之前，所述方法还包括：

获取初始表单和初始表单的状态值；

接收到对所述初始表单的编辑指令后，在所述数据层，向Provide组件输入第一初始值；

通过所述Provide组件将所述第一初始值初始化为所述状态值，以得到所述目标表单，并通过内容实例将所述目标表单传入所述行为层；

通过所述行为层将所述目标表单传入所述表现层，以在所述表现层进行可视化展示。

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

在所述行为层，从所述数据层获取与目标受控组件名称对应的第一表单数据，将所述第一表单数据作为实时值，以及从所述表现层获取所述目标表单的第二表单数据；

将所述实时值、默认值和所述第二表单数据添加到入参对象中，并将所述入参对象输入所述表现层。

8.根据权利要求7所述的方法，其特征在于，所述在所述行为层，从所述数据层获取与目标受控组件名称对应的第一表单数据，包括：

根据所述第一输入信息确定目标受控组件名称；

从所述数据层中获取与所述目标受控组件名称对应的所述第一表单数据，将所述第一表单数据作为实时值；

若确定数据层中目标表单的数据与表现层中所述目标表单的数据在内容上不一致，则调用数据解析组件将所述目标表单对应的实时值进行数据变换，得到所述第一表单数据。

9.根据权利要求8所述的方法，其特征在于，所述从所述表现层获取所述第二表单数据，包括：

在所述行为层，通过行为包裹组件监听所述表现层的数据变化；

若监听到所述表现层的所述目标表单中发生变化的第一表单数据符合预设监听事件，则拦截符合所述预设监听事件的行为；

从所述表现层获取所述第二表单数据，并触发在第一时长内监听用户在所述表现层的输入事件的行为。

10.根据权利要求7-9中任一项所述的方法，其特征在于，所述行为层包括封装组件，所述数据层包括分发组件，所述方法还包括：

在所述行为层中，通过所述封装组件将所述表现层中的至少一个组件进行封装；以及监听所述目标表单中的表单项是否发生数据变化；

当所述目标表单中发生数据变化的第一表单项符合至少一种预设监听事件时，在所述行为层中，通过所述分发组件拦截所述表现层中发生变化的第一表单项并传入所述数据层，以触发对所述目标表单的状态值的更新。

11.根据权利要求10所述的方法，其特征在于，所述数据层还包括状态组件和内容组件，所述方法还包括：

在所述数据层，通过所述状态组件保存所述第二表单数据；

若所述第二表单数据在所述数据层中发生变化，则在所述数据层中，通过所述内容组件将发生变化后的所述第二表单数据通过所述行为层输入所述表现层。

12.一种表单处理装置，其特征在于，所述表单处理装置包括：

获取模块，用于获取第一输入信息，所述第一输入信息为用户在表现层中对目标表单中引用的第一表单项输入的信息；

输入输出模块，用于通过与所述第一表单项关联的目标受控组件，将所述第一输入信息输入行为层；

通过所述行为层将所述第一输入信息传入数据层；

处理模块，用于在所述数据层，根据所述第一输入信息对所述目标表单进行更新。

13.一种表单处理装置，其特征在于，所述表单处理装置包括：

至少一个处理器、存储器、输入输出单元；

其中，所述存储器用于存储计算机程序，所述处理器用于调用所述存储器中存储的计算机程序来执行如权利要求1-11中任一项所述的方法。

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

Images