Марейн Хавербеке - Выразительный JavaScript

Код для вывода таблицы:

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");

}

Функция drawTableиспользует внутреннюю функцию drawRowдля рисования всех строк, соединяя их через символы новой строки.

Функция drawRowсперва превращает объекты ячеек строки в блоки, которые являются массивами строк, представляющими содержимое ячеек, разделённые линиями. Одна ячейка, содержащая число 3776, может быть представлена массивом из одного элемента ["3776"], а подчёркнутая ячейка может занять две строки и выглядеть как массив ["name", "----"].

Блоки для строки, у которых одинаковая высота, должны выводиться рядом друг с другом. Второй вызов mapв drawRowстроит этот результат построчно, начиная с ячеек самого левого блока, и для каждой из них дополняя строку до полной ширины таблицы. Полученные строки затем соединяются через символ новой строки, создавая целый ряд, который и возвращает drawRow.

Функция drawLineвыцепляет строки, которые должны располагаться рядом друг с другом, из массива блоков и соединяет их через пробел, чтобы создать промежуток в один символ между столбцами таблицы.

Давайте напишем конструктор для ячеек, содержащих текст, который предоставляет интерфейс для ячеек. Он разбивает строчку в массив строк при помощи метода split, который режет строчку каждый раз, когда в ней встречается его аргумент, и возвращает массив полученных кусочков. Метод minWidthнаходит максимальную ширину строки в массиве.

function repeat(string, times) {

var result = "";

for (var i = 0; i < times; i++)

result += string;

return result;

}

function TextCell(text) {

this.text = text.split("\n");

}

TextCell.prototype.minWidth = function() {

return this.text.reduce(function(width, line) {

return Math.max(width, line.length);

}, 0);

};

TextCell.prototype.minHeight = function() {

return this.text.length;

};

TextCell.prototype.draw = function(width, height) {

var result = [];

for (var i = 0; i < height; i++) {

var line = this.text[i] || "";

result.push(line + repeat(" ", width - line.length));

}

return result;

};

В коде используется вспомогательная функция repeat, которая возвращает переданную первым аргументом строку, повторённую переданное вторым аргументом количество раз. Метод drawиспользует её для создания отступов в ячейках, чтобы они все были необходимой длины.

Давайте нарисуем для опыта шахматную доску 5×5.

var rows = [];

for (var i = 0; i < 5; i++) {

var row = [];

for (var j = 0; j < 5; j++) {

if ((j + i) % 2 == 0)

row.push(new TextCell("##"));

else

row.push(new TextCell(" "));

}

rows.push(row);

}

console.log(drawTable(rows));

// → ## ## ##

// ## ##

// ## ## ##

// ## ##

// ## ## ##

Работает! Но так как у всех ячеек один размер, код форматирования таблицы не делает ничего интересного.

Исходные данные для таблицы гор, которую мы строим, содержатся в переменной MOUNTAINS, их можно скачать тут.

Нам нужно выделить верхнюю строку, содержащую названия столбцов, при помощи подчёркивания. Никаких проблем – мы просто создаём тип ячейки, который этим занимается.

function UnderlinedCell(inner) {

this.inner = inner;

};

UnderlinedCell.prototype.minWidth = function() {

return this.inner.minWidth();

};

UnderlinedCell.prototype.minHeight = function() {

return this.inner.minHeight() + 1;

};

UnderlinedCell.prototype.draw = function(width, height) {

return this.inner.draw(width, height - 1)

.concat([repeat("-", width)]);

};

Подчёркнутая ячейка содержит другую ячейку. Она возвращает такие же размеры, как и у ячейки inner(через вызовы её методов minWidthи minHeight), но добавляет единичку к высоте из-за места, занятого чёрточками.

Рисовать её просто – мы берём содержимое ячейки innerи добавляем одну строку, заполненную чёрточками.

Теперь, имея основной движок, мы можем написать функцию, строящую сетку ячеек из нашего набора данных.

function dataTable(data) {

var keys = Object.keys(data[0]);

var headers = keys.map(function(name) {

return new UnderlinedCell(new TextCell(name));