javascript - 使用闭包将配置绑定(bind)到函数

Question

我正在阅读this tutorial关于d3中可重用的图表，在第一个“配置”部分，作者描述了两种制作图表功能的方法:

// Method 1
function chart(config) {
  // generate chart here, using `config.width` and `config.height`
}

// Method 2
function chart(config) {
  return function() {
    // generate chart here, using `config.width` and `config.height`
  };
}

他建议使用第二种方法而不是第一种，因为

However, the caller must then manage both the chart function (assuming you have multiple types of charts to pick from) and the configuration object. To bind the chart configuration to the chart function, we need a closure.

不过我不明白这个解释。方法2相对于第一种方法有什么优点？

Answer 1

这是关于管理信息的。在第一种情况下，如果您想更改图表的配置，调用者必须记住 config 必须传递给 chart:

chart(config);
config.xy = 42;
// update the chart, calling chart again
chart(config);

现在，如果有多个可能不同的图表(因此有不同的图表函数，例如 barchart、linechart 等)，调用者必须记住哪个配置传递给哪个函数。

如果图表的“类型”能够以某种方式自包含，那就更容易了。在第二个示例中，您返回对函数的引用，该函数知道如何更新您刚刚创建的图表。因此，您可以在不知道图表是由哪个函数创建的情况下更新图表:

var myChart = chart(config);
config.xy = 42;
// update the chart
myChart();

这似乎是 D3 使用的方法，但您也可以使用面向对象的方法，即创建一个适当的 Chart 构造函数，该函数封装了渲染和更新图表的逻辑。