如何以可扩展的方式分配 javascript 变量答案

【问题标题】：How to assign javascript variables in a scalable way如何以可扩展的方式分配 javascript 变量
【发布时间】：2019-03-07 20:05:44
【问题描述】：

假设我有以下dc.js 对象：

var chart_11   = dc.barChart("#chart-11"),
    chart_12   = dc.barChart("#chart-12"),
    chart_13   = dc.barChart("#chart-13"),
    chart_21   = dc.barChart("#chart-21"),
    chart_22   = dc.barChart("#chart-22"),
    chart_23   = dc.barChart("#chart-23");

接下来，我读入一些数据并用这些数据做一些事情：

d3.csv("../data/test_data.csv").then(function(data) {

    var var_names = ["x", "y", "z", "a", "b", "c"];

    var ndx = crossfilter(data),
        chart_11_dim = ndx.dimension(function(d) { return +d[var_names[0]]; }),
        chart_12_dim = ndx.dimension(function(d) { return +d[var_names[1]]; }),
        chart_13_dim = ndx.dimension(function(d) { return +d[var_names[2]]; }),
        chart_21_dim = ndx.dimension(function(d) { return +d[var_names[3]]; }),
        chart_22_dim = ndx.dimension(function(d) { return +d[var_names[4]]; }),
        chart_23_dim = ndx.dimension(function(d) { return +d[var_names[5]]; });

    var chart_11_min = +chart_11_dim.bottom(1)[0][var_names[0]],
        chart_11_max = +chart_11_dim.top(1)[0][var_names[0]],
        chart_12_min = +chart_12_dim.bottom(1)[0][var_names[1]],
        chart_12_max = +chart_12_dim.top(1)[0][var_names[1]],
        chart_13_min = +chart_13_dim.bottom(1)[0][var_names[2]],
        chart_13_max = +chart_13_dim.top(1)[0][var_names[2]],
        chart_21_min = +chart_21_dim.bottom(1)[0][var_names[3]],
        chart_21_max = +chart_21_dim.top(1)[0][var_names[3]],
        chart_22_min = +chart_22_dim.bottom(1)[0][var_names[4]],
        chart_22_max = +chart_22_dim.top(1)[0][var_names[4]],
        chart_23_min = +chart_23_dim.bottom(1)[0][var_names[5]],
        chart_23_max = +chart_23_dim.top(1)[0][var_names[5]];

});

虽然这可行，但它不是很干燥，也不容易保持水垢。我知道必须有更好的方法来动态创建这些变量，但我不确定哪种方法（例如循环、映射、reduce）可能扩展得最好。我不经常用 javascript 编写代码，所以我希望有经验的人能指出我正确的方向。

【问题讨论】：

如果您需要多个相似的变量，不要在全局范围内创建它们，将它们存储在Array 中。例如。 const charts =[]; for(let i = 1; i < 3; ++i) chart[i] = db.barChart(`#chart-${i}`); 有了这个数组之后，应该很容易推断出其余的 DRY 编码。
如果你的变量需要一个数字，它可能不应该是一个变量。
@KevinB 除非是数学：x1, y1, x2, y2 :D
我觉得这类问题与Code Review相关度更高
与问题本身相关，您可以选择将所有这些变量作为动态创建的对象的属性。检查此answer 以获取“使用动态键创建对象”。 创建对象后，您可以使用for...in 循环或Object.keys(...).forEach(...) 浏览其属性

标签： javascript d3.js dc.js

【解决方案1】：

您可以创建一个帮助文件以将变量导出为 javascript 模块。

因此，在名为“data.js”的模块文件中，您可以：

export const chart11   = dc.barChart("#chart-11"),
    chart12   = dc.barChart("#chart-12"),
    chart13   = dc.barChart("#chart-13"),
    chart21   = dc.barChart("#chart-21"),
    chart22   = dc.barChart("#chart-22"),
    chart23   = dc.barChart("#chart-23");

然后，您可以在需要引用 someotherfile.js 中的数据的任何地方使用：

import {chart11, chart12, chart13, chart21, chart22, chart23} from '../data';

const chart11Min = chart11...

如果你在 node 中工作的话，我不知道，但这是整个 node 环境中使用的模块模式。这允许单个模块声明和对该模块的尽可能多的导入引用。旁注，建议将const 用于常量变量，将let 用于动态变量。 var 关键字由于缺乏区分性而不是最佳实践。

【讨论】：