背景
在真实项目中发现了一段很震撼的代码，感觉这段程序足以让这个项目失败。代码出自公司十几年工作经验同事之手，沟通无效的情况下，自已动手优化。
原代码
配置代码：
;
(function (definde) {
definde(function (require, exports, module) {
var colorSetting = {
//目标值颜色
target: {
c1: '#E5CF0D', //黄色
c2: '#FF6600', //橙色
c3: '#FFB980', //淡黄色
},
//线图走势图
line: {
HD: '#25D053', //绿色
DL: '#01FEFD', //浅蓝
XY: '#FF00FF', //紫色
ZZ: '#FF6600', //橙色
RK: '#25D053', //绿色
N1: '#F54D4D', //红色 业务类型1 脱敏
I2: '#808080', //灰色 业务类型2
V3: '#8D98B3', //深蓝色 业务类型3
L12F: '#25D053', //绿色
L341: '#01FEFD', //浅蓝
L42P: '#FF00FF', //紫色
L591: '#FF6600', //橙色
},
//柱状图
bar: {
in: '#25D053', //绿色 //实际值在目标值范围内
out: '#F54D4D', //红色 //实际值超出目标值范围
in2: '#8D98B3', //深蓝色 //实际值在目标值范围内
out2: '#FFB980', //淡黄色 //实际值超出目标值范围
L3: '#01FEFD', //浅蓝
L4: '#FF6600', //橙色
red: '#F54D4D', //红色
yel: '#E5CF0D', //黄色
c10: '#25D053', //绿色
c30: '#E5CF0D', //黄色
c90: '#FF00FF', //紫色
N1: '#F54D4D', //红色 业务类型1 脱敏
I2: '#808080', //灰色 业务类型2
V3: '#8D98B3', //深蓝色 业务类型3
},
//饼图
pie: {
L12F: '#97B552', //草绿色
L341: '#E5CF0D', //黄色
L42P: '#8D98B3', //深蓝色
L591: '#D87A80', //浅橙色
L322: '#FFB980', //淡黄色
cs: '#25D053', //绿色 车身
dp: '#01FEFD', //浅蓝 底盘
dz: '#FF00FF', //紫色 电装
dl: '#FF6600', //橙色 动力
zx: '#E5CF0D', //黄色 转向
zz: '#FFB980', //淡黄色
tz: '#E5CF0D', //黄色
cy: '#8D98B3', //深蓝色
sz: '#97B552', //草绿色
hz: '#25D053', //绿色
bp: '#FF6600', //橙色
qt: '#FF00FF', //紫色
},
//等级分布
SSC: {
L1: '#25D053', //绿色
L2: '#8D98B3', //深蓝色
L3: '#FF6600', //橙色
L4: '#E5CF0D', //黄色
},
//部门分布
SSC_KS: {
cs: '#25D053', //绿色 车身
dp: '#01FEFD', //浅蓝 底盘
dz: '#FF00FF', //紫色 电装
nw: '#FF6600', //橙色 内外装
},
//全局字体颜色
text: {
c1: '#fff', //白色
},
fontSize: {
s10: 10, //legend标签字体大小
s12: 12 //坐标系XY字体大小
},
};
module.exports = colorSetting;
});
})(define);
业务调用代码
color: newattr[i].sumaryName == "N1" ? colorCfg.bar.N1 : newattr[i].sumaryName == "V2" ? colorCfg.bar.V2 : colorCfg.bar.I3;
color: newattr[i].sumaryName == "N1" ? colorCfg.target.c1 : newattr[i].sumaryName == "V2" ? colorCfg.target.c2 : colorCfg.target.c3
原码分析
业务
看代码看来，这个配置主要是用来配置报表颜色，分别提供报表 柱状图，线形图，饼图的配色方案。
问题分析
1：每个颜色的配置方案与业务偶合，并且硬编码。
2：业务不稳定性，必然造成配置文件不稳定，配置追求稳定不变。
3：调用配置困难，有多少种业务，就需要多少种判断；修改配置，还需要去修改调用的代码，灾难呀。。
4：代码混乱，不好维护。
优化
配置优化
;
(function(definde) {
definde(function(require, exports, module) {
var colorBarLib = [];
colorBarLib.push('#F54D4D'); //红色
colorBarLib.push('#01FEFD'); //浅蓝
colorBarLib.push('#25D053'); //绿色
colorBarLib.push('#FFB980'); //淡黄色
colorBarLib.push('#E5CF0D'); //黄色
colorBarLib.push('#8D98B3'); //深蓝色
colorBarLib.push('#97B552'); //草绿色
colorBarLib.push('#FF6600'); //橙色
colorBarLib.push('#FF00FF'); //紫色
colorBarLib.push('#808080'); //灰色
var colorLineLib = [];
colorLineLib.push('#E5CF0D'); //黄色
colorLineLib.push('#FF6600'); //橙色
colorLineLib.push('#FF00FF'); //紫色
colorLineLib.push('#808080'); //灰色
colorLineLib.push('#8D98B3'); //深蓝色
colorLineLib.push('#97B552'); //草绿色
colorLineLib.push('#F54D4D'); //红色
colorLineLib.push('#01FEFD'); //浅蓝
colorLineLib.push('#25D053'); //绿色
colorLineLib.push('#FFB980'); //淡黄色
var colorPieLib = [];
colorPieLib.push('#F54D4D'); //红色
colorPieLib.push('#01FEFD'); //浅蓝
colorPieLib.push('#25D053'); //绿色
colorPieLib.push('#FFB980'); //淡黄色
colorPieLib.push('#E5CF0D'); //黄色
colorPieLib.push('#8D98B3'); //深蓝色
colorPieLib.push('#97B552'); //草绿色
colorPieLib.push('#FF6600'); //橙色
colorPieLib.push('#FF00FF'); //紫色
colorPieLib.push('#808080'); //灰色
function getLib(type) {
switch (type) {
case 1:
return colorBarLib;
case 2:
return colorLineLib;
case 3:
return colorPieLib;
}
return colorBarLib;
}
var colorSetting = {
//获取颜色库
getLib: getLib,
//根据列表数据列表 返回配置方案
getLibByLst: function(colorType, dataJson, colName) {
var mapRs = new Map(); //存返回的对象 "对象":"颜色"
var map = {};
var colorLib = getLib(colorType);
var maxColorIndex = colorLib.length;
var i = 0;
$(dataJson).each(function() {
var t = this;
var o = $(t).attr(colName);
if (!map[o]) {
map[o] = o;
mapRs.set(o, colorLib[i < maxColorIndex - 1 ? i : maxColorIndex - 1]);
i++;
}
});
return mapRs;
},
//从原来版本搬过来，为减少代码改动
//全局字体颜色
text: {
c1: '#fff', //白色
},
fontSize: {
s10: 10, //legend标签字体大小
s12: 12 //坐标系XY字体大小
},
//柱状图
bar: { in: '#25D053', //绿色 //实际值在目标值范围内
out: '#F54D4D', //红色 //实际值超出目标值范围
}
};
module.exports = colorSetting;
});
})(define);
调用代码
//根据数据类型取得颜色配置 ，不同的图，不同的配色方案
var colorBarLib = colorCfg.getLibByLst('1', newattr, "sumaryName");
var colorLineLib = colorCfg.getLibByLst('2', newattr, "sumaryName");
var itemList = {
name: newattr[i].sumaryName,
data: data1,
type: 'bar',
color: colorBarLib.get(newattr[i].sumaryName) //newattr[i].sumaryName == "N1" ? colorCfg.bar.N1 : newattr[i].sumaryName == "V2" ? colorCfg.bar.Venucia : colorCfg.bar.I3
};
var tartItem = {
name: '目标值',
data: tarVal,
type: 'line',
color: colorLineLib.get(newattr[i].sumaryName) //newattr[i].sumaryName == "N1" ? colorCfg.target.c1 : newattr[i].sumaryName == "V1" ? colorCfg.target.c2 : colorCfg.target.c3
}
优化说明
1：去掉与业务的耦合。
2：加强可维护性，颜色的添加与修改颜色不费力。
3：调用变得简单。
