一种前端选项卡的优化加载方法及装置制造方法及图纸

本发明专利技术涉及前端技术领域，具体提供了一种前端选项卡的优化加载方法，首先在前端工程的tab组件里使用懒加载的属性，即在切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载。与现有技术相比，本发明专利技术可以合理有效的加载当前tab所需要的需求功能，方便高效，具有良好的推广价值。具有良好的推广价值。具有良好的推广价值。

【技术实现步骤摘要】
一种前端选项卡的优化加载方法及装置


[0001]本专利技术涉及前端
，具体提供一种前端选项卡的优化加载方法及装置。

技术介绍

[0002]在进行选项卡的前端研发的过程中,在切换当前tab的索引的时候，需要记住当前切换之后的索引值，并且是重新加载下当前部分组件，而不是重新记载当前界面所有的组件；另外在进行浪潮云的前端鉴权的应用的时候，由于鉴权接口的请求不及时性，需要优先加载下鉴权接口，以确保当前按钮或者标签的权限正确，才能及时的响应鉴权接口的反馈并外现在界面上。
[0003]由此,在前端选项卡研发的过程中，加载的时效性和界面渲染的有效性太低，无法及时反馈响应当前的界面需求。

技术实现思路

[0004]本专利技术是针对上述现有技术的不足，提供一种实用性强的前端选项卡的优化加载方法。
[0005]本专利技术进一步的技术任务是提供一种设计合理，安全适用的前端选项卡的优化加载装置。
[0006]本专利技术解决其技术问题所采用的技术方案是：
[0007]一种前端选项卡的优化加载方法，首先在前端工程的tab组件里使用懒加载的属性，即在切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载。
[0008]进一步的，在运用懒加载的技术之后，前端鉴权组件in
‑
acl
‑
source可以根据当前的传参值传参给鉴权接口has
‑
permissions，确定inGroup当前是属于那个鉴权group,根据鉴权group找到鉴权组件的标识。
[0009]进一步的，根据inService服务名称、inServiceType资源类型和inAcions需要鉴权的列表，需要和接口配合，需要鉴权的按钮参数均在inActions,当及时拿到了这些参数的值并且及时的传参给has
‑
permission接口，has
‑
permisson接口响应当前账户的当前标识的鉴权权限。
[0010]进一步的，has
‑
permisson接口响应当前账户的当前标识的鉴权权限，赋值给dom结构，前端dom结构进行相应的标签处理，button按钮的及时赋值disabled属性，并给出当前未能赋值权限的中文提示，反馈在界面上就是当鼠标划过button按钮的时候，在button按钮的上方会悬浮当前未能赋值权限的提示。
[0011]进一步的，所述提示是嵌套在button按钮的外面的div结构上的，是为了适配还有其他按钮的情况。
[0012]进一步的，在button按钮的上方如果是块标签li，那赋值当前菜单的nz
‑
menu
‑
item的nzDisabled属性，进而禁止或者放开当前块标签的点击，同样的在块标签的上方悬浮当前不能点击的中文提示。
[0013]进一步的，在button按钮的上方是a标签，对a标签的样式进行相应的处理，不可点击的样式赋值给a标签，也是在a标签上方给与是否有权限的中文提示。
[0014]进一步的，当运用了tab懒加载的技术以后，不再关注当前index，仅需在当前tab组件加载当前列表的loadComponent组件方法，然后在父组件详情界面的刷新按钮方法上根据当前tab子组件的属性标识进行判断即可，调取当前子组件的加载方法，实现当前子组件的刷新按钮的正常使用。
[0015]一种前端选项卡的优化加载装置，包括：至少一个存储器和至少一个处理器；
[0016]所述至少一个存储器，用于存储机器可读程序；
[0017]所述至少一个处理器，用于调用所述机器可读程序，执行一种前端选项卡的优化加载方法。
[0018]本专利技术的一种前端选项卡的优化加载方法及装置和现有技术相比，具有以下突出的有益效果：
[0019]本专利技术可以合理有效的加载当前tab所需要的需求功能，方便高效。
附图说明
[0020]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0021]附图1是一种前端选项卡的优化加载方法中当前详情界面运用tab组件的界面示意图；
[0022]附图2是一种前端选项卡的优化加载方法兄弟组件的tab使用界面图。
具体实施方式
[0023]为了使本
的人员更好的理解本专利技术的方案，下面结合具体的实施方式对本专利技术作进一步的详细说明。显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本专利技术保护的范围。
[0024]下面给出一个最佳实施例：
[0025]如图1
‑
2所示，本实施例中的一种前端选项卡的优化加载方法，首先在前端工程的tab组件里，如果是使用的简化版本的tab组件，在产品的详情界面引用的时候，会默认加载所有的tab下的界面，每个tab当前引用的接口也会一并加载出来，这样一来，势必会影响当前产品的详情界面的渲染效率不高，接口的请求速度，界面的部分地方依赖接口的请求返回，会导致暂时空白加载的情况；界面体验性不友好。
[0026]再就是影响浪潮云的前端鉴权组件的正常使用，因为鉴权组件的赋值依赖于当前鉴权组件的接口请求，当切换tab的时候，由于已经过早的加载过鉴权接口，在切换后的当前tab界面拿不到鉴权接口返回的正确权限信息，所以会导致界面的鉴权不准确问题，这种
现象导致鉴权的使用不稳定，有时候正常有时候反而不正常。
[0027]使用tab组件的懒加载的属性，即在我们切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载；还有就是当前界面的组件的接口的响应性，在拿到对应的接口参数从而准确的进行dom的界面渲染。
[0028]在运用懒加载的技术之后，前端鉴权组件in
‑
acl
‑
source可以充分根据当前的传参值传参给鉴权接口has
‑
permissions，inGroup当前是属于哪个鉴权group,根据鉴权group可以很明确的找到鉴权组件的标识。
[0029]然后根据inService服务名称，inServiceType资源类型，inAcions需要鉴权的列表，这里是需要和接口配合，需要鉴权的按钮参数都是在这个inActions,当及时拿到了这些参数的值并且及时的传参给has
‑
permission接口，has
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端选项卡的优化加载方法，其特征在于，首先在前端工程的tab组件里使用懒加载的属性，即在切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载。2.根据权利要求1所述的一种前端选项卡的优化加载方法，其特征在于，在运用懒加载的技术之后，前端鉴权组件in
‑
acl
‑
source可以根据当前的传参值传参给鉴权接口has
‑
permissions，确定inGroup当前是属于那个鉴权group,根据鉴权group找到鉴权组件的标识。3.根据权利要求2所述的一种前端选项卡的优化加载方法，其特征在于，根据inService服务名称、inServiceType资源类型和inAcions需要鉴权的列表，需要和接口配合，需要鉴权的按钮参数均在inActions,当及时拿到了这些参数的值并且及时的传参给has
‑
permission接口，has
‑
permisson接口响应当前账户的当前标识的鉴权权限。4.根据权利要求3所述的一种前端选项卡的优化加载方法，其特征在于，has
‑
permisson接口响应当前账户的当前标识的鉴权权限，赋值给dom结构，前端dom结构进行相应的标签处理，button按钮的及时赋值disabled属性，并给出当前未能赋值权限的中文提...

【专利技术属性】
技术研发人员：黄华，宋亚萍，于沈课，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：