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 — они часто являются лучшим выбором. Они быстрее, предлагают больше контроля и поставляются с каждым браузером, который уже есть у ваших пользователей.

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

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.