Web-технологии

Иногда при написании проги появляется спагетти-код. Это значит, что для простоты и скорости решения мы копируем одинаковые куски кода, которые делают почти одно и то же. У них внутри одинаковая логика, но разные входные данные, и мы их просто скопировали-вставили.

У такого подхода к программированию есть несколько проблем:

• расширять функциональность сложно, так как легко запутаться, какую именно часть кода мы расширяем или оптимизируем;

• читать такой код трудно, потому что один и тот же код встречается много раз.

Единственное, когда можно использовать такой подход — если нужно что-то быстро протестировать и понять, работает оно или нет. Если не работает — значит, мы сэкономили время и не стали тратить его на неудачное решение.

А если всё работает как нужно, значит, настало время переписать код в нормальном виде. Для этого нам понадобится некоторое подобие объекта, но не на основе класса, а созданное вручную.

Делаем красивые пуши для вашего сайта в стиле MacOS

Новый тип переменной: объект

У переменной типа «объект» есть одна отличительная особенность: она состоит как бы из двух частей — свойства и значения, и здесь всё то же самое — у объекта меняются только значения свойств. Поясним на примере языка JavaScript.

Сделаем переменную-объект, у которой будет два свойства — имя и возраст:

var person = {
name: "Миша",
age: 35
}

Чтобы поменять имя, нужно написать название переменной и через точку указать название свойства, которое хотим изменить:

person.name = "Илья";
person.age = 31;

Свойств у объекта может быть сколько угодно:

var person = {
name1: "Миша",
name2: "Саша",
name3: "Лена",
age1: 35,
age2: 21,
age3: 19
}

Но если у объекта получается много однотипных свойств, можно сделать их массивом и обращаться к ним по номерам. А если элементы массива тоже сделать объектами с одинаковыми названиями свойств, получится вот такая магия:

Смотрите, так как у каждого элемента массива одинаковое название свойств, то, меняя просто номер элемента, мы можем запоминать разные свойства у одинаковых по сути элементов. Это нам пригодится на следующем шаге.

Собираем дубли

Пройдёмся по нашему старому коду из прошлой статьи и соберём все одинаковые переменные, которые отличаются только цифрами:

• Mask(1,2,3,4)

• element_Id_(1,2,3,4)

• number_Id_(1,2,3,4)

Первые две переменные задают ссылку на объект и маску для сравнения элементов, а вторые две отвечают за количество задач в колонках.

Свернём эти 16 переменных в один большой объект:

Теперь, зная только номер колонки, мы можем обратиться к объекту, маске и количеству задач в колонке. Сначала это может показаться громоздким, но на самом деле сокращает наш финальный объём программы в 4 раза.

Чтобы избавиться от дублей в коде, используют циклы или выносят повторяющийся код в отдельную функцию. На самом деле вариантов больше, но основные — эти.

Используем цикл

Циклы применяют в тех случаях, когда спагетти-код по очереди используется несколько раз, где отличаются только порядковые номера элементов. В нашем случае это функция showTasks (). Она берёт по очереди все элементы из локального хранилища и по очереди же сравнивает их с шаблоном — для первой, второй, третьей или чётвёртой колонки. Единственное, чем отличаются фрагменты — маской и колонкой, куда их отправлять:

Сделаем то же самое в цикле, используя нашу большую переменную-объект. Для этого мы организуем цикл от 0 до 3 (потому что нумерация элементов массива начинается с нуля) и по очереди проверяем все значения:

Код сократился в 4 раза, читать стало проще, и всё меняется в одном месте. Красота.

Делаем отдельную функцию

У нас есть вот такой огромный кусок кода, который делает одно и то же, только с разными элементами.

Здесь 4 раза задаётся обработчик нажатия клавиш в поле ввода у каждой колонки. Очевидно, что проще вынести повторяющийся код в отдельную функцию и вызывать её по мере необходимости:

Что дальше

Мы только что убрали почти весь спагетти-код из нашего проекта. Почти — потому что у нас осталось два неопрятных фрагмента:

2. У нас остались 4 обработчика нажатий, которые делают одинаковые вещи — вызывают одну и ту же функцию с разными параметрами.

Оба фрагмента можно оптимизировать, например, с помощью jQuery.

Попробуйте сделать это сами, пока это не сделали мы