Как я использовал 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 . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.