在大型中后盾我的项目开发中，尤其是在应用React进行开发时，咱们会遇到很多下拉框数据、多选框数据、或者编码中多处应用到的业务型公共映射表。为了便于保护，能够把这些数据都集中放到一个模块中，而不是扩散的写在各个中央。
实现思路
咱们定义一个IMapExtra接口扩大一下Map实例，建设两个类MapExtra和DataMap，MapExtra是为了在应用数据时更不便获取Map类型数据。最初把map（数据映射）都存储在DataMap类的成员中。
开始
首先咱们创立一个DataMap.ts文件用于公共数据治理的模块，并在外面创立一个MapExtra类实现IMapExtra接口，MapExtra性能次要是对原生Map进行一个简略的封装。起因是咱们须要这个MapExtra实例来存储数据并可更不便的应用.get间接获取到对应的数据项。
DataMap.ts
import * as utils from '@/utils';
type MapType<T> = Array<[T, T]>;
interface IMapExtra {
map: Map<string| number, string| number>;
has: ( key: string) => boolean;
get: ( key: string) => string| number;
getOptions: () => TYPE.IOption[];
}
class MapExtra implements IMapExtra {
public map;
private _map;
public constructor( map: MapType<string| number>) {
this._map = new Map(map);
this.map = new Map(map);
}
public getOptions: IMapExtra['getOptions'] = () => utils.mapToOption(this._map);
public has: IMapExtra['has'] = ( key) => this._map.has(key);
public get: IMapExtra['get'] = ( key) => this._map.get(key) ?? key;
}
同时下面减少了一个getOptions办法更不便的拿到对应以后数据的下拉框构造，当然这里还能够扩大map转其余构造的数据。
mapToOption办法和下拉框构造接口的细节：
import * as TYPE from '@/interface';
//map 转换成 select option型数组
export const mapToOption = function(map: Map<string | number, string | number>): TYPE.IOption[] {
const option = [];
for (const [k, v] of map) {
option.push({label: v, value: k});
}
return option;
};
interface中导出IOption
export interface IOption<T = string | number | boolean> {
label: string | React.ReactNode;
value: T;
name?: string | number;
}接下来持续在文件中创立两个FC、LC对象和DataMap类，把要存储的数据通过MapExtra实例化后存到对应属性中：
...
const FC = {
category: new MapExtra([
['product', '产品'],
['marketplace', '平台'],
]),
timeUnit: new MapExtra([
['month', '月度'],
['quarter', '季度'],
['year', '年度'],
]),
};
const LC = {
remarkAction: new MapExtra([
['created', '创立'],
['edited', '批改'],
['remark', '备注']
]),
infoStatusMap: new MapExtra([
['normal', '失常'],
['invalid', '作废']
])
};
class DataMap {
private _maps: Record<string, Record<string, IMapExtra>> = {
LC,
FC
};
public getMapsLC: () => Record<keyof typeof LC, IMapExtra> = () => {
return this._maps.LC;
};
public getMapsFC: () => Record<keyof typeof FC, IMapExtra> = () => {
return this._maps.FC;
};
}
const dataMap = new DataMap();
export const getMapsLC = dataMap.getMapsLC();
export const getMapsFC = dataMap.getMapsFC();DataMap是次要的用于治理整个数据模块，并导出DataMap对应模块的该实例办法，getMapsXXX其实就是对外提供间接获取对应XXX的数据模块。
成员_maps通过对象模式辨别模块间接导出LC业务模块的dataMap实例，当后续新增业务模块时也是一样的须要新建对应的获取成员办法和导出。
这里_maps是定义为了一个公有成员，其实不是真正意义上的公有成员，_maps属性还是能够通过实例上获取到的。
最初
上面咱们来应用这些数据，如获取一个下拉数据数组：
1.
import { getMapsLC } from '@/libs/DataMap';
console.log(getMapsFC.timeUnit.getOptions())2.
//antd下拉框配置
{
name: 'action',
label: '抉择你的类型',
component: {
mode: 'multiple',
type: 'select',
options:getMapsLC.remarkAction.getOptions(),
placeholder: '请抉择一项'
}
},
//antd映射出对应的值
{
title: '表格某一列',
width: 100,
dataIndex: 'action',
render: (text: string) => getMapsLC.remarkAction.get(text)
},导入getMapsLC之后，getMapsLC.remarkAction.get(XXX) 间接就能获取到对应数据，getMapsLC.remarkAction.map则是间接取出一个map型的数据，并且可通过mapToOption转为下拉框数据的值。
残缺代码：
import * as utils from '@/utils';
type MapType<T> = Array<[T, T]>;
interface IMapExtra {
map: Map<string| number, string| number>;
has: ( key: string) => boolean;
get: ( key: string) => string| number;
getOptions: () => TYPE.IOption[];
}
class MapExtra implements IMapExtra {
public map;
private _map;
public constructor( map: MapType<string| number>) {
this._map = new Map(map);
this.map = new Map(map);
}
public getOptions: IMapExtra['getOptions'] = () => utils.mapToOption(this._map);
public has: IMapExtra['has'] = ( key) => this._map.has(key);
public get: IMapExtra['get'] = ( key) => this._map.get(key) ?? key;
}
const FC = {
category: new MapExtra([
['product', '产品'],
['marketplace', '店铺'],
]),
level: new MapExtra([
['primary', '一级分类'],
['secondary', '二级分类']
]),
timeUnit: new MapExtra([
['month', '月度'],
['quarter', '季度'],
['year', '年度'],
]),
};
const LC = {
remarkAction: new MapExtra([
['created', '创立'],
['edited', '批改'],
['remark', '手动备注']
]),
infoStatusMap: new MapExtra([
['normal', '失常'],
['invalid', '已作废']
])
};
class DataMap {
private _maps: Record<string, Record<string, IMapExtra>> = {
LC,
FC
};
public getMapsLC: () => Record<keyof typeof LC, IMapExtra> = () => {
return this._maps.LC;
};
public getMapsFC: () => Record<keyof typeof FC, IMapExtra> = () => {
return this._maps.FC;
};
}
const dataMap = new DataMap();
export const getMapsLC = dataMap.getMapsLC();
export const getMapsFC = dataMap.getMapsFC();
发表回复