it-swarm.com.ru

jQuery против document.querySelectorAll

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

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

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

Какие-нибудь мысли?

147
Joel_Blum

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

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

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

Правка: Просто для записи, я большой поклонник Vanilla 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. Кроме того, вам придется учитывать кросс-браузерные проблемы, которые могут поставить под угрозу серьезное преимущество в скорости (помимо надежности) нативного кода.

115
Christoph

Если вы оптимизируете свою страницу для 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

58
Pascalius

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

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

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

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

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

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

12
John Slegers

движок выбора Sizzle в jQuery может использовать 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).

7
KGZM

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

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

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

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

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

6
MaxArt

Вот сравнение, если я хочу применить тот же атрибут, например скрыть все элементы класса "мой класс". Это одна из причин использовать 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 () выбирает только первый соответствующий элемент, что делает его полезным только наполовину.

5
Steven

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

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

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

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

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

4
Dom Day

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

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

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

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

2
Vanuan

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

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

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

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

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

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

0
user8903269

Просто комментарий по этому поводу: при использовании 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();
0
Ashvin Bhuttoo