Question

我只需要用javascript创建一个表（没有html表格或任何框架）。＃4; Eloquent javascript中的代码：CH 6＆＃34; 。这是代码

  name         height country
 ------------ ------ -------------
 Kilimanjaro    5895 Tanzania
 Everest        8848 Nepal
 Mount Fuji     3776 Japan
 Mont Blanc     4808 Italy/France
 Vaalserberg     323 Netherlands
 Denali         6168 United States
 Popocatepetl   5465 Mexico

仅限Javascript代码

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

I have provided commented explanation to the functions you have mentioned in the question (courtesy of Gordon Zhu):

// Returns an array of row heights, one for each row.
    function rowHeights(rows) {
      // Transform each row.
      return rows.map(function(row) {
        // Reduce row to a single number,
        // the height of the tallest cell.
        return row.reduce(function(max, cell) {
          // Return max or the height of the current cell, 
          // whichever is larger.
          return Math.max(max, cell.minHeight());
        }, 0);
      });
    }

    // Returns array of minimum column widths,
    // one for each column.
    function colWidths(rows) {
      // Transform each column by looking at each 
      // cell in the first row of the table.
      // An underscore means the argument will not be used.
      return rows[0].map(function(_, i) {
        // Reduce each column to a single number,
        // the width of the widest column. Do this
        // by returning max or the width
        // of cell row[i], whichever is larger.
        // By looking at row[i] in every row, 
        // you will be able to look at every cell
        // in column i.
        return rows.reduce(function(max, row) {
          return Math.max(max, row[i].minWidth());
        }, 0);
      });
    }
    // Given an array of rows, draws a table.
function drawTable(rows) {
  // Get an array of heights for each row.
  var heights = rowHeights(rows);
  // Get an array of widths for each column.
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    // Get a particular line across all blocks in a row,
    // joined by " ".
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  // Function for drawing a single row.
  function drawRow(row, rowNum) {
    // Turn a single row into blocks. 
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    // For each line of content in a block, 
    // return a string that goes across all blocks.
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    // Take each line of content, 
    // and join them into a single string
    // separated by newlines. This is a full row.
    }).join("\n");
  }

  // Draw each row and join with newlines.
  return rows.map(drawRow).join("\n");
}

Additionally, checkout this and this subsequently, you can try Python Tutor to see what each line in any program does.

Answer 2

drawTable是最终的函数，它使这个Laying成为一个表，但在制作这个表之前，我们需要通过一些修改来运行我们的数据。 drawTable函数接收一个cell和dataTable函数的网格来完成这项工作。

让数据简短 -

//data
var MOUNTAINS = [
  {name: "Everest", height: 8848},
  {name: "vaalserberg", height: 323}
]

// DrawTable Function will make our data a grid of cell
function dataTable(data) {
 var keys = Object.keys(data[0]);
 var headers = keys.map(function(name){
  return new UnderlinedCell(new TextCell(name));
 });
 var body = data.map(function(row){
  return keys.map(function(name){
   return new TextCell(String(row[name]));
  });
 });
 return [headers].concat(body);
}
console.log(drawTable(dataTable(MOUNTAINS)));


// Finally, our dataTable function will return -            
[[{inner: {text: ["name"]}}, {inner: {text: ["height"]}}], [{text: ["Everest"]},{text: ["5895"]}], [{text: ["Vaalserberg"]},{text: ["323"]}]]

rowHeights和colWidths函数将确定表的最大行高和最大列宽。

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

// For our data rowHeights will return - [2,1,1]

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

// For out data colWidths will return - [11,6]

在drawTable中，函数drawRow将使用宽度，高度和行数据来制作Laying out表。

这个问题对初学者来说非常复杂。如果您想要解释每一段代码，请查看这篇文章 - https://codient.blogspot.com/2015/11/laying-out-table-eloquent-javascript.html

Answer 3

请考虑本书网站上的源代码：http://eloquentjavascript.net/code/#6

用javascript布置表

3 个答案: