javascript - 这个表格构建代码如何在 JavaScript 中工作

Question

这些函数来自http://eloquentjavascript.net/ .这不是我的代码，但由于它在免费教科书中，我认为它应该可以用于教育目的，尤其是。当任何人都可以访问该网站并获得它时。

---

完整代码用于建表；这是第一部分。可能是函数中有太多的函数，让我感到困惑？

function rowHeights(rows) {
  return rows.map(function(row) {
    return row.reduce(function(max, cell) {
      return Math.max(max, cell.minHeight());
    }, 0);
  });
}

function colWidths(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
      return Math.max(max, row[i].minWidth());
    }, 0);
  });
}

然后他们继续实际绘制表格；如果我理解第一部分，我可能会理解这一点:

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow).join("\n");
}

我认为我不需要第二部分的答案；如果我在理解第一部分后这样做，我会发布第二个问题。

他们以后甚至有更多的代码；如果有帮助，我也可以将它复制到这里，如果在评论中要求它。 谢谢! :)

Answer 1

rowHeights 返回包含表格每一行高度的数组。对于每一行，它通过获取行中每个单元格的最大高度来获取其高度。

要理解它，请从内到外工作:

function(max, cell) {
    return Math.max(max, cell.minHeight());
}

给定一个单元格和之前的最大高度，这会将新高度计算为该单元格的 minHeight() 和之前的最大值的最大值。

return row.reduce(ABOVE FUNCTION, 0);

这将使用上述函数减少一行(单元格数组)，以获得该行中所有单元格的最大高度。

然后:

return rows.map(PREVIOUS FUNCTION);

对每一行运行缩减函数，返回所有最大高度的数组。

colWidths 按列做同样的事情，通过获取每列中每个单元格的最大值来获取每列的宽度。