10 возможностей jQuery, которые можно заменить нативными API

Всё ещё загружаете jQuery ради нескольких удобных методов? Современные браузеры поставляются с нативными API, которые напрямую обрабатывают большинство паттернов jQuery — часто с лучшей производительностью и возможностями, которых jQuery никогда не предлагал.

Это руководство охватывает десять распространённых возможностей jQuery, которые вы можете уверенно заменить на ванильный JavaScript. Каждая замена работает во всех современных браузерах, не требует полифилов и избавляет вас от одной зависимости, которую нужно поддерживать.

Выборка DOM с помощью querySelector

Селектор $() в jQuery упростил запросы к DOM. Нативный JavaScript теперь соответствует этой простоте:

// jQuery
$('.menu-item')
$('#header')

// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')

Нативные методы принимают любой валидный CSS-селектор. Используйте querySelector для одиночных элементов, querySelectorAll для коллекций. Оба работают с любым элементом, а не только с document, что делает запросы с ограниченной областью видимости простыми.

Манипуляция классами с помощью classList

API classList заменяет методы работы с классами jQuery более чистым синтаксисом:

// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')

// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

Нативный classList также поддерживает несколько классов в одном вызове: el.classList.add('active', 'visible'). Метод replace() заменяет классы атомарно — то, что в jQuery требовало двух вызовов.

Обработка событий с помощью addEventListener

Замените привязку событий jQuery на addEventListener:

// jQuery
$el.on('click', handler)
$el.off('click', handler)

// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

Нативная обработка событий предлагает возможности, которые jQuery не предоставляет явно. Опция passive улучшает производительность прокрутки, а once автоматически удаляет слушатель после первого вызова:

el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })

Обход DOM с помощью closest

Метод closest() в jQuery находит ближайшего предка, соответствующего селектору. Нативный эквивалент работает идентично:

// jQuery
$el.closest('.container')

// Native
el.closest('.container')

Комбинируйте с опциональной цепочкой для более безопасного обхода: el.closest('.container')?.querySelector('.child').

Сетевые запросы с помощью fetch

Fetch API заменяет AJAX-методы jQuery интерфейсом на основе промисов:

// jQuery
$.ajax({ url: '/api/data' }).done(callback)

// Native
fetch('/api/data')
  .then(response => response.json())
  .then(callback)

Fetch предоставляет отмену запросов через AbortController — функциональность, которую jQuery никогда не предлагал нативно.

Данные форм с помощью FormData API

Сериализация форм больше не требует jQuery:

// jQuery
$('form').serialize()

// Native
const formData = new FormData(formElement)

FormData API напрямую обрабатывает загрузку файлов и бесшовно интегрируется с fetch. Если вам нужна строка запроса, похожая на serialize() в jQuery, передайте экземпляр FormData в URLSearchParams.

Удаление элементов с помощью remove()

Удаление элементов стало проще с нативным remove():

// jQuery
$el.remove()

// Native
el.remove()

Больше никакой гимнастики с parentNode.removeChild(el).

Итерация по коллекциям

jQuery автоматически итерирует по коллекциям. Нативный JavaScript использует стандартные методы массивов:

// jQuery
$('.items').each(function() { /* ... */ })

// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })

NodeList.forEach() работает напрямую. Для методов массивов, таких как map или filter, разверните в массив: [...document.querySelectorAll('.items')].

Анимация с помощью CSS и Web Animations API

CSS-переходы обрабатывают большинство потребностей в анимации. Для программного управления Web Animations API предоставляет то, что предлагал animate() в jQuery — плюс лучшую производительность:

// jQuery
$el.animate({ opacity: 0 }, 300)

// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })

Нативный API может выполнять анимации вне основного потока, когда они дружественны к композитору.

Document Ready

Замените обработчик ready в jQuery на DOMContentLoaded:

// jQuery
$(document).ready(handler)

// Native
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handler)
} else {
  handler()
}

Или разместите скрипты в конце <body> с атрибутом defer и полностью пропустите проверки ready.

Заключение

Удаление jQuery из кодовой базы не требует полной переписи. Начните с нового кода — используйте нативные API по умолчанию. Для существующего использования jQuery такие инструменты, как You Might Not Need jQuery, помогают идентифицировать простые замены.

Современные DOM API — это не просто альтернативы jQuery — они часто являются лучшим выбором. Они быстрее, предлагают больше контроля и поставляются с каждым браузером, который уже есть у ваших пользователей.

Часто задаваемые вопросы

Следует ли удалять jQuery из существующих проектов?

Не обязательно. Если jQuery хорошо работает в вашей текущей кодовой базе, его удаление может не стоить усилий. Сосредоточьтесь на использовании нативных API для нового кода и мигрируйте существующее использование jQuery постепенно во время регулярного обслуживания. Цель — сокращение зависимостей, а не переписывание стабильного кода.

Работают ли нативные API во всех браузерах?

Все методы, рассмотренные в этой статье, работают в современных браузерах, включая Chrome, Firefox, Safari и Edge. Internet Explorer не поддерживает некоторые функции, такие как fetch и classList.replace(), но IE достиг конца жизни в 2022 году. Полифилы не нужны для современных целевых браузеров.

Быстрее ли нативный JavaScript, чем jQuery?

В целом да. Нативные API избегают накладных расходов слоя абстракции jQuery и цепочки методов. Разница в производительности наиболее заметна в операциях с интенсивным использованием DOM и анимациях, где нативные методы могут использовать оптимизации браузера, к которым jQuery не имеет доступа.

Что насчёт плагинов jQuery, от которых я завис?

Плагины jQuery требуют jQuery для функционирования. Если вы полагаетесь на конкретные плагины, сохраните jQuery для этих компонентов, используя нативные API в других местах. Многие популярные плагины имеют альтернативы на ванильном JavaScript, или вы можете изолировать использование jQuery в конкретных модулях вашего приложения.