工作半年了常没时间、没动力学习新东西,每天就在忙着写业务逻辑,非常的枯燥。即使考虑到可以用新东西来实现某个需求,但为了保证业务的快速迭代,只能选择更稳妥的方式。
生成器和迭代器
今天完善一个需求,统一检索中,检索的各个实体tab依次弹出,实现类似RXJS弹珠图的效果。
1 | class TabIterabor { |
权限和菜单交互的设计
隐藏菜单
- 控制子菜单提升效果
- 空权限时不允许登录
不隐藏菜单,将指定的路由页面设置成404或者403页面
退出登录时应该要清空store和router的信息
封装hooks,增强router功能
1 | import { Router, RouteRecordRaw } from "vue-router"; |
路由别名
在权限菜单的控制中,会存在前后登录的用户权限不一样导致可见的菜单不一样的问题。怎么动态的控制用户跳转的主页呢?
因为在404页面和登录成功后跳转都是 /
,那就想到让 /
跳转到 /home
,在清洗权限路由(菜单)时,给找到的第一个有权限的路由标识路由别名,至此所有跳转到主页面 /
的都会跳转到 /home
,而 /home
属于动态设置的路由别名,就可以动态的控制主页面了。
统一检索多个状态
tabs加载中,不允许输入新的query,也不允许发起新的query
tabs加载完成,第一个count非0的tab内容列表加载中,此时请求新query,加载新的tabs,此时上一次tabs中第一个count非0的tab请求完成,而当前tabs的第一个非0tab还没有发出请求(requestCount没有变化),所以会导致列表内容变化,展示不合理。
这个现象的主要问题在新tabs的第一个count非0的tab还没有发出请求,导致requestCount没有变化,所以达不到丢弃旧数据的效果。
解决方案:
不能简单的判断extTabLoading处于loading就丢弃数据,因为存在第一个Tab发出的请求快于extTabs的请求。
通过判断extTabs的请求次数来决定是否赋值。
因为此时count非0的tab已经发出请求,此时再发新extTabs的请求,然后再发count非0的tab请求,count非0的tab请求可能快于extTabs,所以不能简单将extLoading时的列表内容丢弃,可能丢弃的就是需要请求的内容。并且在新的tab发出请求后,旧tab发出的请求一定会被丢弃(requestCount)。
最终明确需要解决的问题时不同的extTabs请求,决定是否赋值数据。