映射表优化前端项目高频率字段

背景

当项目开发到一定阶段,后端返回的许多字段是拥有特定含义,需要特别处理. 比如一些业务逻辑状态，如 { status: 1/2/3}, 这时候后端告诉你 1 代表成功 2代表失败 3代表警告, 这时你应该很理所当然的根据状态展示给用户对应的文字.

        <span v-if='status === 1'>成功</span> 
        <span v-else-if='status === 1'>失败</span> 
        <span v-else>警告</span> 

到这里都是没问题的,但如果这个状态许多页面共用的,复制粘贴一把梭哈也是没问题的. 但万一后期若有改动,如产品经理提需求'成功'要改成'非常成功',这时候你只能全局一个个找对应状态,当然你可以通过全局搜索一下就能找到,但是量大了后,后期维护成本就会明显提高.

解决

解决方法的其实也很简单,定义一个映射关系的文件,专门处理这些频繁出现的状态共用字段.

1. 第一种简单粗暴直接用对象形式就好了

    export const statusMap = {
        1:  '成功',
        2:  '失败',
        3:  '警告'
    }
    
    <!-- 全局中任意地方使用到这些状态的时候 -->
    import {statusMap} from '../utils/util'

    <span v-if='status === 1'>{{ statusMap[1] }}</span> 
    <span v-else-if='status === 2'>{{ statusMap[2] }}</span> 
    <span v-else>{{ statusMap[3] }}</span> 

2. 第二种可能会更优雅点,因为提到映射,那就不得不提Map方法了(相对对象的优势就是Map是可以一对多)

    <!-- 用法 -->
    <!-- var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95  -->

    export const statusMap = new Map([
        [1:  '成功'],
        [2:  '失败'],
        [3:  '警告']
    }])
    
    <!-- 全局中任意地方使用到这些状态的时候 -->
    import {statusMap} from '../utils/util'

    <!-- 利用Map.get(key)获取即可 -->
    <span v-if='status === 1'>{{ statusMap.get(1) }}</span> 
    <span v-else-if='status === 2'>{{ statusMap.get(2) }}</span> 
    <span v-else>{{ statusMap.get(3) }}</span> 

总结

随着后期业务不断推进,某些状态字段会频繁出现, 当你要改动的时候, 就不得不牵一发而动全身全局逐个修改, 有了映射表只需要改其中对应的字段便可,大大提高了代码可维护性！