CN109597611A - 前端数据流控制组件开发系统、方法、设备及存储介质 - Google Patents

Abstract

本发明提供了一种前端数据流控制组件开发系统、方法、设备及存储介质，所述方法包括：模型管理模块，用于新建模型和编辑模型的属性，模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合；第二函数预处理模块，用于为第二函数的名称添加命名空间前缀；状态树更新模块，用于将预处理后的第二函数添加到状态树中；第一函数预处理模块，用于修改分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；组件连接模块，用于建立状态树与应用组件的连接。本发明基于不同功能对状态进行了划分，建立多个模型，并且进行了更高层次的封装，开发者只需要实现核心代码，节省开发人员工作量且使得代码逻辑更简洁易维护。

Description

前端数据流控制组件开发系统、方法、设备及存储介质

技术领域

本发明涉及数据处理技术领域，尤其涉及一种前端数据流控制组件开发系统、方法、设备及存储介质。

背景技术

随着前端技术近几年的快速发展，SPA(Single page web application，单页web应用)的应用越来越广泛。当前被采用较多的SPA技术栈一般由React、Vue和Angular等。

其中，React作为最流行的前端框架，衍生出了一些用于实现redux异步action的中间件(比如redux-thunk，redux-saga)的辅助性应用框架，比如DvaJS。这类辅助性应用框架能够帮助开发者简化action和reducer的编程操作，使得开发者写的代码简洁易懂且方便维护。

然而现有技术中的辅助性应用框架仍然存在一些缺陷：

(1)如果不使用redux中间件，redux中state(状态)结构千变万化，action和reducer的编写不受任何约束，并且实现异步action比较复杂，在大型项目中代码维护工作相当困难。

(2)如果在使用中间件的前提下不使用辅助性框架，开发人员需要手动地将组件与编写的state和action进行连接(connect)，此过程是必须的且需要编写大量重复代码。

(3)现有辅助性框架比如DvaJS只实现了基于redux-saga中间件的解决方案，实现的每一个action是generator函数，更加优秀的async/await关键字(处理异步操作的关键字)在DvaJS框架中还未被支持。

发明内容

针对现有技术中的问题，本发明的目的在于提供一种前端数据流控制组件开发系统、方法、设备及存储介质，基于不同功能对状态进行了划分，建立多个模型，并且进行了更高层次的封装，开发者只需要实现核心代码，节省开发人员工作量且使得代码逻辑更简洁易维护。

本发明实施例提供一种前端数据流控制组件开发系统，所述系统包括：

模型管理模块，用于新建模型和编辑模型的属性，所述模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合，各个第一函数包括将应用数据传递至状态树的有效载荷、分发函数和初始状态调用函数，所述分发函数包括对第二函数的调用参数，各个第二函数用于根据所述初始状态调用函数获取初始状态，并根据所述有效载荷更新状态树中的状态；

第二函数预处理模块，用于对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

状态树更新模块，用于将预处理后的第二函数添加到状态树中；

第一函数预处理模块，用于对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

组件连接模块，用于建立所述状态树与应用组件的连接。

可选地，所述第一函数预处理模块采用面向切面编程对所述第一函数中分发函数对第二函数的调用参数进行注入，使得所述分发函数对第二函数的调用参数与预处理后的第二函数的名称相一致。

可选地，所述组件连接模块封装有状态到应用组件的映射函数和分发函数到应用组件的映射函数；

所述组件连接模块将预处理后的第一函数添加到所述状态到应用组件的映射函数和分发函数到应用组件的映射函数中，以建立所述状态树与应用组件的连接。

可选地，所述组件连接模块采用面向切面编程将预处理后的第一函数注入所述状态到应用组件的映射函数和分发函数到应用组件的映射函数，以建立所述状态树与应用组件的连接。

可选地，所述第一函数为redux框架的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

可选地，所述状态树更新模块调用状态树的replacereducer方法将预处理后的reducer函数添加到状态树中。

本发明实施例还提供一种前端数据流控制组件开发方法，采用所述的前端数据流控制组件开发系统，所述方法包括如下步骤：

新建模型，并编辑模型的属性，所述模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合；

对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

将预处理后的第二函数添加到状态树中；

对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

建立所述状态树与应用组件的连接。

可选地，所述修改所述分发函数中对第二函数的调用参数，包括如下步骤：

