Я начал работать над веб-приложением, которому уже полдесятилетия, и недавно мы начали обновлять нашу кодовую базу, чтобы повысить производительность нашего приложения. Мы пробовали несколько вещей, чтобы сделать вещи проще, и удаление jQuery в качестве зависимости было одним из них.

Существует множество статей, которые помогут вам выбрать, следует ли вам использовать jquery или нет, поэтому я не буду говорить об этом (несколько статей приложены в конце этой статьи). Вместо этого я упомяну причину, по которой мы лично решили отказаться от jQuery, и то, как мы обновили несколько фрагментов jQuery до фрагментов Vanilla JS в нашей кодовой базе.

Почему мы решили отказаться от jQuery?

  • Во-первых, мы включили jQuery для удобства разработчиков, и за последние несколько лет в экосистеме JS многое изменилось, и, честно говоря, мы поняли, что теперь можем удобно делать почти все на JavaScript.
  • Нам больше не нужно загружать файл / код ~ 87 КБ в нашем проекте.
  • Основные операторы, такие как селекторы, обработчики событий, сеттеры/геттеры, могут быть написаны с помощью vanilla JS. Таким образом, вместо внутреннего вызова этих базовых методов в моей библиотеке я могу вызывать их сам.
  • Теперь меньше возможностей столкнуться с проблемами кросс-браузерной совместимости, что было еще одной основной причиной использования jQuery в первую очередь для многих разработчиков. Так что эта льгота больше не действует.
  • Анимации CSS3 имеют гораздо лучшую производительность, чем эффекты jQuery, поскольку анимации CSS3 выполняются в другом потоке, чем JavaScript в веб-приложении. Попробуйте это — https://greensock.com/js/speed.html, чтобы сравнить производительность

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

Ниже приведены несколько методов jQuery, которые мы обычно используем в нашей кодовой базе. Команда jQuery была достаточно любезна, чтобы перечислить альтернативы JavaScript своим методам jQuery в самой документации, так что отказаться от jQuery было несложно. Я также предоставил альтернативный код JavaScript, который мы использовали для каждого оператора.

Примечание. Эти фрагменты кода относятся к дизайну нашей страницы и структуре кода. Они могут отличаться в зависимости от вашей кодовой базы.

Селекторы

Мы широко использовали селекторы class и id для получения ссылок на элементы DOM.

// jQuery
let searchBox = $(“.search-box”);
searchBox.on("keydown", () =>{
  // do something
});
// JavaScript
// we wanted the event listener only to the first text box anyway
let searchBox = document.getElementsByClassName("search-box")[0];
searchBox.addEventListener("keydown", () => {
  // do something
}):

Обработчики событий

Вместо этого .on, который мы использовали для присоединения событий к любому элементу DOM, перемещается в .addEventListener. Пример кода в приведенном выше разделе — «Как мы это сделали».

Последствия

Методы .hide и .show, которые мы использовали для рендеринга после асинхронного получения данных, заменены на display: none и display: block. Что ж, есть приемлемый для нас компромисс — анимация. мы могли бы использовать анимацию CSS для этого, но изначально мы решили скрыть/показать, используя свойство стиля display, так как мы могли бы пока обходиться без анимации. Наше свойство отображения по умолчанию было block для контейнера, так что это отлично сработало для нас.

// jQuery
$("#results").hide(500); // to hide
$("#results").show(500); // to show
// JavaScript
document.getElementById("results").style.display = "none" // to hide
document.getElementById("results").style.display = "block" // to show

Получение и установка атрибутов

// jQuery
$("#result-link").attr("href");
$("#result-link").attr("href", "https://www.google.com");
// JavaScript
document.getElementById("result-link").getAttribute("href");
document.getElementById("result-link").setAttribute("href", "https://www.google.com");

Получить/установить имена и стили классов

// jQuery
$( "#results" ).hasClass( "show" ); 
$( "#results" ).addClass( "show" );
$( "#results" ).removeClass( "show" );
$( "#results" ).css({top: 0})

// JavaScript
document.getElementById("results").classList.includes("show");
document.getElementById("results").classList.add("show");
document.getElementById("results").classList.remove("show");
document.getElementById("results").style.top = 0;

.готов()

Версия функции .ready для JavaScript добавляет обработчик DOMContentLoaded к элементу DOM. На StackOverflow есть подробный ответ, но это наш первоначальный обходной путь.

jQuery
$(document).ready(function() {
  // Handler for .ready() called
});
JavaScript
document.addEventListener("DOMContentLoaded", function() {
  // Handler for DOMContentLoaded
});

Хотя синтаксис jQuery выглядит простым и коротким, мы живем в мире с минификаторами, которые гарантируют, что никакие дополнительные байты не будут доставлены на клиентскую машину с помощью JavaScript.

ИМХО, веб-разработчики-новички должны хотя бы раз взглянуть на jQuery на любительском этапе. Это лично помогло мне получить знания о многих концепциях в JavaScript и легко с ними связываться, например: привязка/отвязка событий, парсинг DOM и т. д. Если вы используете какую-либо из современных платформ, таких как Angular, React или Vue, то разработчик удобство и кросс-браузерная совместимость уже есть, поэтому у вас будет меньше возможностей для включения jQuery в ваше приложение.

Несколько статей, которые вы могли бы прочитать, если хотите решить, использовать или не использовать jQuery

Надеюсь, это было полезно. Спасибо за чтение!