javascript - 缩短/重构多个插件值的方法

Question

我在单页上有一些 15-20 个 Highcharts (使用 slider ，每张幻灯片 1-2 个图表)、一些条形图、一些柱形图、一些饼图，具有不同的显示选项。我使用的是在我的闭包内有多种方法，其中我有类似 self.drawColumnChart(xPlotColor, yPlotColor, xPlotLabelSize, yPlotLabelSize, ...10 more arguments) 的方法。 。在同一个对象内，我有“drawRevenueChart()、drawLossChart()”等方法。drawRevenueChart()正在打电话self.drawColumnChart(有 15 个参数。随着图表数量的增加，我最终将越来越多的参数传递给 self.drawColumnChart(所以我想我可以通过更改 drawRevenueChart() 来重构它如

("$id").highcharts(
    {chart: {
        plotOptions: {
            labelSize: '2em'
        },
        xAxis:{
          labelSize: '1.3em',
          formatter: function(){
               return '% ' + this.value;
          }
          ...and so on
        }
    })'

我不需要 self.drawColumnChart(xPlotColor, yPlotColor, xPlotLabelSize, yPlotLabelSize, ...10 more arguments)更多，但我只是将这种复杂性传递给 drawRevenueChart() 。 drawRevenueChart()以前是 2 行长，但现在是 25 行长。与 drawLossChart() 相同，原来是3行长，只需调用self.drawColumnChart( ，但是重构后变成了15行长的方法。

你们能想到其他方法来重构/缩短这个吗？也许drawRevenueChart()来电 self.drawChart("column", [plotOptions.labelSize: '2em', xAxis: {labelSize: '1.e em'}...

看来我必须不断重复

plotOptions: {
    labelSize: '2em'
    },
    xAxis:{
        labelSize: '1.3em',

我对每个图表的关闭都有不同的选项。有没有办法缩短这个时间？我已经在使用 jQuery extend()使用自定义选项扩展默认图表选项。一切都在一个闭包内。但无论我如何重构它，我发现自己用不同的选项重复相同的行。欢迎任何想法。

更新:

根据 TrueBlueAussie 的要求:

过去是:

myClosure{

    var self = this;

    self.drawColumnChart = function(selector, xPlotColour, yPlotColour, xAxisName, yAxisName, xPlotOptionsSize....10 more arguments)
    {
          $(selector).highcharts({
              chart: {
                  type: 'column'
              },
              xPlot:{
                  style:{
                     color: xPlotColour
                  }
              },
              yPlot: {
                  labels: {
                      style:{
                          color: yPlotColour
                      }
                  }
              },
              xAxis:{
                  labels: { 
                     name: xAxisName,
                  }
              }    
          })
    }

    drawRevenueChart: function(data){
        self.drawColumnChart("#chartid1", 'blue', 'red', 'profit', 'month', '1.2em', null, false, null....);
    }

    drawLossChart: function(data){
        self.drawColumnChart("#chartid2", 'orange', 'yellow, 'loss', 'month', '2em' ...);
    }
}

重构后

drawRevenueChart: function(data){
        $("#chartid1").highcharts({
              chart: {
                  type: 'column'
              },
            xPlot:{
                  style:{
                     color: 'blue'
                  }
              },
              yPlot: {
                  labels: {
                      style:{
                          color: 'red'
                      }
                  }
              },
              xAxis:{
                  labels: { 
                     name: 'profit',
                  }
              }    
        });
    }

drawLossChart: function(data){
    $("chartid2").highcharts({
        xplot:{
            style:{
               color: 'orange'
            }
        },
        xAxis:{
           labels:{
               name: 'loss',
               color: 'puke'
           }
        }
    }
};

所以我只是将 3 级深度对象设置从一种方法移至另一种方法，没有真正的增益。

Answer 1

好的，现在更清楚了。这实际上并不是一个代码重构问题，而是一个数据重构问题。我可以建议的唯一解决方案是在结构中查找通用数据，将这些分支作为变量存储在您的范围内，然后将它们 $.extend() 一起构建最终的选项结构。

例如

myClosure {
    // Put any common settings in shared vars
    var columnChart = {
        chart: {
            type: 'column'
        }
        // any other common properties for a column chart
    };

    var barChart = {
        chart: {
            type: 'barchart'
        }
        // any other common properties for a bar chart
    }

    var self = this;

    self.drawColumnChart = function (selector, data) {
        $(selector).highcharts($.extend({}, columnChart, data));
    }

    drawRevenueChart: function (data) {
        self.drawColumnChart("#chartid1", {
            xPlot: {
                style: {
                    color: 'blue'
                }
            },
            yPlot: {
                labels: {
                    style: {
                        color: 'red'
                    }
                }
            },
            xAxis: {
                labels: {
                    name: 'month name',
                }
            }
        });
    }

    drawLossChart: function (data) {
        self.drawColumnChart("#chartid2", {
            xPlot: {
                style: {
                    color: 'orange'
                }
            },
            yPlot: {
                labels: {
                    style: {
                        color: 'yellow'
                    }
                }
            },
            xAxis: {
                labels: {
                    name: 'loss',
                }
            });
        }
    }
}

这样做的优点是，如果您了解 HighCharts 选项结构，则每次调用仍然可读，因此更易于维护。

除非您使用强类型 JS 语言(如 TypeScript)，否则使用带有大量参数的函数很容易出错，因此最好避免。