В начале накалякал, а потом думал над оптимизацией. Вышло прикольно!
Какая стояла задача
- Не трогать разметку;
- Понимание кода новичком (я сам новичок, но человек попросивший меня это сделать только начал учить JS);
- Показ всех страниц с товаром, а не только с количеством, указанное в переменных (в начале у парнишки был неплохой код, но у него не показывались последние товары, если их меньше общего числа показанных блоков);
- Сделать под разное разрешение разное количество.
Пока я делал этот незамысловатый код, я придумал способ учиться делать правильно: в начале пишу, как думается, а потом сижу и думаю над оптимизацией (переименовываю переменные, убираю лишние циклы и функции и т. д.). Основной целью является избавление от повторений.
В данном случае у меня постоянно повторяется "this.id - quantityItems", но в переменную ее запихивать не хочу по двум причинам:
- Придуманные мной переменные слишком длинные будут
- Не уверен, что в данном случае переменная поможет в читаемости кода
ссылка на рабочий вариант в песочнице будет после кода
Хочу отдельно отметить, что мое тут только JS. Один парнишка в чате по JS попросил помочь и я с радостью взялся. Я взял давно себе за правило, если что-то делаешь, то стараться нужно делать так, что бы никого не отвлекать. Есть разметка? Значит делай JS так, что бы не трогать html.
Как я оптимизировал код
- Всем переменным дал верное обозначение (const, let) - я обратил внимания, что это не только помогает разграничить зону видимости объектов, но еще если все переменные верно обозначать, то легче читать код. Ты сразу понимаешь, что будет повторяться, а что нет.
- Пытался верно отделить строки кода, для понимания какая строка к чему относится.
- Уменьшил количество условий - в начале у меня было по 3 "if" на каждом событии клика (первый клик, последний клик и остальные серединные). В начале даже не допускал мысли о возможности оптимизировать это, просто решил попробовать и получилось.
- Все названия переменных сделал в одной стилистике - без нижнего подчеркивания.
- Везде добавил "this.id" - не видел в этом большой нужды, так как название переменных кнопок короткое, но для читаемости кода посчитал важным это сделать. Да и для практики лишним не будет.
- Обычную функцию сделал стрелочной, но не вижу в этом особой нужды, кроме простой практики для легкого понимания потом чужого кода.
- Если нужно сделать какое-то математическое действие, я ставлю что-то похожее "-=", в этом я тоже не вижу нужды острой, но нужна практика для автоматизации действий и читаемости кода.
ссылка на рабочий вариант по клику на текст
Чуть не забыл: тут я использую "eval()", что бы строчный элемент превратить в название переменной. Один человек в чате подсказал, что это мега стремная тема (использование eval()) и нужно понимать куда и зачем ты ее используешь. Для понимания опасности данной глобальной функции, я почитал форумы и методички разные. Я смог выяснить, что в моем случае ничего страшного не будет и с радостью запилил ее в код)))
Но я не буду использовать евал в случае если нет полного понимания, что окажется в скобках у данной функции.
