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

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

需求详情

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

难点

1. 如何保证 status 的扩展性和可维护性
2. 如何保证若新增分类，即新增 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，并且满足了可维护性

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