代码优雅化进阶学习(三)
需求详情
如下图:
实现类似结构,首先按照 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,并且满足了可维护性
前端小菜鸟持续学习中,欢迎指正!