将对象文字转换为可重用类？

Question

Is it possible to take this code below and make it so that it is easily reusable without having to copy and paste each time I want to create a new options:

optionA: {
  chart: {
    type: 'stacked',
    color: 'red',
    showControls: false
  }
}

Now if I wanted to have another chart, I have to do this right now:

optionB: {
  chart: {
    type: 'line',
    color: 'yellow',
    showControls: false
  }
}

It would be nice if there would be a way to create a class or something of sorts so that I can add a new option without having to reuse all of the same code, kinda like hiding everything that does not need to be known for the implementation. I have looked around for ways to do this but my searches have had no success.

EDIT: I might not have been enough information after looking at the responses so far. Here is the full data:

timelineA: {
    chart: {
        type: 'stackedAreaChart',
        color: defaultColor,
        showControls: false,
        showLegend: false,
        useInteractiveGuideline: true,
        margin: margin,

        x: AnalysisTransforms.xValue,
        y: function(d){
            return d[1];
        },

        forceY: [0, 1],

        noData: $scope.translations.noData,
        xAxis: {
            showMaxMin: false,
            tickPadding: 16,
            tickFormat: AnalysisTransforms.formatDate,
            tickValues: AnalysisTransforms.xAxisTicks
        },
        yAxis: {
            tickPadding: 16,
            tickFormat: AnalysisTransforms.formatInteger
        }
    }
}

timelineB: {
    chart: {
        type: 'line',
        color: defaultColor,
        showControls: false,
        showLegend: false,
        useInteractiveGuideline: true,
        margin: margin,

        x: AnalysisTransforms.formatLine,
        y: AnalysisTransforms.linex,

        noData: $scope.translations.noData,
        xAxis: {
            showMaxMin: false,
            tickPadding: 16,
            tickFormat: AnalysisTransforms.formatParseDate,
            tickValues: AnalysisTransforms.xticks
        },
        yAxis: {
            tickPadding: 16,
            tickFormat: AnalysisTransforms.formatInteger
        }
    }
}

This is from angular-nvd3 and there is not enough support from the repo for me to figure this out. I have started playing around with creating a class for this but don't think I am following best practices because I don't know how to convert object literal like this into a class that I can new up for any charts I want to create.

What I see is that there is some code that is used between the 2 and then some that is not. I hope I am not confusing beyond the ability for help in this issue.

Answer 1

Something as:

var defaults = {
  color: defaultColor,
  showControls: false,
  showLegend: false,
  useInteractiveGuideline: true,
};

function buildChart(type, opts) {
  return Object.assign({
    type: type,
  },
  defaults,
  opts);
}

// Then you can do variations as 
var lineChart = buildChart('line', { color: '#CCC' });
var barChart = buildChart('bar', { color: 'red' });

In Object.assign it's important for opts to go last, so it can override the defaults when required.

Answer 2

  function getObj(opts) {
     return {
        type: opts.type,
        colour: opts.colour,
        showControls: opts.showControls
     }
  }

  var b = getObj({type: 'sometype'})

You could add some defaults in if you wanted, but the above should work

Answer 3

Yes you can create object easily...if you work on recent browser there is a nicer way to do it. but this is just a sample to start you

var Option = (function ()
{
     var Class = function (Type, Color)
     {
        this.chart = {
        type: Type,
        color: Color,
        showControls: false
      };
};

    (Class.prototype);
    return Class;
})();

var optionA = new Option('stacked', 'red');
var optionB = new Option('line', 'yellow');

here a Fiddle