將對象文字轉換為可重用類？

Question

是否可以在下面使用此代碼並將其設置為使其易於重用，而不必每次我要創建新選項時都進行復制和粘貼：

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

現在，如果我想要另一個圖表，則必須立即執行以下操作：

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

如果有一種方法可以創建一個類或某種某種形式，這樣我就可以添加一個新選項而不必重用所有相同的代碼，這有點好，就像隱藏了實現時不需要知道的所有內容一樣。 。 我一直在尋找實現此目的的方法，但是搜索沒有成功。

編輯：到目前為止，我可能沒有足夠的信息。 這是完整的數據：

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
        }
    }
}

這是來自angular-nvd3的，在倉庫中沒有足夠的支持讓我知道。 我已經開始為此創建一個類，但是我認為我沒有遵循最佳實踐，因為我不知道如何將這樣的對象文字轉換為可以為要創建的任何圖表創建的類。

我看到的是，在2和2之間使用了一些代碼，而沒有使用。 我希望我在這個問題上不會感到無所適從。

Answer 1

如：

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' });

在Object.assign ，最后opts很重要，因此可以在需要時覆蓋defaults 。

Answer 2

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

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

您可以根據需要添加一些默認值，但是上面的應該可以

Answer 3

是的，您可以輕松地創建對象...如果您使用的是最近的瀏覽器，那么還有一種更好的方法。 但這只是一個示例

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

這里是小提琴