Как улучшить свой 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

Использованные материалы

1. Советы по стилю кода learn.javascript.ru
2. Как улучшить код javaScript и подход в целом? qna.habr.com
3. 50 советов, которые помогут улучшить код JavaScript https://nuancesprog.ru/p/12743/
4. 12 советов по улучшению производительности JavaScript-приложений https://habr.com/ru/company/ruvds/blog/460795/

Пишите в комментариях

А вы какие используете приемы оптимизации JavaScript кола? Пишите в комментариях ниже! Буду рад дополнениям и замечаниям!

Автор

Подробнее

Геннадий Егупов

Создаю современные
высококонверсионные сайты

Кроссбраузернаяверстка

Созданиедизайнов

Интеграция с cmsMODx и PrestaShop

Разработка Vue.jsприложений

Написать Написать в Whatsapp