background

Found very shocking piece of code in a real project, I feel this program is enough to make this project fail. Code from the company to work hand experience of colleagues, in the case of ineffective communication, to optimize their own hands ten years.

Original code

Configuration code:

;
(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);

Business calling code

 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

Original code analysis

business

Look at the code view, this configuration is mainly used to configure the color of the report were provided the report bar charts, line charts, pie color scheme.

problem analysis

1: Each color scheme and service coupling arrangement, and hard-coded.
2: Business instability, will inevitably lead to instability in the configuration file, configuration pursue stable.
3: Calling difficult to configure, how many kinds of business, you need to determine how many; modify the configuration, modify the code calls need to go, disaster ah . .
4: Code confusion, poor maintenance.

optimization

Configuration optimization

;
(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);

Calling code

//根据数据类型取得颜色配置 ，不同的图，不同的配色方案
 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
                        }