Я начал работать над веб-приложением, которому уже полдесятилетия, и недавно мы начали обновлять нашу кодовую базу, чтобы повысить производительность нашего приложения. Мы пробовали несколько вещей, чтобы сделать вещи проще, и удаление 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
- https://hackernoon.com/does-jquery-sacrifice-performance-and-code-efficiency-468aa967ef04
- https://medium.com/javascript-in-plain-english/jquery-will-die-soon-heres-why-976a6b8105e1
- http://youmightnotneedjquery.com/
- https://mmikowski.github.io/why-jquery/
- https://dev.opera.com/articles/css3-vs-jquery-animations/
Надеюсь, это было полезно. Спасибо за чтение!