简单分享一下对于后端返回的状态码，我认为的最优雅的封装方案

前言

在前端开发中，我们经常会遇到需要根据后端返回的状态码来显示不同的标签和颜色的情况。比如，我们有一个合同列表，里面的status代表各种不同的意义，我们需要根据status的值来显示对应的标签和颜色。当然，比如有搜索的功能，还涉及到根据状态搜索。例如：

status	label	color
0	待签约	红色
1	生效中	绿色
2	已到期	灰色
3	已取消	灰色
4	未生效	灰色
5	已作废	灰色
6	已中止	灰色

那么，遇到这种情况你会怎么去写呢？使用v-if判断吗？其实这些东西本身并没有任何技术难点，只不过是开发思维导致每个人写法不同，有的人喜欢用计算属性去各种else if套，有人直接cv大法，每个页面只要使用到都会写出如下代码：

<div v-if="item.status === 0" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 1" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 2" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 3" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 4" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 5" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 6" :style="{ color: 'xxx' }">xxx</div>

结果一套业务写下来，用到这个的页面有一大堆，忽然某一天后端老哥告诉你：这个状态我加了xxx状态你加一下。你又当如何应对？什么？你说批量替换？那你如果布局不同导致某页面会出现如下情况：

<span v-if="item.status === 1" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 0" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 2" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 3" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 4" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 5" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 6" :style="{ color: 'xxx' }">xxx</span>

每个地方写出来的因为各种原因可能会有一点小出入导致批量替换不到。而且涉及到根据状态码搜索的功能也替换不到，那么有没有一种简单和优雅的封装方式，让我们的代码更容易维护和复用呢？

答案是：有！在这边博客中，我将向你介绍一种用类方法封装选项列表的方案，让你可以用一行代码就获取到任何属性的值，无论是标签还是颜色。这样做的好处是：

• 你可以把相关的数据和逻辑封装在一个类中，提高了内聚性。
• 你可以利用继承和多态的特性，来扩展或重写这个类，实现更多的功能或适应更多的场景。
• 你可以利用构造函数或静态方法来初始化或创建这个类的实例，提高了灵活性。

定义一个接口

首先，我们需要定义一个接口，表示选项对象。一个选项对象包含三个属性：label（标签），value（值），style（样式）。我们可以用TypeScript来定义这个接口，如下：

// 定义一个接口，表示选项对象
interface IOptionItem<T> {
    label: string;
    value: T;
    style?: CSSProperties;
}

复制

注意，我们用了一个泛型参数T来表示value的类型，这样我们就可以让这个接口支持不同类型的值，比如数字、字符串、布尔值等。

定义一个泛型类

接下来，我们需要定义一个泛型类，表示选项列表。一个选项列表包含一个私有属性options（选项数组），和一个公共方法get（根据值获取对应的属性）。我们可以用TypeScript来定义这个泛型类，如下：

// 定义一个泛型类，表示选项列表
class OptionList<T> {
    // 存储选项列表
    options: IOptionItem<T>[] = [];

    // 定义一个构造函数，接收一个选项列表作为参数
    constructor(optionList: IOptionItem<T>[]) {
        this.options = optionList;
    }

    // 定义一个通用方法，根据值获取对应的属性
    public get<K extends keyof IOptionItem<T>>(value: T, key: K) {
        return this.options.find(v => v.value === value)?.[key];
    }
}

复制

注意，我们用了一个泛型参数T来表示选项列表的类型，这样我们就可以让这个类支持不同类型的选项列表，比如数字、字符串、布尔值等。我们还用了一个泛型参数K来表示选项对象的属性名，这样我们就可以让这个方法返回任何属性的值，比如label、value、style等。

创建一个选项列表的实例

最后，我们需要创建一个选项列表的实例，用来存储合同状态的选项和颜色。我们可以用TypeScript来创建这个实例，如下：

// 创建一个选项列表的实例
const contractStatusOptions = new OptionList<number>([
    { label: "待签约", value: 0, style: { color: "red",'--bg-color':'#1899ff' } },
    { label: "生效中", value: 1, style: { color: "green" } },
    { label: "已到期", value: 2, style: { color: "gray" } },
    { label: "已取消", value: 3, style: { color: "gray" } },
    { label: "未生效", value: 4, style: { color: "gray" } },
    { label: "已作废", value: 5, style: { color: "gray" } },
    { label: "已中止", value: 6, style: { color: "gray" } }
]);

复制

注意，我们用了number类型作为选项列表的类型，因为合同状态的值是数字。我们还给每个选项对象添加了一个style属性，用来存储颜色。

调用通用方法，获取标签和样式

现在，我们可以用这个实例来调用通用方法，根据状态值获取对应的标签和样式。我们可以用TypeScript来调用这个方法，如下：

// 调用通用方法，获取标签和样式
contractStatusOptions.get(1, 'label'); // 生效中
contractStatusOptions.get(1, 'style'); // { color: "green" }

复制

注意，我们传入了两个参数：状态值和属性名。这样，我们就可以用一行代码就获取到任何属性的值，无论是标签还是颜色。

总结

在本文中，我向你介绍了一种用类方法封装选项列表的方案，让你可以用一行代码就获取到任何属性的值，无论是标签还是颜色。这样做的好处是：

• 你可以把相关的数据和逻辑封装在一个类中，提高了内聚性。
• 你可以利用继承和多态的特性，来扩展或重写这个类，实现更多的功能或适应更多的场景。
• 你可以利用构造函数或静态方法来初始化或创建这个类的实例，提高了灵活性。

我希望你能从这篇文章中学到一些有用的知识，并且能够在你自己的项目中应用这种封装方案。如果你有任何问题或想法或者有更加适合的封装方案欢迎讨论！