Как улучшить свой JavaScript код

Некоторые рекомендации и полезные ссылки из сети по преобразованию своего 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 кода

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

  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 кола? Пишите в комментариях ниже! Буду рад дополнениям и замечаниям!

Веб разработчик MAKE-WEBSITE.ru
Автор
Подробнее
Геннадий Егупов

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

Кроссбраузернаяверстка
Созданиедизайнов
Интеграция с cmsMODx и PrestaShop
Разработка Vue.jsприложений
Прочитайте еще посты:

27 Апреля 2022

Просмотров: 1210

Комментариев: 0

веб разработка, javascript, рецепты

Содержание:

    Оставьте свой комментарий!


    Разрешённые теги: <b><i><br>


    Комментарии (0)

     

    Давайте общаться

    Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.