Как я использовал JavaScript, чтобы сделать мой код более эффективным и простым для отладки при создании веб-сайта блога

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

К счастью для нас, Бог (точнее, Брендан Эйх) создал JavaScript, который может помочь сделать наш код более эффективным и легким для отладки. В этой статье я приведу краткий пример того, как я использовал JS, чтобы сделать именно это при создании веб-сайта блога.

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

Если вы хотите, чтобы эта панель отображалась на всех страницах сайта, один из способов добиться этого — скопировать и вставить несколько строк (в данном случае 14) одного и того же кода на каждую HTML-страницу проекта. Эти линии изображены ниже:

Четырнадцать строк кода могут показаться вам пустяком, и в некотором смысле вы правы. На самом деле было бы не так сложно просто скопировать и вставить их на каждую новую HTML-страницу, которую вы создаете, особенно если проект небольшой. Однако это делает код более громоздким, а это означает, что страница не будет загружаться так быстро, как с меньшим количеством строк, а также ее будет сложнее модифицировать или отлаживать. На фото выше я поместил хэштеги в часть href тегов привязки, так как это только демонстрация.

Однако в реальной ситуации они будут ссылаться на реальный URL-адрес профиля в социальной сети. Итак, представьте, что ваш клиент меняет свое имя пользователя в Instagram. Это может привести к тому, что URL-адрес, помещенный в href, будет отличаться от того, что был раньше. Как разработчик, вы должны будете получить эту новую ссылку и вставить ее на каждую HTML-страницу и в соответствующее место. Это не только громоздко, но и может привести к ошибкам, если вы не будете осторожны, особенно если вам надоест выполнять эту повторяющуюся задачу.

Лучшим способом добиться этого было бы использование JS. На рисунке ниже я создал функциональность в JS для добавления этих ссылок в div, который уже присутствует на всех HTML-страницах и хранится в переменной socialsPanel.

Когда мы используем такую ​​функцию, нам нужно ввести информацию о каждой ссылке только в одном месте: внутри этой функции. Таким образом, если информация для конкретной ссылки изменится, нам нужно будет изменить ее только здесь, а не на каждой отдельной HTML-странице, если бы мы не использовали JS и вместо этого использовали метод копирования/вставки. Если бы мы хотели добавить или удалить ссылки, нам нужно было бы сделать это только в этой функции.

Это не только значительно экономит время, но, как упоминалось ранее, экономит строки HTML-кода, поскольку для заполнения страницы этими ссылками нам не нужно копировать и вставлять 13* строк кода в каждый HTML-документ, вызывать функцию только при загрузке страницы. Вызов этой функции, popSocialsPanel(), на странице, как вы можете видеть подчеркнутой красным на следующей фотографии, не добавляет новую строку кода (просто пока игнорируйте другие функции):

*строки, содержащие серию ссылок в данном случае, так как мы сохранили div , к которым мы хотели добавить ссылки, в каждом HTML-документе

Давайте на минуту посчитаем все это. Не считая комментариев, мы добавили 9 новых строк кода в наш JS-файл, который нам нужно написать только один раз, вычитая при этом 13 строк HTML-кода. Таким образом, если бы в нашем проекте был только один HTML-документ, мы все равно сохранили бы 4 строки кода, что хорошо, но мы бы сохранили 13 строк кода при реализации этой функциональности для каждого HTML-документа, добавляемого в проект, т.е. большой.

В этом конкретном проекте я сэкономил 56 строк кода, используя этот метод. На каждую страницу поста в блоге, которую я добавляю, я буду сохранять еще 13.

Я надеюсь, что этот относительно простой пример был вам полезен, но я полагаю, что вывод из этой статьи будет заключаться в том, что вы как программист должны развить в себе определенный инстинкт; если вы чувствуете, что повторяетесь при написании кода, вероятно, есть более эффективный способ его написания.

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

Спасибо за прочтение!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.