Как улучшить свой JavaScript код
Некоторые рекомендации и полезные ссылки из сети по преобразованию своего JavaScript кода для начинающего фронтенд разработчика.

Переменные
Правильно именовать переменные: переменные с маленькой буквы именуют, а классы большими. Давайте осмысленные имена.
Обработчики событий
Использование делегирования
Старайтесь не использовать много подобных обработчиков. Можно одним все решить: просто воспользуйтесь делегированием при создании обработчика определенного события и конструкцией switch для определения объекта, который был инициатором события:
var interface = document.getElementById("interface");
interface.addEventListener('input', function (e) {
var target= e.target || e.srcElement // получаем элемент где произошло событие
switch(target.id){
case "hatHarmon" : // для каждого input
aVolume = e.target.value;
break;
case //.....
});
// И проще и быстрее и нагляднее. Вместо мусора ...Button-ов то же самое одним все накрыть.
Одна функция для всех обработчиков событий
Можно вызвать такую функцию, чтобы активировать все прослушиватели событий:
// load all event listners
allEventListners();
// functions of all event listners
function allEventListners() {
document.addEventListener('readystatechange', hidePreloader);
navToggler.addEventListener('click', toggleMenu);
. . .
}
Кэширование данных
Пользуйтесь кэширующими механизмами браузеров для улучшения производительности кода. Не используйте слишком много document.querySelector каждый раз во всем document. Тем самым вы во всем dom дереве осуществляете поиск того, что находится рядом! Намного быстрее будет так:
var interface = document.getElementById("interface");
var hatValume = interface.querySelector("#hatVolume")
tomValue = hatValume.parentElement.nextElementSibling.querySelector("#tomVolume");
getElementById('id') вместо querySelector('#id')
getElementById быстрее чем querySelector('#id') в разы.
Приём программирования «модуль»
https://learn.javascript.ru/closures-module
Для того, чтобы у скрипта была своя собственная область видимости, чтобы его переменные не попали на страницу (в глобальную область видимости), заверните всё его содержимое в функцию, которую тут же запустите.
Файл script.js, оформленный как модуль:
(function() {
// глобальная переменная нашего скрипта
var message = "Привет";
// функция для вывода этой переменной
function showMessage() {
alert( message );
}
// выводим сообщение
showMessage();
}());
Размещение функций
В своем JS функции размещайте предпочтительно после кода, потому что, если сначала идёт код, то становится тут же понятно, что он делает. И тогда возможно даже не понадобится читать функции, особенно если их имена хорошо подобраны.
// --- код, использующий функции ---
let elem = createElement();
setHandler(elem);
walkAround();
// --- вспомогательные функции ---
function createElement() {
...
}
function setHandler(elem) {
...
}
function walkAround() {
...
}
Проверка наличия необходимого объекта
Если в своем скрипте вы обращаетесь к объекту сторонней библиотеки, то лучше вначале проверить наличие необходимого объекта.
Руководства по написанию JavaScript кода
- Google JavaScript Style Guide
- Airbnb JavaScript Style Guide (есть перевод)
- Idiomatic.JS (есть перевод)
- StandardJS
Использованные материалы
- Советы по стилю кода learn.javascript.ru
- Как улучшить код javaScript и подход в целом? qna.habr.com
- 50 советов, которые помогут улучшить код JavaScript https://nuancesprog.ru/p/12743/
- 12 советов по улучшению производительности JavaScript-приложений https://habr.com/ru/company/ruvds/blog/460795/
Пишите в комментариях
А вы какие используете приемы оптимизации JavaScript кола? Пишите в комментариях ниже! Буду рад дополнениям и замечаниям!

Создаю современные
высококонверсионные сайты
Прочитайте еще посты:
-
Установка HostCMS.Халява: шпаргалка для новичка
Памятка по быстрой установке бесплатной редакции HostCMS.Халява на виртуальный хостинг. Нюансы и ссылки по данной задаче в одном месте!
Подробнее -
Создание модуля PrestaShop: инструкция
Модули — это идеальный способ выразить свой талант и воображение, а также проявить себя, поскольку они дают много возможностей.
Подробнее
Давайте общаться
Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.
Оставьте свой комментарий!
Комментарии (0)