将对象字面量转换为可重用 Class？

Question

是否可以使用下面的代码并使其易于重复使用，而无需在每次我想创建新选项时都进行复制和粘贴：

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

现在如果我想要另一个图表，我现在必须这样做：

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

如果有一种方法可以创建 class 或类似的东西，这样我就可以添加一个新选项而不必重用所有相同的代码，这有点像隐藏一切不需要知道实现。我四处寻找执行此操作的方法，但我的搜索没有成功。

编辑：到目前为止，我可能没有看到足够的信息。这是完整的数据：

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 的，repo 没有足够的支持让我解决这个问题。我已经开始尝试为此创建一个 class 但我认为我没有遵循最佳实践，因为我不知道如何将这样的对象文字转换为我可以新建的 class对于我想创建的任何图表。

我看到的是在 2 之间使用了一些代码，然后没有使用一些代码。我希望我在这个问题上没有超出帮助能力的困惑。

Answer 1

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

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

如果需要，您可以添加一些默认值，但上面的应该有效

Answer 2

是的，您可以轻松地创建对象...如果您使用最新的浏览器，则有更好的方法。但这只是您入门的示例

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

这里是Fiddle

Answer 3

类似于：

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。

将对象字面量转换为可重用 Class？

Turn Object Literal into Reusable Class?

javascript

javascript-objects

nvd3.js

angular-nvd3