代碼重構之實戰（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：調用變得簡單。