Хорошие практики в JavaScript: использование JQuery с умом

Библиотека JQuery для JavaScript пользуется огромной популярностью среди начинающих разработчиков и в вебе имеется огромное количество проектов написанных с ее использованием.

В простоте JQuery кроется огромное количество низкокачественного кода. Дабы избежать этого мы пройдемся по списку простых но невероятно действенных способов писать с JQuery красиво.

Загрузка JQuery

Всегда используйте CDN при подключении jQuery библиотек. Данная опция позволяет с большой вероятностью подгружать jQuery уже из кеш памяти браузера.

По возможности загружайте весь ваш javascript код и jQuery в конце HTML документа, чтобы ускорить подачу страницы пользователю.

Если вы одновременно используете другие библиотеки типа Prototype и Mootools, могут возникнуть конфликты в области видимости переменной $ , чтобы предотвратить конфликт переменных и вернуть управление другим библиотекам. Используйте jQuery метод $.noConflict().

Поиск элементов в DOM

По возможности используйте ID для выбора элементов, этот селектор обрабатывается быстрее за счет использования document.getElementById().

Используйте для поиска метод $().find() по примеру Id->child. Данный метод работает быстрее так как минует повторную выборку элемента.

Избегайте выборки по нескольким ID, только для селектора по одному ID используется напрямую document.getElementById();

Кеширование элементов

Сохраняйте результаты выборки элементов в переменные. Это позволит избежать повторного поиска элементов в DOM.

() => {
let $container = $(".container");
$container.show();
$container.toggleClass("someClass"); //Поиск элемента будет произведен один раз, остальные действия с элементом происходят по ссылке хранимой в переменной
}

Работа с DOM элементами

Всегда отсоединяйте элемент с помощью метода $().detach() перед манипуляции с ним и возвращайте обратно в конце манипуляций. При таком подходе не будут исполняться дорогостоящие операции с DOM в большом количестве.

Используйте конкатенацию строк или метод array.join перед $().append(). Цикличное использование этого метода вызывает множественные операции с DOM деревом, что является очень ресурсозатратной операцией. Лучше подготовить все данные для вставки перед ее выполнением - это сильно улучшит производительность Вашего кода.

Отправка запросов AJAX

Избегайте использования $.ajax().getJson() или $.ajax() .get(), используйте $.ajax() для получения данных, их парсинг уже используется внутри метода.

Не используйте URL строку для передачи параметров. Указывайте все параметры в передаваемом объекте. Это улучшает читаемость кода и позволяет легко модифицировать передаваемые данные.

Чейнинг вызовов

jQuery устроен так, что при вызове метода для объекта, метод возвращает ссылку на передаваемый объект, эта особенность позволяет нам строить цепочки вызовов.

() => {
let $container = $(".container");
$container.show().toggleClass("someClass"); //Изменим код из примера выше
}

По возможности используйте нативный javascript в место jQuery, это даст больший прирост производительности.

На этом все, спасибо что прочли до конца и надеюсь эта статья поможет Вам.

Не забудьте подписаться на канал, что бы не пропустить свежие публикации