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

Проверка наличия необходимого объекта

Если в своем скрипте вы обращаетесь к объекту сторонней библиотеки, то лучше вначале проверить наличие необходимого объекта.

Web development: шпаргалка для фронтенд разработчикаОсновные понятия и краткие описания технологий, используемых в веб разработке: препроцессоры, шаблонизаторы, Pug, BEM, JavaScript, Git, Http, Api, Mvc, ООП, Node.js, Npm, Webpack и другие.

Руководства по написанию 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/
5. Coding Standards and Best Practices https://github.com/stevekwan/best-practices
   Pragmatic Standards: JavaScript Coding Standards and Best Practices
6. clean-code-javascript https://github.com/ryanmcdermott/clean-code-javascript

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

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

Автор – веб-разработчик

Геннадий Вебстер

Создание качественных сайтов по реальным ценам

• HTML5
• CSS3
• JavaScript
• jQuery
• VueJs
• MODx
• HostCMS
• PrestaShop
• Figma
• Photoshop
• CorelDRAW

Разработка сайтовпод ключ

Редизайнсайтов и страниц

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

Создание JavaScript виджетов

Сопровождение сайтов

Написать