采用面向切面编程对所述第一函数中分发函数对第二函数的调用参数进行注入，使得所述分发函数对第二函数的调用参数与预处理后的第二函数的名称相一致。

可选地，所述组件连接模块封装有状态到应用组件的映射函数和分发函数到应用组件的映射函数；

所述建立所述状态树与应用组件的连接，包括如下步骤：

采用面向切面编程将预处理后的第一函数注入所述状态到应用组件的映射函数和分发函数到应用组件的映射函数。

可选地，所述第一函数为redux框架的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

本发明实施例还提供一种前端数据流控制组件开发设备，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行所述的前端数据流控制组件开发方法的步骤。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被执行时实现所述的前端数据流控制组件开发方法的步骤。

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

本发明所提供的前端数据流控制组件开发系统、方法、设备及存储介质具有下列优点：

本发明基于不同功能对状态进行了划分，建立多个模型，使得代码逻辑更清晰，并且进行了更高层次的封装，开发者只需要实现核心代码，节省开发人员工作量且使得代码逻辑更简洁易维护；进一步地，本发明可以支持action函数中async/await关键字的功能，更好地实现异步数据通信。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。

图1是本发明一实施例的前端数据流控制组件开发系统的结构示意图；

图2是本发明一实施例的预处理reducer函数并更新store示意图；

图3是本发明一实施例的action函数预处理的原理示意图；

图4是本发明一实施例的@connect装饰图的原理图；

图5是本发明一实施例的前端应用框架的结构示意图；

图6是本发明一实施例的前端数据流控制组件开发方法的流程图；

图7是本发明一实施例的前端数据流控制组件开发设备的结构示意图；

图8是本发明一实施例的计算机可读存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

如图1所示，本发明实施例提供一种前端数据流控制组件开发系统，所述系统包括：

模型管理模块M100，用于新建模型和编辑模型的属性，所述模型的属性包括命名空间(namespace)、初始状态、第一函数集合和第二函数集合，第一函数集合中包括多个第一函数，第二函数集合中包括多个第二函数，各个第一函数包括将应用数据传递至状态树的有效载荷、分发函数和初始状态调用函数，所述分发函数包括对第二函数的调用参数，各个第二函数用于根据所述初始状态调用函数获取初始状态，并根据所述有效载荷更新状态树中的状态；第一函数与第二函数的对应关系可以是多对多的函数，即一个第一函数的分发函数可以调用多个第二函数，一个第二函数也可以被多个第一函数的分发函数调用；

第二函数预处理模块M200，用于对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

状态树更新模块M300，用于将预处理后的第二函数添加到状态树中；

第一函数预处理模块M400，用于对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

组件连接模块M500，用于建立所述状态树与应用组件的连接。

本发明中的模型可以与应用功能相对应，在采用本发明的前端数据流控制组件开发系统开发应用时，如果要新建一个功能，可以对应新建一个模型，例如针对文章管理功能建立一个模型，针对用户管理功能建立一个模型等等。每个模型被定义为一个字面量对象，用于定义应用的状态、第一函数集合和第二函数集合。

因此，本发明的前端数据流控制组件开发系统基于不同功能对状态进行了划分，建立多个模型，使得代码逻辑更清晰，开发人员可以更加关注于各个模型中第一函数和第二函数的实现。考虑到一个应用中存在多个按照功能划分的模型，且不同模型之间的第二函数的命名可能会有重复，因此本发明进一步引入命名空间，只要保证了命名空间在应用中的全局唯一性，就不会出现第一函数、第二函数命名冲突的问题，第一函数中的分发函数也无法跨模型调用其他模型中的第二函数。

在该实施例中，所述第一函数为redux框架(一种应用数据流框架)的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

redux是JavaScript状态容器，提供可预测化的状态管理，可以用来构建一致化的应用，运行于不同的环境(客户端、服务器、原生应用)，并且易于测试。redux可以用这三个基本原则描述：

(1)单一数据源：整个应用的state被存储在一棵state tree(状态树)中，并且这个状态树只存在于唯一一个store中。

(2)state是只读的：唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象。

(3)使用纯函数来执行修改：为了描述action如何改变状态树，需要编写reducers。

Action包括数据从应用(view层、服务器响应、用户输入或其它非view的数据)传到store的有效载荷。它是store数据的唯一来源。

在该实施例中，模型的属性包括如下内容：

namespace：命名空间，各个模型的命名空间需要保证应用中全局唯一性；

