Пришло время попрощаться с jQuery?

JavaScript API браузер jQuery
Пришло время попрощаться с jQuery?

Браузерные API и DOM прошли долгий путь с момента выпуска jQuery в 2006 году. Я также время от времени вижу в Интернете фразу «Пора прощаться с jQuery», наиболее известная из которых — в этой статье 2013 года.You Might Not Need jQuery. Конечно, я не хочу повторять здесь эту старую тему, но с тех пор, как была опубликована эта статья, браузеры действительно мало-помалу менялись и развивались. Браузеры продолжают публиковать и обновлять свои API, некоторые из которых заимствованы непосредственно из jQuery.

Давайте взглянем на некоторые новые API браузера, которые могут заменить методы jQuery.

Удалить элемент со страницы

В прошлом, если вы собирались удалить элемент с помощью API, предоставляемого браузером, вам приходилось идти окольным путем. Напримерel.parentNode.removeChild(el);, сейчас нет необходимости использовать такой обходной метод. Давайте сравним использование jQuery и нового API браузера для удаления элемента.

jQuery:

var $elem = $(".someClass") //选中元素
$elem.remove(); //删除元素

Использование нового API браузера:

var elem = document.querySelector(".someClass"); //选中元素
elem.remove() //删除元素

Напоминаю, если вы используете$elemЭтот метод представления представляет собой использование jQuery; если этоelemЗатем используйте метод браузера нативный.

вставить элемент

jQuery:

$elem.prepend($someOtherElem);

Использование нового API браузера:

elem.prepend(someOtherElem);

Вставить содержимое перед указанным элементом

jQuery:

$elem.before($someOtherElem);

Использование нового API браузера:

elem.before(someOtherElem);

заменить элемент

jQuery:

$elem.replaceWith($someOtherElem);

Использование нового API браузера:

elem.replaceWith(someOtherElem);

найти ближайший элемент

jQuery:

$elem.closest("div");

Использование нового API браузера:

elem.closest("div");

Видите ли, в новых браузерах предоставляется почти точно такой же метод, как и в jQuery. С развитием браузерных технологий jQuery рано или поздно славно уйдет со сцены истории, а также оставит неизгладимый след в истории веб-разработки.

Давайте посмотрим на поддержку каждого браузера для этих новых методов работы с DOM.Caniuse:

Можно обнаружить, что поддержка на настольном компьютере неплохая, в основном потому, что поддержка IE не очень идеальна; в то время как поддержка на мобильном терминале лучше, вы можете использовать ее с уверенностью.

скрыть элемент

jQuery:

$elem.fadeIn();

Чтобы сделать анимацию более естественной, с помощью CSS и js можно сделать простой переход на затухание и затухание.

.thingy {
  display: none;
  opacity: 0;
  transition: .8s;
}

Использование нового API браузера:

elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);

событие пожара только один раз

jQuery:

$elem.one("click", someFunc);

В прошлом, когда такое событие инициировалось только один раз, для его удаления требовался метод обратного вызова.

function dostuff() {
  alert("some stuff happened");
  this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);

Теперь есть более удобный способ, просто дайтеaddEventListenerЭтого можно добиться, передав методу логический параметр.

elem.addEventListener('click', someFunc, { once: true, });

Если вы все еще хотите зафиксировать событие и вызвать его только один раз, вы все равно можете сделать это, передав параметр:

elem.addEventListener('click', myClickHandler, {
  once: true,
  capture: true
});

анимация

Хотя jQuery предоставляетanimateметод, но его функциональность очень ограничена.

$elem.animate({
  width: "70%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
}, 1500);

Это объясняется в документации jQuery, поэтому значения атрибутов, которые можно перемещать, должны быть представлены числами; как указано выше, если значение атрибута не может быть представлено числами, вы не можете использовать jQuery.animateметод. Например, если вы хотите использовать преобразование и цвет для достижения анимационных эффектов, вы не можете использовать jQuery.animateметод. Однако браузеры предоставляют новый методWeb Animations APIдля создания анимационных эффектов.

