我在单页上有一些 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 级深度对象设置从一种方法移至另一种方法,没有真正的增益。
最佳答案
好的,现在更清楚了。这实际上并不是一个代码重构问题,而是一个数据重构问题。我可以建议的唯一解决方案是在结构中查找通用数据,将这些分支作为变量存储在您的范围内,然后将它们 $.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),否则使用带有大量参数的函数很容易出错,因此最好避免。
关于javascript - 缩短/重构多个插件值的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26677245/