前端：利用生成器和迭代器实现分离逻辑

title: 前端：利用生成器和迭代器实现分离逻辑
date: 2024-03-05 23:31:12
categories: 前端
tags:

前端
JavaScript

工作半年了常没时间、没动力学习新东西，每天就在忙着写业务逻辑，非常的枯燥。即使考虑到可以用新东西来实现某个需求，但为了保证业务的快速迭代，只能选择更稳妥的方式。

生成器和迭代器

今天完善一个需求，统一检索中，检索的各个实体tab依次弹出，实现类似RXJS弹珠图的效果。

class TabIterabor {constructor(private models: string[],private query: string,private index = 0) {}// asyncIterator 标识是一个异步迭代器，next函数返回一个Promise对象[Symbol.asyncIterator]() {return {next: async ()=> {return { value: null, done: true }}        }}// 可以使用生成器来构造自定义迭代器// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator/Iterator// *[Symbol.iterator]() {//   for (let value = this.#start; value <= this.#end; value += this.#step) {//     yield value;//   }// }
}

权限和菜单交互的设计

隐藏菜单
- 控制子菜单提升效果
- 空权限时不允许登录
不隐藏菜单，将指定的路由页面设置成404或者403页面

退出登录时应该要清空store和router的信息

封装hooks，增强router功能

import { Router, RouteRecordRaw } from "vue-router";export const useExtRouter = (router: Router) => {/*** @function 退出登陆后，需要清空路由* @param {Router} router* @param {string[]} excludes name | path* @description* 在登录情况下，用户一定存在404路由用来显示不存在的或被过滤的路由页面，同时由于404路由应该放在异步路由后面* 所以在重置router时，需要清除404路由以避免后续添加异步路由时添加到404路由后面*/const resetRouter = (excludes: string[]) => {const routes = router.getRoutes();routes.forEach((item) => {if (!excludes.find((x) => x === item.path || x === item.name)) {router.removeRoute(item.name as string);}});};/*** 删除嵌套路由* @param route*/const deepDelete = (route: RouteRecordRaw) => {route.children?.forEach((item) => deepDelete(item));router.removeRoute(route.name as string);};/*** 添加嵌套路由* @param routes*/const addRoutes = (routes: RouteRecordRaw[]) => {routes.forEach((item) => {deepDelete(item); // 避免重复添加路由router.addRoute(item);});};return {resetRouter,deepDelete,addRoutes,};
};export default useExtRouter;

路由别名

在权限菜单的控制中，会存在前后登录的用户权限不一样导致可见的菜单不一样的问题。怎么动态的控制用户跳转的主页呢？

因为在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请求，决定是否赋值数据。