initState：初始状态，reducer函数基于此初始状态进行数据更新；

actions：action函数集合，用于定义当前模型可提供给组件或页面调用的action函数，此处约定在具体的action函数中调用dispatch(分发)函数，分发函数的参数actionType需要与当前模型中定义的reducer函数的名称相一致；

reducers：reducer函数集合，用于修改store中的数据，reducers所定义的reducer函数名需要与分发函数的参数actionType保持一致。

定义一个模型的代码结构可以如下图所示：

可以看出，action函数中包括有效载荷payload，分发函数dispatch和初始状态调用函数getState，plus表示该action函数执行“在初始状态上加上有效载荷”的操作。进一步地，本发明可以支持action函数中async/await关键字的功能，更好地实现异步数据通信。例如，将plus({payload},{dispatch,getState})代码修改为async/await plus({payload},{dispatch,getState})。

在该实施例中，第二函数预处理模块M200执行reducer函数预处理以及状态树更新模块M300更新状态树的原理图如图2所示。

在该实施例中，第二函数预处理模块M200对第二函数集合中所有reducer函数均进行预处理，也就是给reducer函数名添加namespace前缀。通过namespace的全局唯一性，使得reducer函数名也具有全局唯一性。例如在开发人员编写上述代码后，第二函数预处理模块M200对reducer函数中save方法的方法名处理成test_model_save，其中test_model是模型的namespace。这样其他模型中定义的reducer函数中save方法名经过预处理后也不会与当前模型中reducer函数中save方法重名。

模型的reducer函数预处理完成后，直接调用store实例的replaceReducer方法即可以动态地将预处理后的新的reducer函数集合(newReducers)添加到redux store中。

在该实施例中，第一函数预处理模块M400对action函数的预处理原理图可以参见图3所示。本发明的前端数据流控制组件开发系统的核心之一即在于对模型中的action函数进行预处理和封装。原始的redux应用中，直接实现异步action会非常困难，因此开源社区提出了一些优秀的解决方案比如redux-thunk，redux-saga等中间件使得redux支持异步action，中间件将dispatch作为参数传入定义的action函数，使得可以在action函数中执行dispatch来更新state。在使用以上中间件的过程中，不管是用哪种中间件来实现异步action，action函数都必须返回一个可异步执行的函数。同时在实际应用中，在返回可异步执行函数之前是不需要做任何操作的，因此，在本发明中，模型中只需要定义可异步执行的函数来作为action函数，本发明的前端数据流控制组件开发系统对模型中定义的action进行再次封装，生成符合redux-thunk设计思想的纯函数。

该实施例的前端数据流控制组件开发系统在预处理模型中的action函数时，基于aop(面向切面编程)的方法对传入action函数的dispatch函数进行了注入，动态修改dispatch函数的actionType参数，使之与调用的reducer方法名相一致。

面向切面编程主要实现的目的是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。

在对传入action函数的dispatch函数进行注入时，可以使用iterator(迭代器)。迭代器(iterator)是一种对象，它能够用来遍历标准模板库容器中的部分或全部元素，每个迭代器对象代表容器中的确定的地址。迭代器修改了常规指针的接口，所谓迭代器是一种概念上的抽象：那些行为上像迭代器的东西都可以叫做迭代器。然而迭代器有很多不同的能力，它可以把抽象容器和通用算法有机的统一起来。通过aop将新的actionType参数注入到高阶action(High order action)中，得到预处理后的新的action(newActions)，采用这个新的action函数更新action池(actionPool)中的action函数。

在该实施例中，组件连接模块M500建立store与组件的连接的原理图可以参见图4所示。只有store和应用的react组件(一种前端开发框架)连接后，才能组成整个dispatch过程。在原始的方法中，store连接一个组件，首先需要分别编写一个mapStateToProps(状态到应用组件的映射函数)和一个mapDispatchToProps函数(分发函数到应用组件的映射函数)，然后再调用connect函数连接。本发明的前端数据流控制组件开发系统对reduxconnect函数(连接函数)进行了优化，定义了@connect修饰器，开发者不需要显示的定义mapStateToProps和mapDispatchToProps两个函数，只需要给@connect函数传入所需要的store依赖即可。

结合第一函数预处理模块M400对模型中定义的actions的预处理，使得@connect修饰器能够将传统的store与组件的连接方法进行封装，在组件连接模块M500内部统一对mapStateToProps和mapDispatchToProps进行管理，开发者不需要显示的定义这两个函数，只要开发者在模型中定义了action，@connect都会自动与组件连接，除了state之外，不需要手动指定需要连接的action。

