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

---

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

GitHub

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