Небольшой урок правильного кода

JavaScript (JQuery)

Когда начинаешь писать свой код, то неминуемо чувство, что все не так просто как казалось в учебнике. Но написание кода это и есть лучшее средство для “прокачивания” своих навыков в программировании. Тем более если подходить к этому делу не только количеством строк кода, а осознанно.

Так я стараюсь свой код выкладывать в сети и показывать его более опытным программистам. Так иногда попадаются действительно интересные и полезные советы.

В последний раз для задачи по работе с прайс-листом на странице мне был дан код, в котором было несколько замечательных решений.

Исходный код

// add class and button
var option = [‘item-id’, ‘item-title’, ‘item-price’, ‘delete-btn’];
$(‘#sf tr’).each( function() {
// add button “Add to cart”
$(this).add(‘<td></td>’);
$(this).find(‘td:last’).append(‘<a class=”add_item”>Добавить в корзину</a>’);
    // add class
$(this).find(‘td’).each( function(index, element) {
$(element).addClass(option[index]);
});
});

Вроде ничего сложного. Код на Javascript с использованием библиотеки JQuery.

Код после правок

Обратите внимание на код после правок более опытных специалистов:

var classes = [‘item-id’, ‘item-title’, ‘item-price’, ‘delete-btn’],
$rows = $(‘#sf tr’).filter(‘:gt(0)’),
$link = $(‘<a>’).addClass(‘add_item’).text(‘Добавить в корзину’),
$cell = $(‘<td>’).append($link), $cells;
$rows.append($cell); $cells = $rows.find(‘td’);
$cells.each(function (index, cell) {
$(cell).addClass(classes[index % classes.length]);
});

Что мы здесь видим?

  • все переменные объявлены в верхней части
  • в переменную $link записывается “составной” элемент, а не просто html-код одной строкой
  • классы добавляются сразу всем ячейкам td при помощи $.each. Но здесь есть еще один интересный момент: индекс имени класса для взятия из переменной classes рассчитывается как остаток от деления индекса текущего элемента td в цикле на общую длину массива classes, что дает нам последовательность 0, 1, 2, 3, 0, 1, 2, 3 … Отличное решение для данной задачи.
  • Плюс ко всему, код удобно читается и позволяет быстро разобраться в его работе. Что является важным моментом в создании приложений. Здесь и правильная архитектура кода, и правильное именование переменных, и работа с узлом, а потом уже его добавление в дерево DOM.

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