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

技术领域

本发明涉及前端技术领域，具体提供一种前端选项卡的优化加载方法及装置。

背景技术

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

由此,在前端选项卡研发的过程中，加载的时效性和界面渲染的有效性太低，无法及时反馈响应当前的界面需求。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的前端选项卡的优化加载方法。

本发明进一步的技术任务是提供一种设计合理，安全适用的前端选项卡的优化加载装置。

本发明解决其技术问题所采用的技术方案是：

一种前端选项卡的优化加载方法，首先在前端工程的tab组件里使用懒加载的属性，即在切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载。

进一步的，在运用懒加载的技术之后，前端鉴权组件in-acl-source可以根据当前的传参值传参给鉴权接口has-permissions，确定inGroup当前是属于那个鉴权group,根据鉴权group找到鉴权组件的标识。

进一步的，根据inService服务名称、inServiceType资源类型和inAcions需要鉴权的列表，需要和接口配合，需要鉴权的按钮参数均在inActions,当及时拿到了这些参数的值并且及时的传参给has-permission接口，has-permisson接口响应当前账户的当前标识的鉴权权限。

进一步的，has-permisson接口响应当前账户的当前标识的鉴权权限，赋值给dom结构，前端dom结构进行相应的标签处理，button按钮的及时赋值disabled属性，并给出当前未能赋值权限的中文提示，反馈在界面上就是当鼠标划过button按钮的时候，在button按钮的上方会悬浮当前未能赋值权限的提示。

进一步的，所述提示是嵌套在button按钮的外面的div结构上的，是为了适配还有其他按钮的情况。

进一步的，在button按钮的上方如果是块标签li，那赋值当前菜单的nz-menu-item的nzDisabled属性，进而禁止或者放开当前块标签的点击，同样的在块标签的上方悬浮当前不能点击的中文提示。

进一步的，在button按钮的上方是a标签，对a标签的样式进行相应的处理，不可点击的样式赋值给a标签，也是在a标签上方给与是否有权限的中文提示。

进一步的，当运用了tab懒加载的技术以后，不再关注当前index，仅需在当前tab组件加载当前列表的loadComponent组件方法，然后在父组件详情界面的刷新按钮方法上根据当前tab子组件的属性标识进行判断即可，调取当前子组件的加载方法，实现当前子组件的刷新按钮的正常使用。

一种前端选项卡的优化加载装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行一种前端选项卡的优化加载方法。

本发明的一种前端选项卡的优化加载方法及装置和现有技术相比，具有以下突出的有益效果：

本发明可以合理有效的加载当前tab所需要的需求功能，方便高效。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

附图1是一种前端选项卡的优化加载方法中当前详情界面运用tab组件的界面示意图；

附图2是一种前端选项卡的优化加载方法兄弟组件的tab使用界面图。

具体实施方式

为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。

下面给出一个最佳实施例：

如图1-2所示，本实施例中的一种前端选项卡的优化加载方法，首先在前端工程的tab组件里，如果是使用的简化版本的tab组件，在产品的详情界面引用的时候，会默认加载所有的tab下的界面，每个tab当前引用的接口也会一并加载出来，这样一来，势必会影响当前产品的详情界面的渲染效率不高，接口的请求速度，界面的部分地方依赖接口的请求返回，会导致暂时空白加载的情况；界面体验性不友好。

再就是影响浪潮云的前端鉴权组件的正常使用，因为鉴权组件的赋值依赖于当前鉴权组件的接口请求，当切换tab的时候，由于已经过早的加载过鉴权接口，在切换后的当前tab界面拿不到鉴权接口返回的正确权限信息，所以会导致界面的鉴权不准确问题，这种现象导致鉴权的使用不稳定，有时候正常有时候反而不正常。

使用tab组件的懒加载的属性，即在我们切换当前tab组件的时候才开始加载当前组件下的dom结构以及相关接口，进而保证当前dom能及时的用到所用接口的参数，保证鉴权的参数准确，并及时响应dom的权限加载；还有就是当前界面的组件的接口的响应性，在拿到对应的接口参数从而准确的进行dom的界面渲染。