因此，在现有技术的基础上，本发明该实施例提出了一种基于redux和redux-thunk在react应用中的前端数据流优化方案。针对现有技术中的缺点(1)，在本发明中，对state的定义及编写都进行了相关约束，即通过模型属性对state的定义和编写进行了规范，并基于不同模块对state进行了划分，使得代码逻辑更清晰。另外，本发明中在redux-thunk的基础上进行了更高层次的封装，开发者只需实现异步action的核心代码，使得代码逻辑更简洁易懂。

针对现有技术中的缺点(2)，在本发明中基于namespace实现了不同模块下的state,action和reducer的集中式管理，并重新封装了redux的connect函数，采用@connect装饰器，使得开发者能够使用最少的代码让react组件和state，action连接起来。

针对现有技术中的缺点(3)，在本发明中针对性的基于redux-thunk中间件进行了封装，使得编写的action能够使用async/await关键字。

如图5所示，为本发明一实施例中提供的以redux和redux-thunk为核心的数据流管理和优化框架，主要应用于基于react开发框架的前端项目中。其中整合了上述的@connect装饰器和aop功能，@connect装饰器对传统的redux和react组件连接方法进行了封装，并基于框架内部的aop功能对action进行了注入，使得其在执行过程中能够获取到已定义的action，aop功能提供了before和after两个基础的方法对指定的函数注入额外的业务处理逻辑。

图5中的app为采用该框架生成的最终实例，此实例对外提供了动态注册模型的方法，并对模型中的初始状态、action函数集合和reducer函数集合进行了预处理。dynamic为动态加载页面组件的函数。

图5中的Router/Route/Link分别表示渲染、路由以及链接。本发明集成了React-router-dom，此处直接导出React-router-dom中定义的相关组件，使得React-router-dom对开发者透明。

如图6所示，本发明实施例还提供一种前端数据流控制组件开发方法，采用所述的前端数据流控制组件开发系统，所述方法包括如下步骤：

S100：新建模型，并编辑模型的属性，所述模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合；

S200：对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

S300：将预处理后的第二函数添加到状态树中；

S400：对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

S500：建立所述状态树与应用组件的连接。

在该实施例中，所述第一函数为redux框架的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

在该实施例中，步骤S400中，所述修改所述分发函数中对第二函数的调用参数，包括如下步骤：

采用面向切面编程对所述第一函数中分发函数对第二函数的调用参数进行注入，使得所述分发函数对第二函数的调用参数与预处理后的第二函数的名称相一致。

在该实施例中，所述组件连接模块封装有状态到应用组件的映射函数和分发函数到应用组件的映射函数；

步骤S500中，所述建立所述状态树与应用组件的连接，包括如下步骤：

采用面向切面编程将预处理后的第一函数注入所述状态到应用组件的映射函数和分发函数到应用组件的映射函数。

因此，本发明的前端数据流控制组件开发方法基于不同功能对状态进行了划分，建立多个模型，使得代码逻辑更清晰，开发人员可以更加关注于各个模型中第一函数和第二函数的实现。考虑到一个应用中存在多个按照功能划分的模型，且不同模型之间的第二函数的命名可能会有重复，因此本发明进一步引入命名空间，只要保证了命名空间在应用中的全局唯一性，就不会出现第一函数、第二函数命名冲突的问题，第一函数中的分发函数也无法跨模型调用其他模型中的第二函数。

本发明实施例还提供一种前端数据流控制组件开发设备，包括处理器；存储器，其中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行所述的前端数据流控制组件开发方法的步骤。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“平台”。

下面参照图7来描述根据本发明的这种实施方式的电子设备600。图7显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同平台组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图6中所示的步骤。

因此，该实施例的前端数据流控制组件开发设备的处理器执行存储单元中的程序代码时，可以通过应用发起网络请求的同时保存网络请求函数的名称、网络请求参数、网络返回参数和回调函数等相关信息方便抓包调试应用，方便用户操作，提高抓包效率，并降低抓包成本。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被执行时实现所述的前端数据流控制组件开发方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图8所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