var elem = document.querySelector('.animate-me');
elem.animate([
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', 
    filter: 'blur(40px)', 
    opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
], 1000);

Ajax

Ключевым преимуществом jQuery в прошлом было егоAjaxметод, jQuery помещаетXMLHttpRequestХорошо инкапсулированный, обеспечивающий элегантныйAjaxМетод действительно очень удобен в использовании:

$.ajax('https://some.url', {
  success: (data) => { /* do stuff with the data */ }
});

Конечно, теперь браузеры предоставляютfetch APIдля замены XMLHttpRequest и теперь поддерживается всеми браузерами.

fetch('https://some.url')
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  });

Конечно, метод выборки может быть не таким простым, как вы думаете. Однако он более общий и удобный, чем построение какой-либо функциональности поверх XMLHttpRequest.

Конечно, если мы хотим использовать его проще, мы можем использовать некоторые сторонние упакованные крошечные библиотеки классов...

Axios— очень популярная библиотека, посвященная операциям Ajax. Очень легкий, он фокусируется только на одном, Ajax. Хотя они не будут использоваться для крупномасштабного тестирования, такого как jQuery, они представляют собой альтернативу jQuery.

Хотя, согласно текущему развитию браузерных технологий, использование предоставляемых ими методов манипулирования DOM вполне может справиться с работой веб-разработки! Тем не менее, остается много опасений, например, у разных производителей браузеров разный уровень поддержки, и многие разработчики по-прежнему считают, что безопаснее использовать jQuery ради страховки. В большинстве случаев вам не нужно так сильно об этом беспокоиться, просто используйте его, а во многих случаях просто обратитесь кpolyfillОн может очень хорошо работать с браузерами, несовместимыми с новым методом.

Просто введите этот простой шаг, и вы сможете справиться с любыми проблемами совместимости. Для получения подробной информации, пожалуйста, посетите его официальный сайтpolyfill.io.

jQuery медленный?

Конечно, jQuery может быть быстрее, чем некоторые плохо написанные js, но именно поэтому вы должны изучать javascript еще лучше! Один из основных разработчиков jQuery Пол Айриш однажды сказал:

Для повышения производительности не используйте метод jQuery hide().

Как создатель jQuery, в одной из своих книгSecrets of the JavaScript NinjaОднажды сказал что-то вроде этого:

Если вы используете стороннюю библиотеку javascript, вам необходимо понять один из ее принципов. Основная причинапредставление. Знание того, как работает библиотека, может помочь вам писать более производительный код.

Можем ли мы действительно попрощаться с jQuery?

Можем ли мы действительно попрощаться с jQuery? На самом деле это не так просто, тем более, что jQuery развивался столько лет и сформировал огромную экосистему. Итак, сейчас существует множество микробиблиотек, пытающихся имитировать стиль jQuery, чтобы повысить уровень близости для разработчиков.

  • Эксперт W3C Леа Веру написала статьюjQuery Considered Harmfulи написалBliss.jsМикро библиотека. Это подражание стилю синтаксиса jQuery.$.
  • Пол Айриш также написалBling.jsСценарий также используется для имитации синтаксического стиля jQuery.$.
  • Remy Sharp предоставляет миниатюрную библиотеку сценариев.min.js.

Конечно, я не противник jQuery. Есть еще много отличных разработчиков, которые предпочитают использовать jQuery. Если вы привыкли использовать его, конечно, вы можете продолжать использовать его. В настоящее время многие компании по-прежнему рассматривают это как необходимое требование к навыкам при приеме на работу. Тем не менее, Microsoft объявила новость о том, что Internet Explorer 11 станет последней версией браузера IE.Как только IE покинет стадию Интернета, jQuery также может начать историческую стадию с кончиной IE. В то время jQuery может быть действительно ненужным.

Эта статья в основном изYou Might Not Need jQueryВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!

Категории