Перевод статьи Елены Калабы «Do’s and Don’ts for Javascript Newbies».
JavaScript, со времен создания его Бренданом Эйхом, пережил множество обновлений, изменений, дополнений и добавлений фреймворков к его основе. После первого бурного периода своей жизни JS обрел ту форму, в которой мы его видим теперь, в 2018 году. Но в будущем его все равно ожидает дальнейшее развитие.
Сегодняшнее состояние JavaScript, как мне кажется, лучше всего описывает цитата Этвуда: «Любое приложение, которое можно написать на JavaScript , в конечном итоге будет написано на JavaScript». Потому что на этом языке можно написать буквально все, что только можно себе представить.
В этой статье я представлю некоторые советы относительно того, что стоит и чего не стоит делать при использовании JavaScript. Эта информация будет полезной как для новичков, так и для людей, уже имеющих какой-то опыт работы с этим языком.
Существуют некоторые общие правила написания кода на JavaScript, которые нужно иметь в виду. Это касается объявлений переменных, соглашений об именах, комментирования кода, стремления писать чистый код и быть в курсе происходящего в мире JavaScript. Давайте рассмотрим некоторые из этих вещей.
Переменные
Что касается наименования переменных, лучшим подходом считается использование camelCase. Если вся команда следует этому правилу, код получается более единообразным.
Кроме того, важно давать переменным короткие, лаконичные и описательные имена. Это требование обусловлено тем, что работа над кодом чаще всего бывает совместной. Читатель должен и без заглядывания в логи понимать, что хранится в этой переменной или к чему она относится.
Хорошее имя переменной должно поведать читателю о контексте ее использования в этом фрагменте кода, а не отражать содержащееся в ней значение или цель, с которой она используется с точки зрения пользователя.
Например, «userAnswer» является лучшим именем для переменной, чем «userInput», поскольку ясно отвечает на заданный вопрос с точки зрения программирования. Вы точно знаете, к чему относится input.
По тем же причинам старайтесь избегать слишком общих имен вроде «num» или «arr». Как минимум, к ним нужно добавлять информацию о том, к чему они относятся, например «selectedColors». Аналогично, «wantsSubscriptions» или «shouldRemember» – лучшие имена, чем «trueOrFalse».
Чтобы показать значение, используйте глаголы и формы единственного или множественного числа, а не какое-то сокращение, связанное с типом значения под этим именем.
Написание более чистого кода облегчает его чтение и считается хорошей практикой. С этой целью вы можете разместить объявление переменных в начале вашего сценария, добавив var или let перед первой переменной в списке (и только перед ней!). Остальные могут отделяться запятыми, а в конце объявления можно поставить точку с запятой.
Чтобы избежать неопределенных значений, инициализируйте переменные сразу при их объявлении, а все остальное делайте после.
let или const вместо var
Со времени принятия стандарта ES6 (также известного как ECMAScript 2015) переменные должны объявляться с помощью ключевых слов let и const. Причина, по которой решено отойти от использования ключевого слова var, заключается в том, что новые ключевые слова должны обеспечить более четкое понимание назначения переменной и контекста, в котором она используется.
Ключевое слово const указывает на то, что значение не будет изменено со временем, хотя в случае с объектами и массивами изменения допускаются.
С другой стороны, ключевое слово let показывает, что значение может быть изменено или переприсвоено.
Если вы попытаетесь изменить значение const, JavaScript сообщит вам об этом и поможет избежать багов. Хороший вариант применения const – хранение ссылки на DOM-элемент, который вы хотите постоянно иметь в этой переменной.
Ключевое слово let предназначено для использования с циклами и математическими алгоритмами и вообще в случаях, когда ожидается, что значение может меняться.
Переменные, объявленные с помощью let и const, не «поднимаются» (не всплывают), в отличие от объявленных с помощью var.
Комментарии
Вам случалось оказаться в ситуации, когда вы смотрите в собственный старый код и видите, что там нет никаких относящихся к делу комментариев? Возможно, вы когда-то забыли их написать или отложили написание на потом и так и не сделали этого. Какова бы ни была причина, теперь перед вами куча иероглифов и вы в растерянности, потому что не знаете, откуда начинать читать и как понять все это.
Написание чистого кода и соблюдение соглашений об именах очень помогают, но более сложные фрагменты кода иногда просто нуждаются в паре комментариев, чтобы помочь читателю быстрее разобраться с ними.
Я могу припомнить много случаев, когда я возвращалась к собственному коду и тратила много времени на то чтобы понять, что именно я написала и зачем. Таким образом я осознала важность описания логики в комментариях, чтобы они могли служить напоминанием и в будущем помочь мне быстрее разобраться.
Несомненно, вам тоже когда-нибудь понадобится понять свой или чужой код, и тогда вам захочется, чтобы в нем содержались какие-то комментарии, которые могли бы ускорить процесс.
Подобный опыт должен помочь вам понять важность написания комментариев. Имейте это в виду, когда в следующий раз будете писать какую-нибудь сложную логику. Просто напишите короткое предложение, описывающее этот фрагмент кода, и, поверьте мне, в будущем вы скажете себе спасибо. И что более важно, кто-то другой, читающий ваш код, тоже будет вам благодарен за комментарий. Кстати, добавить в комментарий немного юмора и позитива не повредит, в отличие от негатива и высокомерия.
Форматирование кода
Форматирование кода порой может вызывать сложности. Для облегчения процесса можно воспользоваться линтерами (инструментами для проверки кода), такими как ESLint или JSLint. Оба эти инструмента помогут вам сделать ваш код чище и лучше, а также привести в соответствие с принятыми у вас стандартами.
Самое малое, что вы можете сделать в плане форматирования, это использовать пробелы и переводы строки для группирования вашего кода в смысловые фрагменты. Так ваш код станет гораздо более читабельным, благодаря чему в дальнейшем вы гораздо быстрее сможете улавливать его смысл.
Производительность
В этом разделе мы напомним вам о важности производительности в программировании. Вот некоторые распространенные ловушки, в которые попадают новички, имеющие дело с JavaScript.
1. Вызов DOM-элементов
Если бы мне давали доллар каждый раз, как я вижу разбросанные по всему коду document.getElementById, я бы уже была миллионершей. Если DOM-элементы не изменились, просто сохраните их в переменной, которую сможете использовать в дальнейшем.
[javascript]let container = document.getElementById("someElementId");
container.innerHTML = "
<h1>Hello World!</h1>
";
container.addEventListener(‘mouseover’, function(e) {
this.innerHTML = "
<h1>Hello Again!</h1>
";
})[/javascript]
Это особенно распространено в случае с jQuery. Всем нам доводилось видеть подобный код:
[javascript]$(‘#button’).addClass(‘actioned’);
$(‘#button’).hover(function () { … });
$(‘#button’).click(function () { … });[/javascript]
Вместо такого:
[javascript]let button = $(‘#button’);
button.addClass(‘actioned’);
button.hover(function () { … });
button.click(function () { … });[/javascript]
Также нужно иметь в виду, что вызов DOM-элемента по Id является самым быстрым способом. Поэтому по возможности следует применять именно его, а не document.getElementsByClassName, document.getElementsByTagName, document.querySelector и т. п.
2. Манипуляции с DOM в цикле
Это пример того, как НЕ надо делать. Здесь мы вызываем элемент DOM из цикла. Это значит, что мы без необходимости вызываем его при каждой итерации и затем, следовательно, так же при каждой итерации заполняем его inner HTML.
[javascript]function processArray(myArray) {
for (let i = 0; i < myArray.length; i++){
let div = document.getElementById("container");
div.innerHTML = div.innerHTML + myArray[i];
if (i < myArray.length — 1) {
div.innerHTML = div.innerHTML + ", ";
}
}
}[/javascript]
Первое, что можно сделать для оптимизации этого кода, это разместить вызов над циклом. Таким образом мы не изменим логику этого блока кода, но дадим коду значительный прирост скорости при одновременном уменьшении использования памяти. Чтобы избежать постоянного обновления DOM с каждой итерацией (поскольку на это уходит много времени), будет хорошей идеей вынести из цикла и innerHTML.
[javascript]let container = document.getElementById("someElementId");
container.innerHTML = "
<h1>Hello World!</h1>
";
container.addEventListener(‘mouseover’, function(e) {
this.innerHTML = "
<h1>Hello Again!</h1>
";
})
[/javascript]
Эти примеры, если говорить о производительности кода, помогают нам запомнить две вещи. Во-первых, объявлять переменные вне цикла, а во-вторых, снижать количество операций DOM и использовать их с умом.
Кроме того, важно не забывать при создании новых переменных использовать let, а не var.
Однако глобальные переменные, объявленные с помощью let, не будут добавлены в качестве свойств в глобальные объекты window, как те, что объявлены с помощью var.
Строгий режим (Strict Mode)
Если нужно создать более надежный JavaScript-код, следует использовать «строгий режим». Он превращает «плохой синтаксис» (который ранее был допустим) в настоящие ошибки.
Это означает следующее. При попытке добавить значения в свойства неверно напечатанной переменной в обычном режиме была бы создана новая глобальная переменная, а в строгом режиме вы получите ошибку. В строгом режиме любое присваивание со свойствами non-writable или getter-only, несуществующим свойством, несуществующей переменной или несуществующим объектом выдаст ошибку.
Использование новейших стандартов JavaScript, возможно, является самой важной частью нашего списка.
Для начала, таким образом ваш код будет современным и, скорее всего, приближенным к существующим стандартам. Кроме того, используя новейшие особенности языка, вы и другие разработчики поощряете браузеры реализовывать эти особенности и поддерживать их «из коробки». Вы буквально создаете для них необходимость заниматься этим.
В настоящее время это делается с помощью инструментов транспиляци, таких как Babel. На случай, если вы не знакомы с Babel: он «переводит» новейший код JavaScript в формат, который понимают сегодняшние браузеры. Babel читает ваш JavaScript-код и компилирует новейшие использованные вами свойства в ES5, который понимают все браузеры.
Некоторые браузеры уже поддерживают особенности ES6, но использование Babel и сходных с ним инструментов все еще необходимо, поскольку мы хотим, чтобы наш код поддерживался всеми браузерами, в том числе их старыми версиями.
Чтобы узнать больше о Babel, я рекомендую посетить их сайт, где есть отличная документация – она поможет вам быстро освоить этот инструмент.
Помимо сказанного выше, используя новые стандарты, вы существенно облегчите себе жизнь! Новейшие особенности JavaScript просто потрясающие, и с каждой спецификацией они становятся все лучше. Это усовершенствование старых способов делать что-либо, например, использование Promises или Async/Await для избежания обратного вызова пирамиды смерти (a callback pyramid of doom).
Заключение
Изучение нового подразумевает выход из зоны комфорта, но поверьте мне, как только вы освоите новинки, вы уже не захотите возвращаться назад. Могу посоветовать обратить внимание на пару фич: методы массивов (map, reduce, filter), async/await и, конечно, мои любимцы – строчные литералы.
Важно помнить, что всегда есть возможность улучшить свои навыки программирования и написания чистого кода. Это марафон, а не спринт, так что не печальтесь, если ваш код еще не так чист, как должен быть. Самое главное, что он работает! Со временем вы приобретете больше опыта и начнете придерживаться стандартов отрасли и писать более чистый код. Но даже тогда у вас будет, куда расти и в чем совершенствоваться. Так что не опускайте руки – вам просто нужно время.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]