在运用懒加载的技术之后，前端鉴权组件in-acl-source可以充分根据当前的传参值传参给鉴权接口has-permissions，inGroup当前是属于哪个鉴权group,根据鉴权group可以很明确的找到鉴权组件的标识。

然后根据inService服务名称，inServiceType资源类型，inAcions需要鉴权的列表，这里是需要和接口配合，需要鉴权的按钮参数都是在这个inActions,当及时拿到了这些参数的值并且及时的传参给has-permission接口，has-permisson接口就进而响应当前账户的当前标识的鉴权权限，赋值给dom结构，前端dom结构进行相应的标签处理，button按钮的及时赋值disabled属性，并给出当前未能赋值权限的中文提示。

反馈在界面上就是当鼠标划过button按钮的时候，在button按钮的上方会悬浮当前未能赋值权限的提示，当然这个提示是嵌套在button按钮的外面的div结构上的，是为了适配还有其他按钮的情况。

如果是块标签li，那就是赋值当前菜单的nz-menu-item的nzDisabled属性，进而禁止或者放开当前块标签的点击，同样的在块标签的上方悬浮当前不能点击的中文提示；如果是a标签呢，那就是对a标签的样式进行相应的处理，不可点击的样式赋值给a标签，同理的也是在a标签上方给与是否有权限的中文提示。

当然这些所有的禁用属性isDisabled也是取决于鉴权接口的及时响应性，才能正确的赋值判断各种标签的权限性，当运用了懒加载模式，鉴权接口响应及时，界面dom赋值准确，表现性更加准确和及时，体验性更好。

要做到当前tab的刷新只是刷新当前tab，并非是刷新当前整个详情界面，这个时候也是需要tab组件的懒加载，懒加载的运用之后，切换tab是在加载当前tab组件的内容，因为产品线详情的tab组件是封装的子组件，外面的tab组件调用各个子tab组件。

在未运用懒加载的技术前，首先子tab的ngOnInit生命周期的方法是不能执行的，因为这个是默认加载一次，当切换当前tab的时候，未能重新加载当前tab界面，所以当前子tab的列表页不能显示实时的加载状态，进而看不出当前刷新的按钮的实质效果；当然可以利用ngOnChanges生命周期的钩子函数onChanges检测到当前子组件的接收值得变化，进而条件判断来调取当前子tab得界面接口请求加以loading，但是这种方法需要记录当前得tab索引值index,用以区分在点击右上角得刷新按钮得时候，是刷新的哪个子tab的界面，记录index值颇为繁琐，如果子tab项很多还是会记录很多，在判断条件上又加以判断，实现起来繁琐，代码过于臃肿。

当运用了tab懒加载的技术以后呢，不用再关注当前index，只需要再当前tab组件加个加载当前列表的loadComponent组件方法，然后再父组件详情界面的刷新按钮方法上根据当前tab子组件的属性标识进行判断即可，调取当前子组件的加载方法，实现当前子组件的刷新按钮的正常使用，简单高效。

OnInit生命周期函数，如果有些需求是需要再tab进入之前就需要加载完成拿到相应的数据，懒记载也是很有效的，比如兄弟组件的tab，在子tab数据库管理组件中用到账子tab账号管理tab的账号列表功能。

因为需要这两个子组件做到及时通信，也就是说在账号管理页的tab里，如果进行创建账号或者更新账号的话，账号管理的列表刷新了，那我们数据库管理的账号列表也是需要拿到最新的接口数据，才能进行及时准确的数据库操作的相关功能，这时候就是需要在这两个tab上加以懒加载的技术了，可以实现当切换当前tab的时候呢，实时的请求当前tab所需要的接口数据，不至于在请求之前没有拿到数据，导致错误的数据库操作或者更新功能，或者虽然实现了相关功能，但是在每次子tab的账号管理页创建之后呢需要传递刷新参数给数据库管理tab页面，代码繁琐，代码实现有效率低。

基于上述方法，本实施例中的一种前端选项卡的优化加载装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行一种前端选项卡的优化加载方法。

上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种前端选项卡的优化加载方法及装置权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。