jQuery против document.querySelectorAll

Несколько раз я слышал, что самым сильным активом jQuery является то, как он запрашивает и манипулирует элементами в DOM: вы можете использовать CSS-запросы для создания сложных запросов, которые было бы очень сложно выполнить в обычном javascript. Однако, насколько мне известно, вы можете достичь того же результата с помощью document.querySelectorили document.querySelectorAll, которые поддерживаются в Internet Explorer 8 и выше.

Таким образом, вопрос заключается в следующем: зачем «рисковать» издержками jQuery, если его самый сильный актив может быть достигнут с помощью чистого JavaScript?

Я знаю, что jQuery имеет больше, чем просто CSS-селекторы, например, кросс-браузерный AJAX, хорошее прикрепление событий и т. Д. Но его часть запросов - очень большая часть силы jQuery!

Есть предположения?

document.querySelectorAll() имеет несколько несоответствий в разных браузерах и не поддерживается в старых браузерах. ^{Это, вероятно, больше не вызовет проблем в наши дни} . У него очень не интуитивно понятный механизм обзора и некоторые другие не очень приятные функции . Также с javascript вам сложнее работать с результирующими наборами этих запросов, что во многих случаях может потребоваться. JQuery предоставляет функции для работы на них , как: filter(), find(), children(), parent(), map(), not()и еще несколько. Не говоря уже о способности jQuery работать с селекторами псевдоклассов.

Тем не менее, я бы не считал эти вещи сильнейшими функциями jQuery, а другими вещами, такими как «работа» над dom (события, стили, анимация и манипуляции) совместимым с кросс-браузером способом или интерфейсом ajax.

Если вам нужен только механизм выбора из jQuery, вы можете использовать тот, который использует сам jQuery: Sizzle. Таким образом, вы получаете мощь механизма выбора jQuerys без неприятных накладных расходов.

РЕДАКТИРОВАТЬ: Просто для записи, я большой фанат JavaScript JavaScript. Тем не менее, это факт, что вам иногда нужно 10 строк JavaScript, где вы бы написали 1 строку jQuery.

Конечно, вы должны быть дисциплинированными, чтобы не писать jQuery следующим образом:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Это чрезвычайно трудно прочитать, хотя последнее довольно ясно:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

Эквивалентный JavaScript будет гораздо более сложным, что иллюстрируется приведенным выше псевдокодом:

1) Найдите элемент, рассмотрите возможность взять весь элемент или только первый.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Выполните итерацию по массиву дочерних узлов с помощью некоторых (возможно, вложенных или рекурсивных) циклов и проверьте класс (список классов доступен не во всех браузерах!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) применить стиль CSS

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Этот код будет как минимум в два раза больше строк кода, которые вы пишете с помощью jQuery. Кроме того, вам придется учитывать кросс-браузерные проблемы, которые компрометируют серьезное преимущество в скорости (помимо надежности) нативного кода.

Если вы оптимизируете свою страницу для IE8 или новее, вам следует подумать, нужен ли вам jquery или нет. Современные браузеры изначально имеют множество ресурсов, которые предоставляет jquery.

Если вы заботитесь о производительности, вы можете получить невероятные преимущества в производительности (на 2-10 раз быстрее), используя собственный javascript: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Я преобразовал div-tagcloud из jquery в нативный javascript (совместимый с IE8 +), результаты впечатляют. В 4 раза быстрее, с небольшими накладными расходами.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Вы, возможно, не нуждаетесь Jquery предоставляет действительно хороший обзор, какие нативные методы заменяют для какой версии браузера.

http://youmightnotneedjquery.com/

Приложение: дальнейшее сравнение скорости, как нативные методы конкурируют с jquery

• Array: $ .inArray vs Array.indexOf: Jquery на 24% медленнее

• DOM: $ .empty vs Node.innerHtml: Jquery на 97% медленнее

• DOM: $ .on против Node.addEventListener: Jquery на 90% медленнее

• DOM: $ .find против Node.queryselectorall: Jquery на 90% медленнее

• Массив: $ .grep против Array.filter: родной на 70% медленнее

• DOM: $ .show / hide против отображения нет: Jquery на 85% медленнее

• AJAX: $ .ajax против XMLHttpRequest: Jquery медленнее на 89%

• Высота: $ .outerHeight против смещенияHeight: Jquery на 87% медленнее

• Аттр: $ .attr против setAttribute: Jquery на 86% медленнее

Чтобы понять, почему jQuery так популярен, важно понять, откуда мы пришли!

Около десяти лет назад лучшими браузерами были IE6, Netscape 8 и Firefox 1.5. В те времена было мало кросс-браузерных способов выбора элемента из DOM Document.getElementById().

Итак, когда jQuery был выпущен в 2006 году , это было довольно революционно. Тогда jQuery установил стандарт того, как легко выбирать / изменять элементы HTML и инициировать события, потому что его гибкость и поддержка браузера были беспрецедентными.

Теперь, более десяти лет спустя, многие функции, которые сделали jQuery столь популярным, стали включены в стандарт javaScript:

• Вместо jQuery теперь $()вы можете использоватьDocument.querySelectorAll()
• $el.on()Теперь вместо jQuery вы можете использоватьEventTarget.addEventListener()
• $el.toggleClass()Теперь вместо jQuery вы можете использоватьElement.classList.toggle()
• ...

Они вообще не были доступны еще в 2005 году. Тот факт, что они существуют сегодня, очевидно, ставит вопрос о том, почему мы вообще должны использовать jQuery. И действительно, люди все чаще задаются вопросом, стоит ли вообще использовать jQuery .

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

