Путь к сокращению/рефактору множественных значений плагина

Question

У меня есть 15-20 высокоскоростных диаграмм на одной странице (с использованием слайдера, 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), использование функций с множеством параметров - человек -error-склонный, поэтому лучше всего избегать.

Answer 2

Что я в итоге сделал, так это то, что я создал объект внутри плагина, который обрабатывает все параметры высоких диаграмм с помощью одной функции drawChart, которая принимает объект. то есть

var plugin = function(){ 

    helper.drawChart({ 
     legendEnabled: true, 
     selector: '#divID', 
     backgroundColor: '#FF0000', //etc all other options 
    }); 

    var chartHelper = function(){ 
     var defaults = { 
      _common:{ 
       //common highcharts options 
       { 
        legend: false //etc 
       } 
      }, 
      _bar:{ 
       chart: 'bar', //all common bar options 
      }, 
      get bar(){ return $.extend({}, _common, _bar); } 
     } 

     this.drawChart = function(options){ 
      var default = {}; 
      if (options.legendEnabled){ 
       default.legend = true; 
      } 

      if (options.yLabelText){ 
       default.yTitle = { text = options.yLabelText } 
      }//and other options here 

      $(options.selector).highchart($.extend({}, defaults.bar, default); 
     } 
    } 

    var helper = new chartHelper(); 
} 

У меня есть около 20 диаграмм внутри плагина, и это спасло мне около 600 строк. Вся логика диаграммы находится внутри помощника, она не загромождает код плагина, мне не нужно постоянно повторять .highcharts({ 20 different options }) внутри каждой функции ничьей, это только один раз мне нужно сделать это сейчас.