CN111078220B - 一种前端状态变更管理的实现方法及系统 - Google Patents

Abstract

本发明公开了一种前端状态变更管理的实现方法及系统，属于前端Angular技术框架，本发明要解决的技术问题为如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数，采用的技术方案为：该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理。该系统包括服务创建模块、Subject对象订阅模块、服务实例引入模块、界面元素状态更新模块及Subject的监听取消模块。

Description

一种前端状态变更管理的实现方法及系统

技术领域

本发明属于前端Angular技术框架，主要是涉及angular组件交互和事件监听，具体地说是一种前端状态变更管理的实现方法及系统。

背景技术

Angular是一款优秀的前端框架，现在已经被广泛应用。它的目标是透过MVC模式(MVC)功能增强基于浏览器的应用，使开发和测试变得更加容易，框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。

前端对界面的一些元素添加状态管理是主流的趋势。通过界面样式和交互动效让用户可以更加清晰的感知自己的操作。用户操作之后，页面元素的变化可以清晰的展现当前的状态。但是如果用户操作之后，都去编写一段代码去刷新所有相关元素，所有的刷新逻辑是独立的，部分代码是重复的。代码可读性差，重复请求后端数据，缺少统一的逻辑。故如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数是目前现有技术中急需解决的技术问题。

发明内容

本发明的技术任务是提供一种前端状态变更管理的实现方法及系统，来解决如何实现在界面元素变化时刷新元素状态的逻辑，同时减少重复请求后端的次数的问题。

本发明的技术任务是按以下方式实现的，一种前端状态变更管理的实现方法，该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理。

其中，该方法的前提条件：在Angular的父子组件之间监控界面元素状态的变更，如果只是监控兄弟组件，可以给其包装一个父组件来实现。

作为优选，该方法的具体如下：

S1、声明一个服务，该服务注入父子组件所在的模块或者注入父组件；

S2、组件内初始化时订阅服务中的Subject对象；

S3、子组件通过构造函数引入服务实例；

S4、当请求后端接口时，设置loading提示信息或者更新中等中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

S5、父界面关闭时，取消对服务中Subject的监听。

更优地，所述步骤S1中声明一个服务，该服务注入父子组件所在的模块或者注入父组件具体如下：

S101、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

S102、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象。

更优地，所述步骤S2中组件内初始化时订阅服务中的Subject对象的具体如下：

S201、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

S202、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态。

更优地，所述步骤S202中父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态的具体如下：

S20201、获取配额信息，下一步执行步骤S20202；

S20202、创建按钮根据后端返回的配合变化信息，判断是否有剩余空间配额：

①、若有剩余配额，则执行步骤S20203；

②、若无剩余配额，则跳转至步骤S20204；

S20203、显示创建按钮为正常状态，下一步执行步骤S20205；

S20204、显示创建按钮是不能点击的置灰状态，下一步执行步骤S20205；

S20205、判断界面是否关闭：

①、若是，则跳转至步骤S20206；

②、若否，则跳转至步骤S20201；

S20206、结束。

更优地，所述步骤S3中子组件通过构造函数引入服务实例的具体如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

一种前端状态变更管理的实现系统，该系统包括，

服务创建模块，用于声明一个服务，该服务注入父子组件所在的模块或者注入父组件；

Subject对象订阅模块，用于组件内初始化时订阅服务中的Subject对象；

服务实例引入模块，用于子组件通过构造函数引入服务实例；

界面元素状态更新模块，用于当请求后端接口时，设置loading提示信息或者更新中等中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

Subject的监听取消模块，用于父界面关闭时，取消对服务中Subject的监听。

作为优选，所述服务创建模块的工作过程如下：

(1)、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

(2)、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象。

作为优选，所述Subject对象订阅模块的工作过程如下：

(一)、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

(二)、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态，例如：创建按钮根据后端返回的剩余空间大小信息，显示创建按钮是否是正常状态或者是不能点击的置灰状态。

作为优选，所述服务实例引入模块的工作过程如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

本发明的前端状态变更管理的实现方法及系统具有以下优点：

(一)本发明给出前端界面元素状态的统一管理的一种实现方式，当有界面元素变化的时候，通过较少的代码，实现刷新元素状态的逻辑，并且减少面请求后端的次数；

(二)本发明减少了冗余代码，提高了代码质量；

(三)本发明优化界面交互，界面元素响应风格一致；

(四)本发明减少了后端请求次数，优化界面响应速度；

(五)本发明能够替代websocket消息推送更新界面元素状态的功能，减少了项目插件的使用；

(六)本发明利用Angular的父子组件共享服务实例的原理，统一管理界面元素状态变更，实现了前端界面元素状态统一管理。

附图说明

下面结合附图对本发明进一步说明。

附图1为父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态的流程框图。

具体实施方式

参照说明书附图和具体实施例对本发明的一种前端状态变更管理的实现方法及系统作以下详细地说明。

实施例1：

本发明的前端状态变更管理的实现方法,该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理。该方法的具体如下：

S1、声明一个服务，该服务注入父子组件所在的模块或者注入父组件；具体如下：

S101、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

S102、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象。

S2、组件内初始化时订阅服务中的Subject对象；具体如下：

S201、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

S202、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态；如附图1所示，具体如下：

