代码优雅化进阶学习（三）

最新推荐文章于 2024-08-27 15:59:21 发布

ALKEN ABBY

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量791

点赞数 1

分类专栏：日积月累(学习深度) 优秀代码汇总学习 react 文章标签： javascript 代码规范设计模式

本文链接：https://blog.csdn.net/qq_45803050/article/details/130068475

版权

日积月累(学习深度) 同时被 3 个专栏收录

30 篇文章 2 订阅

订阅专栏

react

24 篇文章 1 订阅

订阅专栏

优秀代码汇总学习

5 篇文章 0 订阅

订阅专栏

文章探讨了如何优雅地处理和展示按状态（如已实现和未实现）和类别分组的数据。通过使用枚举处理status状态和接口定义category，结合映射对象保证了代码的扩展性和可维护性。当新增状态或类别时，只需更新配置而无需改动核心代码。

摘要由CSDN通过智能技术生成

代码优雅化进阶学习（三）

文章目录

代码优雅化进阶学习（三）

需求详情

如下图：
实现类似结构，首先按照 status 状态的值，分为全部已实现和未实现；再按照 categoryId 来展示各类别

在这里插入图片描述

难点

如何保证 status 的扩展性和可维护性
如何保证若新增分类，即新增 categoryId 的可维护性

最佳实现效果

新增 categoryId ，不需要改内部逻辑代码，只需新增配置，就可以自动实现新增分类的对应数据
新增 status，不需要改内部逻辑代码，只需新增配置，就可以自动实现新增状态的对应数据

实现

export enum IStatus {
    /**
     * 未实现
     */
    NotObtained = 0,
    /**
     * 已实现
     */
    Obtained = 1
}

interface ICategory{
    title: string;
    data: IListItemTpe[];
}

const CATEGORY_MAP: { [_: string]: string } = {
    1: "苹果",
    2: "香蕉"
};

export function formatData(list: IListItemTpe[] | null, status: IStatus | null): ICategory[] {
    const categoryMap: { [_: string]: IListItemTpe[] } = {};

    list?.filter((item) => item.status === status)
        .forEach((item) => {
            const { categoryId } = item;
            if (!categoryMap[categoryId!]) categoryMap[categoryId!] = [];
            categoryMap[categoryId!].push(item);
        });
    return Object.keys(categoryMap).map((key) => {
        return {
            title: CATEGORY_MAP[key],
            data: categoryMap[key]
        };
    });
}

优点

用 map 取代了多个 if-else ，将所有 categoryId 作为 map 的key，value 值就是对应的数据列表
用另一个map 来做 categoryId 和 title 的一一对应，相当于是一个配置文件，当新增 categoryId 时，直接在该 map 里面进行添加配置
相当于使用了两个及多个 map 来避免多重 if else，并且满足了可维护性

前端小菜鸟持续学习中，欢迎指正！