代码重构之实战（2）灾难程序重构

背景

在真实项目中发现了一段很震撼的代码，感觉这段程序足以让这个项目失败。代码出自公司十几年工作经验同事之手，沟通无效的情况下，自已动手优化。

原代码

配置代码：

;
(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：调用变得简单。