防止函数嵌套过多的不同方法

Question

不知道有没有更好的办法来解决下面的问题，防止因为嵌套函数太多导致代码不可读：

我正在使用 d3.js 和 jquery 滑块生成一张欧洲地图，其中显示了每个地区的失业率。滑块可以在 2005 年到 2015 年之间切换。在每次滑块更改时，我希望 europe.svg 重新着色。

到目前为止，我解决了以下问题：

var color = d3.scaleThreshold()
  .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25])
  .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]);

d3.queue()
  .defer(d3.json, "data/json/euRegions.json")
  .defer(d3.csv, "data/csv/euUnemploymentRates.csv")
  .await(initializeEUmap);

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) {
  if (error) throw error;

  euRegionsJson.features.forEach(function(d) {
    for (var i = 0; i <= 334; i += 1) {
      if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) {
          for (var j = 2005; j <= 2015; j += 1) {
              d.properties[j] = euUnemploymentcsv[i][j];
          }
      }
    }
  });

  $('#slider').slider().bind('slidechange', function(event, ui) {
    var sliderValue = $('#slider').slider("option", "value");
    svgEurope.selectAll(".euMap").remove();
    svgEurope.selectAll("path")
      .data(euRegionsJson)
      .enter().append("path")
      .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];})
      .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];})
      .data(euRegionsJson.features)
      .enter().append("path")
      .attr("d", geoPath)
      .attr("class", "euMap")
      .attr("fill", function(d) {return color(d.properties[sliderValue]);})
      .style("stroke", "black")
      .style("stroke-width", "0.4px");
});

将所有内容都包含在 slidechange 函数中实际上是最佳实践吗？你的方法是什么？

Answer 1

我会将slidechange 回调重构为函数声明，并将其取消嵌套。您还使用了一些代码中未提供的变量，但只需将所需的任何变量传递给onSlideChange。

    var color = d3.scaleThreshold()
  .domain([0, 1, 3, 5, 7, 10, 13, 16, 20, 25])
  .range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026", "#808080"]);

d3.queue()
  .defer(d3.json, "data/json/euRegions.json")
  .defer(d3.csv, "data/csv/euUnemploymentRates.csv")
  .await(initializeEUmap);

function initializeEUmap(error, euRegionsJson, euUnemploymentcsv) {
  if (error) throw error;

  euRegionsJson.features.forEach(function(d) {
    for (var i = 0; i <= 334; i += 1) {
      if (d.properties.NUTS_ID == euUnemploymentcsv[i].Flag) {
          for (var j = 2005; j <= 2015; j += 1) {
              d.properties[j] = euUnemploymentcsv[i][j];
          }
      }
    }
  });

  $('#slider').slider().bind('slidechange', e => onSlideChange(e,euRegionsJson));

}

function onSlideChange(event, euRegionsJson) {
    var sliderValue = $('#slider').slider("option", "value");
    svgEurope.selectAll(".euMap").remove();
    svgEurope.selectAll("path")
      .data(euRegionsJson)
      .enter().append("path")
      .attr("cx", function(d, i) {return projection([d.longitude, d.latitude])[0];})
      .attr("cy", function(d, i) {return projection([d.longitude, d.latitude])[1];})
      .data(euRegionsJson.features)
      .enter().append("path")
      .attr("d", geoPath)
      .attr("class", "euMap")
      .attr("fill", function(d) {return color(d.properties[sliderValue]);})
      .style("stroke", "black")
      .style("stroke-width", "0.4px");
}