Это потому, что JQuery может сделать гораздо больше, чем querySelectorAll.

Прежде всего, jQuery (и Sizzle, в частности) работает для старых браузеров, таких как IE7-8, которые не поддерживают селекторы CSS2.1-3.

Кроме того, Sizzle (который является движком селектора позади jQuery) предлагает вам множество более продвинутых инструментов селектора, таких как :selectedпсевдокласс, расширенный :not()селектор, более сложный синтаксис, такой как in $("> .children")и так далее.

И он делает это кросс-браузеров, безупречно, предлагая все, что может предложить jQuery (плагины и API).

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

Селекторный движок jQuery Sizzle может использовать, querySelectorAllесли он доступен. Это также сглаживает несоответствия между браузерами для достижения единообразных результатов. Если вы не хотите использовать все jQuery, вы можете просто использовать Sizzle отдельно. Это довольно фундаментальное колесо для изобретения.

Вот некоторые черри из источника, которые показывают, что jQuery (w / Sizzle) выбирает для вас:

Режим причуда Safari:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Если этот охранник не работает, он использует версию Sizzle, которая не улучшена querySelectorAll. Кроме того, есть специальные маркеры несоответствий в IE, Opera и браузере Blackberry.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

И если все остальное терпит неудачу, это возвратит результат oldSizzle(query, context, extra, seed).

С точки зрения удобства поддержки кода, есть несколько причин придерживаться широко используемой библиотеки.

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

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

Назовите это сетевым эффектом, если хотите. Это не значит, что код будет лучше в jQuery; только то, что лаконичный характер кода облегчает понимание общей структуры для программистов всех уровней квалификации, хотя бы потому, что в просматриваемом файле сразу виден более функциональный код. В этом смысле 5 строк кода лучше, чем 10.

Подводя итог, я вижу основные преимущества jQuery как лаконичность кода и повсеместность.

Вот сравнение, если я хочу применить тот же атрибут, например, скрыть все элементы класса "my-class". Это одна из причин использовать jQuery.

JQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

Поскольку jQuery уже настолько популярен, они должны были заставить document.querySelector () вести себя так же, как $ (). Вместо этого document.querySelector () выбирает только первый соответствующий элемент, что делает его полезным только наполовину.

как говорится на официальном сайте: «jQuery: пиши меньше, делай больше, библиотека JavaScript»

попробуйте перевести следующий код JQuery без какой-либо библиотеки

$("p.neat").addClass("ohmy").show("slow");

Я думаю, что правильный ответ заключается в том, что jQuery был разработан задолго до того, как querySelector/querySelectorAllстал доступен во всех основных браузерах.

Первоначальный выпуск jQuery был в 2006 году . На самом деле, даже jQuery не был первым, кто реализовал CSS-селекторы .

IE был последним браузером для реализации querySelector/querySelectorAll. Его восьмая версия была выпущена в 2009 году .

Так что теперь селекторы DOM-элементов больше не являются сильной стороной jQuery. Тем не менее, у него все еще есть много положительных моментов, таких как ярлыки для изменения содержимого CSS и html элемента, анимации, привязка событий, ajax.

Старый вопрос, но спустя пол десятилетия стоит вернуться. Здесь я обсуждаю только селекторный аспект jQuery.

document.querySelector[All]поддерживается всеми текущими браузерами, вплоть до IE8, поэтому совместимость больше не является проблемой. Я также не нашел проблем с производительностью, чтобы говорить о (это должно было быть медленнее, чемdocument.getElementById , но мое собственное тестирование показывает, что это немного быстрее).

Поэтому, когда дело доходит до манипулирования элементом напрямую, оно должно быть предпочтительнее, чем jQuery.

Например:

var element=document.querySelector('h1');
element.innerHTML='Hello';

это значительно выше:

var $element=$('h1');
$element.html('hello');

Чтобы что-то сделать вообще, jQuery должен пройти через сто строк кода (я однажды проследил код, такой как приведенный выше, чтобы увидеть, что на самом деле делал с ним jQuery). Это явно пустая трата времени каждого.

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

Однако преимущество jQuery заключается в том, как он обрабатывает коллекции. Если требуется установить свойства нескольких элементов, jQuery имеет встроенный eachметод, который позволяет что-то вроде этого:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Для этого с Vanilla JavaScript потребуется что-то вроде этого:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

что некоторые находят пугающим.

Селекторы jQuery также немного отличаются, но современные браузеры (исключая IE8) не принесут особой пользы.

Как правило, я предостерегаю от использования jQuery для новых проектов:

• jQuery - это внешняя библиотека, которая увеличивает накладные расходы проекта и вашу зависимость от третьих сторон.
• Функция jQuery очень дорогая, с точки зрения обработки.
• JQuery навязывает методологию, которая должна быть изучена и может конкурировать с другими аспектами вашего кода.
• jQuery не спешит раскрывать новые функции в JavaScript.

Если ничего из вышеперечисленного не имеет значения, делайте что хотите. Однако jQuery уже не так важен для кроссплатформенной разработки, как раньше, поскольку современные JavaScript и CSS идут намного дальше, чем раньше.

Это не упоминает о других функциях jQuery. Однако я думаю, что им тоже нужно присмотреться.

$ ("# id") против document.querySelectorAll ("# id")

Дело в том, что с функцией $ () она создает массив, а затем разбивает его на вас, но с document.querySelectorAll () она создает массив, и вам нужно разбить его.

Просто комментарий по этому поводу: при использовании lite design design, jquery selector по какой-то причине не возвращает свойство для design design.

Для:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Это работает:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Это не:

$('#myinputfield').parentNode.MaterialTextfield.change();