因此，该实施例的计算机存储介质中的程序代码被执行时，可以通过应用发起网络请求的同时保存网络请求函数的名称、网络请求参数、网络返回参数和回调函数等相关信息方便抓包调试应用，方便用户操作，提高抓包效率，并降低抓包成本。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于方法、设备和计算机存储介质的实施例而言，由于其基本相似于系统实施例，所以描述得比较简单，相关之处参见系统实施例的部分说明即可。

本发明所提供的前端数据流控制组件开发系统、方法、设备及存储介质具有下列优点：

本发明基于不同功能对状态进行了划分，建立多个模型，使得代码逻辑更清晰，并且进行了更高层次的封装，开发者只需要实现核心代码，节省开发人员工作量且使得代码逻辑更简洁易维护；进一步地，本发明可以支持action函数中async/await关键字的功能，更好地实现异步数据通信。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (12)

1.一种前端数据流控制组件开发系统，其特征在于，包括如下模块：

模型管理模块，用于新建模型和编辑模型的属性，所述模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合，各个第一函数包括将应用数据传递至状态树的有效载荷、分发函数和初始状态调用函数，所述分发函数包括对第二函数的调用参数，各个第二函数用于根据所述初始状态调用函数获取初始状态，并根据所述有效载荷更新状态树中的状态；

第二函数预处理模块，用于对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

状态树更新模块，用于将预处理后的第二函数添加到状态树中；

第一函数预处理模块，用于对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

组件连接模块，用于建立所述状态树与应用组件的连接。

2.根据权利要求1所述的前端数据流控制组件开发系统，其特征在于，所述第一函数预处理模块采用面向切面编程对所述第一函数中分发函数对第二函数的调用参数进行注入，使得所述分发函数对第二函数的调用参数与预处理后的第二函数的名称相一致。

3.根据权利要求1所述的前端数据流控制组件开发系统，其特征在于，所述组件连接模块封装有状态到应用组件的映射函数和分发函数到应用组件的映射函数；

所述组件连接模块将预处理后的第一函数添加到所述状态到应用组件的映射函数和分发函数到应用组件的映射函数中，以建立所述状态树与应用组件的连接。

4.根据权利要求3所述的前端数据流控制组件开发系统，其特征在于，所述组件连接模块采用面向切面编程将预处理后的第一函数注入所述状态到应用组件的映射函数和分发函数到应用组件的映射函数，以建立所述状态树与应用组件的连接。

5.根据权利要求1所述的前端数据流控制组件开发系统，其特征在于，所述第一函数为redux框架的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

6.根据权利要求5所述的前端数据流控制组件开发系统，其特征在于，所述状态树更新模块调用状态树的replacereducer方法将预处理后的reducer函数添加到状态树中。

7.一种前端数据流控制组件开发方法，其特征在于，采用权利要求1至6中任一项所述的前端数据流控制组件开发系统，所述方法包括如下步骤：

新建模型，并编辑模型的属性，所述模型的属性包括命名空间、初始状态、第一函数集合和第二函数集合；

对所述第二函数进行预处理，为所述第二函数的名称添加命名空间前缀；

将预处理后的第二函数添加到状态树中；

对所述第一函数进行预处理，修改所述分发函数中对第二函数的调用参数，以与预处理后的第二函数的名称相一致；

建立所述状态树与应用组件的连接。

8.根据权利要求7所述的前端数据流控制组件开发方法，其特征在于，所述修改所述分发函数中对第二函数的调用参数，包括如下步骤：

采用面向切面编程对所述第一函数中分发函数对第二函数的调用参数进行注入，使得所述分发函数对第二函数的调用参数与预处理后的第二函数的名称相一致。

9.根据权利要求7所述的前端数据流控制组件开发方法，其特征在于，所述组件连接模块封装有状态到应用组件的映射函数和分发函数到应用组件的映射函数；

所述建立所述状态树与应用组件的连接，包括如下步骤：

采用面向切面编程将预处理后的第一函数注入所述状态到应用组件的映射函数和分发函数到应用组件的映射函数。

10.根据权利要求7所述的前端数据流控制组件开发方法，其特征在于，所述第一函数为redux框架的action函数，所述第二函数为redux框架的reducer函数，所述分发函数中对第二函数的调用参数为分发函数的actionType参数。

11.一种前端数据流控制组件开发设备，其特征在于，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求7至10中任一项所述的前端数据流控制组件开发方法的步骤。

12.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被执行时实现权利要求7至10中任一项所述的前端数据流控制组件开发方法的步骤。