一种web移动端组件库的管理方法技术

本发明专利技术涉及web移动端组件库管理技术领域，尤其为一种web移动端组件库的管理方法，包括启用全局状态管理库、引入组件库模板和组件的调用及管理，在全局状态管理库中，初始化组件视图所绑定的状态值和对组件状态的修改方法。适用于一些web移动端使用频率很高的组件，比如消息弹窗，loading提示窗，社交平台分享弹窗，登录提示弹窗等等，使用全部状态管理模式(如vuex)实现对组件状态的中心化统一管理，在任意的一个页面或组件，即使是嵌套层级较深的子组件中，我们都无需显式的引入所需要调用的组件的模板，只需要改变要复用的组件它本身所绑定的全部状态管理库中对应的state的值就能实现对组件的调用。实现对组件的调用。实现对组件的调用。

【技术实现步骤摘要】
一种web移动端组件库的管理方法


[0001]本专利技术涉及web移动端组件库管理
，具体为一种web移动端组件库的管理方法。

技术介绍

[0002]在本申请技术之前的最接近的现有技术，是采用全局注册或者局部注册来实现组件的注册。在每一个需要复用该组件页面中显式的引入组件标签，使用props传参的方式和组件进行通信从而实现对组件内部状态的管理；
[0003]上述web移动端组件库中对组件的管理存在如下缺陷：
[0004]缺点1：每个页面的模板中都要显式地引入所需要的组件，对于高频复用的组件而言，这种方法代码冗余性较大；
[0005]缺点2：多个页面或兄弟组件可能同时复用同一个组件，有的组件嵌套层级比较深。如果一个组件在多个地方被调用，那这个组件多个实例间的通信就会很复杂；
[0006]缺点3：某些组件(比如loading组件)的调用无法直接和网络请求方法实现一个耦合调用，
[0007]具体的，我们希望有的接口在网络请求结果返回前的等待过程中可以出现loading弹窗组件的提示，当网络请求结束后，自动关闭loading弹窗组件。这时候如果我们在每一个页面的每一个接口请求中独立管理loading组件的状态，那代码冗余性就很大；
[0008]缺点4：由于单个组件的状态管理分散在各个独立的页面或组件中，所以单个组件在同一时间存在被调用多次，出现多个组件实例的情况。这与某些组件(比如移动端的社交平台分享弹窗组件，登录提示弹窗组件，loading弹窗组件等)的业务设计逻辑是冲突的。
[0009]因此，针对上述问题提出一种web移动端组件库的管理方法。

技术实现思路