S20201、获取配额信息，下一步执行步骤S20202；

S20202、创建按钮根据后端返回的配合变化信息，判断是否有剩余空间配额：

①、若有剩余配额，则执行步骤S20203；

②、若无剩余配额，则跳转至步骤S20204；

S20203、显示创建按钮为正常状态，下一步执行步骤S20205；

S20204、显示创建按钮是不能点击的置灰状态，下一步执行步骤S20205；

S20205、判断界面是否关闭：

①、若是，则跳转至步骤S20206；

②、若否，则跳转至步骤S20201；

S20206、结束。

S3、子组件通过构造函数引入服务实例；具体如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

S4、当请求后端接口时，设置loading提示信息或者更新中等中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

S5、父界面关闭时，取消对服务中Subject的监听。

实施例2：

本发明的前端状态变更管理的实现系统，该系统包括，

服务创建模块，用于声明一个服务，该服务注入父子组件所在的模块或者注入父组件；

Subject对象订阅模块，用于组件内初始化时订阅服务中的Subject对象；

服务实例引入模块，用于子组件通过构造函数引入服务实例；

界面元素状态更新模块，用于当请求后端接口时，设置loading提示信息或者更新中等中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

Subject的监听取消模块，用于父界面关闭时，取消对服务中Subject的监听。

其中，服务创建模块的工作过程如下：

(1)、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

(2)、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象。

Subject对象订阅模块的工作过程如下：

(一)、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

(二)、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态，例如：创建按钮根据后端返回的剩余空间大小信息，显示创建按钮是否是正常状态或者是不能点击的置灰状态。

服务实例引入模块的工作过程如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (4)

1.一种前端状态变更管理的实现方法，其特征在于，该方法是针对前端界面的数据或者button有状态变化时，通过angular依赖注入机制，在父子组件中共享一个服务，通过该服务实现对父子组件家庭内部状态变更事件的监听，父子组件做出反应，实现前端界面的状态变更实现统一的管理；具体如下：

S1、声明一个服务，该服务注入父子组件所在的模块或者注入父组件；具体如下：

S101、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

S102、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象；

S2、组件内初始化时订阅服务中的Subject对象；具体如下：

S201、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

S202、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态；

具体如下：

S20201、获取配额信息，下一步执行步骤S20202；

S20202、创建按钮根据后端返回的配合变化信息，判断是否有剩余空间配额：

①、若有剩余配额，则执行步骤S20203；

②、若无剩余配额，则跳转至步骤S20204；

S20203、显示创建按钮为正常状态，下一步执行步骤S20205；

S20204、显示创建按钮是不能点击的置灰状态，下一步执行步骤S20205；

S20205、判断界面是否关闭：

①、若是，则跳转至步骤S20206；

②、若否，则跳转至步骤S20201；

S20206、结束；

S3、子组件通过构造函数引入服务实例；

S4、当请求后端接口时，设置loading提示信息或者更新中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

S5、父界面关闭时，取消对服务中Subject的监听。

2.根据权利要求1所述的前端状态变更管理的实现方法，其特征在于，所述步骤S3中子组件通过构造函数引入服务实例的具体如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

3.一种前端状态变更管理的实现系统，其特征在于，该系统包括，

服务创建模块，用于声明一个服务，该服务注入父子组件所在的模块或者注入父组件；

Subject对象订阅模块，用于组件内初始化时订阅服务中的Subject对象；

服务实例引入模块，用于子组件通过构造函数引入服务实例；

界面元素状态更新模块，用于当请求后端接口时，设置loading提示信息或者更新中间状态，成功返回后，取消loading提示或者中间状态，依据返回结果更新界面元素状态；

Subject的监听取消模块，用于父界面关闭时，取消对服务中Subject的监听；

其中，服务创建模块的工作过程如下：

（1）、借助Angular DI的注入器继承机制，该服务实例能在父子组件中共享；

（2）、根据前端界面元素状态涉及后端接口的数量，声明对应数量的Subject对象；

Subject对象订阅模块的工作过程如下：

（一）、当该订阅监听到任意一Subject对象推送事件时，获取相关后端的接口，并且把获取的数据通过@Input输入属性，提供给子组件；

（二）、父组件中的界面元素和子组件的界面元素就能根据最新的数据信息，更新元素状态；具体如下：

S20201、获取配额信息，下一步执行步骤S20202；

S20202、创建按钮根据后端返回的配合变化信息，判断是否有剩余空间配额：

①、若有剩余配额，则执行步骤S20203；

②、若无剩余配额，则跳转至步骤S20204；

S20203、显示创建按钮为正常状态，下一步执行步骤S20205；

S20204、显示创建按钮是不能点击的置灰状态，下一步执行步骤S20205；

S20205、判断界面是否关闭：

①、若是，则跳转至步骤S20206；

②、若否，则跳转至步骤S20201；

S20206、结束。

4.根据权利要求3所述的前端状态变更管理的实现系统，其特征在于，所述服务实例引入模块的工作过程如下：

用户操作之后，需要界面元素更新状态给用户给直观的反馈时，通过触发服务实例中相关Subject的推送事件，父组件就能获取到推送事件，从而调取后端接口，获取最新信息，刷新父子组件界面元素状态。

Images