Чтобы не приходилось потом очищать код от мусора, нужно изначально писать уже
красивый код JS. Ведь красивый код JavaScript — это не только эстетическая
красота, но:
- минимализм в документе,
- хорошая читаемость,
- легкая отладка программ,
- легкая поддержка в будущем,
- и др.
Красивый код JS — это следствие правильной разработки программы, которая
держится на 3-х столпах, или как их называют еще – «3R»:
- Refactorability – чтобы была возможность рефакторинга;
- Reusability — чтобы код можно было повторно использовать;
- Readability — чтобы была хорошая читаемость.
В последние время реализация 3R в коде стала очень значимой. Потому что один и
тот же программный продукт часто должен быть реализован:
- под разную аудиторию;
- для различных устройств;
- для различных платформ.
А такая разносторонняя реализация будет возможной, если реализована концепция
3R. Красивый код JS – это ничто иное как часть реализации 3R. Поэтому важно
писать красиво, а что для этого нужно знать и делать, мы подскажем.
Красивый код JS
Есть несколько принципов, которые помогут вам сделать красивое оформление кода
JavaScript. Применения этих принципов не является обязательным или некой
религиозной догмой программистов. Это всего лишь рекомендации, которые сделают
из вас профессионального программиста, а также, в будущем, облегчат работу с
вашим кодом.
Принципы красивого и «правильного» кода JS
Правильно работайте с переменными
Во-первых, всем переменным нужно давать осмысленные имена. Чтобы их имена
говорили сами за себя и не нужно было дополнительно писать какие-то
дополнительные комментарии. Пример:
//Плохо!
Const hourminsec = new Time ();
//Хорошо
const time = new Time();
Во-вторых, нужно добиваться хорошей читаемости. Потому что опытный
программист знает, что времени на чтение кода уходит больше, чем на его
написание. Представьте сами, если вы нашли какое-то значение в коде, но понятия
не имеете что оно делает и для чего нужно — это же очень сильно замедлит всю
вашу работу. Пример:
//Плохо
setTimeout(randomFunction, 3600000)
//Хорошо
const Milliseconds_In_A_Hour = 3_600_000;
setTimeout (blastOff, Milliseconds_In_A_Hour);
В-третьих, если можно создать переменную с более простым именем, то так и
делайте и не надо добавлять лишних слов. Пример:
//Плохо
const Paragraph = {
paragraphName: «Красивый код JS»,
paragraphPublisher: «Codernet»
}
//Хорошо
const Paragraph = {
name: «Красивый код JS»,
publisher: «Codernet»
}
Правильно работайте с функциями
При названии функций используйте тот же подход, что и при работе с переменными.
Название функции должно полностью раскрывать ее намерение, то есть описывать,
что конкретная функция делает. Например:
//Плохо
function cNumber (user){
//…
}
//Хорошо
function callNumber(phoneNumber){
//…
}
Старайтесь использовать наименьшее количество аргументов в одной функции. Тут
работает такое правило: чем меньше будет аргументов тем легче ее будет
тестировать. Идеальный вариант — это один-два аргумента, три — это уже много.
Когда хочется указать больше 2-х аргументов, то лучше этого не делать, а создать
объект более высокого уровня.
Другой важный момент про функции, который нужно запомнить — это одна функция
должна выполнять одно действие. В противном случае ее сложно будет понять и
протестировать.
Не допускайте дубликатов кода
Красивый код JS — это код, который не повторяется. Поэтому ваша задача — это
разрабатывать таким образом, чтобы ваш код нигде не дублировался. Это
рекомендацию можно рассматривать не только как принцип красоты, а еще как
принцип удобства в работе. Представьте, вы написали какой-нибудь скрипт и
продублировали его в нескольких местах(возможно даже десятках!). Потом вам
нужно внести изменение в этот скрипт. В таком случае вам придется искать все
места, где размещен этот скрипт.
А должно быть проще: скрипт должен находится в одном месте, но выводится в
нужных местах. В этом случае, когда нужно будет его откорректировать — это
делается всего лишь в одном месте.
Правильно работайте с глобальными объектами
Не нужно «загрязнять» глобальные объекты собственными наработками. В этом
случае, другой разработчик, который будет после вас, может не заметить ваших
«доработок», пока не столкнется с ошибками в рабочей среде.
Красивый код JS — это работа с мелочами
Есть множество «мелких» моментов, на которые нужно обращать внимание, чтобы
код получился визуально красивым:
- пробелы между параметрами, вокруг операторов и т.д;
- правильно написание скобок, точек с запятой, запятых и др.;
- одинаковые отступы от края в 2, 4, 6 пробелов;
- пустые строки между логическими блоками;
- длину строк кода, чтобы код умещался «на одной странице» и не было горизонтальной прокрутки;
- и др.
Описанное выше, это не просто слова – есть целые руководства по правильному
стилю написания кода JS. Они особенно популярны в крупных компаниях и при
больших разработках, когда все команды разработчиков пишут по одному
руководству и тогда у всех визуально получается одинаковый код.
Несколько таких руководств, как написать красивый код на JS:
- Google JavaScript Style Guide;
- Airbnb JavaScript Style Guide;
- Idiomatic JS;
- и др.
Самое интересное, что «красивый код JS» в некоторых компаниях является
требованиям. И «красота» вашего кода может быть проверена на
специализированных сервисах, созданных именно для проверки «на красоту». Эти
сервисы способны проанализировать ваш код и выдать рекомендации по стилю его
написания. Такие сервисы способны даже находить опечатки в словах.
Примеры сервисов:
- JSLint;
- JSHint;
- ESLint;
- и др.
Кстати многие из этих сервисов интегрируются со многими популярными IDE. А это
значит, что все проверки вы сможете делать прямо в своей любимой рабочей среде.
Возможно вам будет интересно почитать статью “Поиск и исправление ошибки в коде программы HTML”
Заключение
Хочется еще раз сказать, что все описанное выше не является обязательным к
исполнению и использованию. Все это рекомендации, которым следуют большинство
профессиональных разработчиков. Потому что именно эти рекомендации позволяют
создать по-настоящему красивый код JS без потери его функциональности.