[0010]本专利技术的目的在于提供一种web移动端组件库的管理方法，适用于一些web移动端使用频率很高的组件，比如消息弹窗，loading提示窗，社交平台分享弹窗，登录提示弹窗等等，使用全部状态管理模式(如vuex)实现对组件状态的中心化统一管理，在任意的一个页面或组件，即使是嵌套层级较深的子组件中，我们都无需显式的引入所需要调用的组件的模板，只需要改变要复用的组件它本身所绑定的全部状态管理库中对应的state的值就能实现对组件的调用,以解决上述
技术介绍
中提出的问题。
[0011]为实现上述目的，本专利技术提供如下技术方案：
[0012]一种web移动端组件库的管理方法，包括如下步骤：
[0013]步骤S1：启用全局状态管理库，在全局状态管理库中，初始化组件视图所绑定的状态值和对组件状态的修改方法，其中，组件的状态管理由全局状态管理库统一中心化处理，所有对组件的状态的改变都必须通过全局状态管理库；
[0014]步骤S2：在组件的内部逻辑实现中，在组件的的视图操作和全局状态管理库中对
应的值进行一个双向绑定；
[0015]步骤S3：将组件模板在页面全局的Layout布局中引入；
[0016]步骤S4：在各个独立的页面中局部组件中，通过与全局状态管理库的通信以及对全局状态管理库中状态的改变从而达到对组件库组件的一个调用和管理。
[0017]步骤S1中，具体包括：
[0018]S11：启用全局状态管理库vuex，在状态管理库中初始化状态值(state)，管理组件视图状态，定义管理组件状态的state，并赋予默认值；
[0019]S12：在状态管理库中的mutation或action模块中定义好对组件状态值的修改方法。
[0020]步骤S2中，具体包括：
[0021]S21：在页面的全局layout中引入组件库模板，将组件视图的展示状态和全局状态管理库中的对应的state值做一个双向绑定，后使用全局状态管理库中对应的state值将组件渲染出来。
[0022]步骤S4中，组件的调用具体包括：
[0023]S41：通过更改全局状态库中的state值触发组件视图的更新，在监听到组件元素的点击事件被触发时，在监听的事件回调函数中调用全局状态库中mutation或action方法对组件的state值进行更改；
[0024]S42：组件的状态管理由全局唯一状态管理库vuex统一管理，所有对组件的状态的改变分别通过全局状态管理库中的mutation或action方法实现；
[0025]S43：在各个独立的页面，调用组件时，通过javascript调用vuex状态库中的mutation或action方法，修改了对应的state的值，引起组件视图的更新变化。
[0026]步骤S4中，组件的管理包括：
[0027]S44：主动调用全局状态库中的mutation或action方法对管理组件是否渲染的state的值修改为false；
[0028]S45：监听调用组件的页面的变化，当调用组件的页面被销毁时，自动执行S44步骤。
[0029]由上述本专利技术提供的技术方案可以看出，本专利技术提供的一种web移动端组件库的管理方法，有益效果是：
[0030]1、本专利技术提供了在单页面web应用中，在页面的布局中，将使用频率较高的组件库直接声明在layout布局中，在个页面的任何一个子组件中，通过javascript改变全局状态管理库的state，组件库里面的组件对全局状态管理库的对应的state进行监听，监听到全局状态管理库中state变化之后，改变组件的显示和切换；
[0031]2、实现了在项目封装的网络请求的工具函数的参数中，通过传入约定好的参数从而实现网络请求前后对组件的调用。在发起网络请求前，如果网络请求工具函数中对应的参数为true,我们就改变全局状态管库中对应的state的值从而让loading组件出现。网络请求后，再次修改全局状态管理库中的state的值从而控制loading组件的消失。通过配置网络工具函数的一个参数来控制组件库中某一个组件的显示和隐藏，省去了每个请求方法中的对组件库中组件调用重复的代码，最大化的实现了组件的优雅调用；
[0032]3、本专利技术方案中组件的状态管理是一个中心化的集中统一管理模式，所有对组件
的调用、和组件的通信都必须通过全局状态管理库，只需要在组件的实现逻辑中以及全局状态管理库中的状态操作方法控制组件实例的数量，就能保证组件在同一时间能被实例化的数量。
附图说明
[0033]图1为本专利技术一种web移动端组件库的管理方法结构示意图。
具体实施方式
[0034]为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。
[0035]为了更好地理解上述技术方案，下面将结合说明书附图以及具体实施方式对上述技术方案进行详细的说明。
[0036]如图1所示，本专利技术实施例提供一种web移动端组件库的管理方法，包括如下步骤：
[0037]步骤S1：启用全局状态管理库，在全局状态管理库中，初始化组件视本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web移动端组件库的管理方法，其特征在于：包括如下步骤：步骤S1：启用全局状态管理库，在全局状态管理库中，初始化组件视图所绑定的状态值和对组件状态的修改方法，其中，组件的状态管理由全局状态管理库统一中心化处理，所有对组件的状态的改变都必须通过全局状态管理库；步骤S2：在组件的内部逻辑实现中，在组件的的视图操作和全局状态管理库中对应的值进行一个双向绑定；步骤S3：将组件模板在页面全局的Layout布局中引入；步骤S4：在各个独立的页面中局部组件中，通过与全局状态管理库的通信以及对全局状态管理库中状态的改变从而达到对组件库组件的一个调用和管理。2.根据权利要求1所述的一种web移动端组件库的管理方法，其特征在于：所述步骤S1中，具体包括：S11：启用全局状态管理库vuex，在状态管理库中初始化状态值(state)，管理组件视图状态，定义管理组件状态的state，并赋予默认值；S12：在状态管理库中的mutation或action模块中定义好对组件状态值的修改方法。3.根据权利要求1所述的一种web移动端组件库的管理方法，其特征在于：所述步骤S2中，具体包括：S21：在页面的全局layout中引入组件库模板，将组件视图的展示状态...

【专利技术属性】
技术研发人员：吴加祥，
申请(专利权)人：厦门最有料数字科技有限公司，
类型：发明
国别省市：