JQuery vs document.querySelectorAll

J'ai entendu plusieurs fois que l'atout le plus fort de jQuery est la façon dont il interroge et manipule les éléments du DOM: vous pouvez utiliser des requêtes CSS pour créer des requêtes complexes qui seraient très difficiles à faire en javascript régulier. Cependant, pour autant que je sache, vous pouvez obtenir le même résultat avec document.querySelector ou document.querySelectorAll , pris en charge dans Internet Explorer 8 et versions ultérieures.

Donc, la question est la suivante: pourquoi risquer les frais généraux de jQuery si son atout le plus puissant peut être réalisé avec un JavaScript pur?

Je sais que jQuery a plus que des sélecteurs CSS, par exemple un navigateur croisé AJAX, un joli assemblage d'événements, etc. Mais sa partie d'interrogation est une très grande partie de la force de jQuery!

Des pensées?

document.querySelectorAll() a plusieurs incohérences dans les navigateurs et n'est pas pris en charge dans les anciens navigateurs. Cela ne causera probablement plus aucun problème aujourd'hui . Il a un mécanisme de ciblage très peu intuitif et d'autres fonctionnalités pas très intéressantes . De même, avec javascript, vous travaillez plus fort avec les ensembles de résultats de ces requêtes, ce qui, dans de nombreux cas, vous voudrez peut-être faire. JQuery fournit des fonctions pour y travailler comme: filter() , find() , children() , parent() , map() , not() et plusieurs autres. Sans parler de la capacité de jQuery à travailler avec des sélecteurs de pseudo-classe.

Cependant, je ne considérerais pas ces choses comme les fonctionnalités les plus fortes de jQuery, mais d'autres choses comme "travailler" sur le dom (événements, style, animation et manipulation) d'une manière compatible avec le crossbrowser ou l'interface ajax.

Si vous voulez seulement le moteur de sélection de jQuery, vous pouvez utiliser le jQuery lui-même utilise: Sizzle De cette façon, vous avez la puissance du moteur de jQuerys Selector sans frais généraux.

EDIT: Juste pour mémoire, je suis un énorme fan de JavaScript de vanilla. Néanmoins, c'est un fait que vous avez parfois besoin de 10 lignes de JavaScript où vous écririez 1 ligne jQuery.

Bien sûr, vous devez être discipliné pour ne pas écrire jQuery comme ceci:

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

C'est extrêmement difficile à lire, alors que ce dernier est assez clair:

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

Le JavaScript équivalent serait beaucoup plus complexe illustré par le pseudocode ci-dessus:

1) Trouvez l'élément, envisagez de prendre tous les éléments ou seulement le premier.

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

2) Iterate sur le tableau des nœuds enfants via certaines boucles (éventuellement imbriquées ou récursives) et vérifiez la classe (liste de cours non disponible dans tous les navigateurs!)

 //.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) appliquez le style css

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

Ce code serait au moins deux fois plus de lignes de code que vous écrivez avec jQuery. De plus, vous devriez envisager des problèmes de navigation croisée qui compromettra l' avantage de vitesse sévère (en plus de la fiabilité) du code natif.

Si vous optimisez votre page pour IE8 ou plus récent, vous devriez vraiment considérer si vous avez besoin de jquery ou pas. Les navigateurs modernes possèdent de nombreux éléments de manière native que jquery fournit.

Si vous vous occupez de la performance, vous pouvez avoir des avantages de performance incroyables (2-10 plus rapidement) en utilisant le javascript natif: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

J'ai transformé un div-tagcloud de jquery en javascript indigène (IE8 + compatible), les résultats sont impressionnants. 4 fois plus rapide avec un peu de frais généraux.

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

Vous ne pourriez pas besoin de Jquery fournit un très bon aperçu, quelles méthodes natives remplacent pour quelle version du navigateur.

http://youmightnotneedjquery.com/


Annexe: Autres rapports de vitesse sur la manière dont les méthodes natives concourent à jquery

  • Array: $ .inArray vs Array.indexOf: Jquery 24% plus lent

  • DOM: $ .empty vs Node.innerHtml: Jquery 97% plus lent

  • DOM: $ .on vs Node.addEventListener: Jquery 90% plus lent

  • DOM: $ .find vs Node.queryselectorall: Jquery 90% plus lent

  • Array: $ .grep vs Array.filter: Natif 70% plus lent

  • DOM: $ .show / hide vs display none: Jquery 85% plus lent

  • AJAX: $ .ajax vs XMLHttpRequest: Jquery 89% plus lent

  • Hauteur: $ .outerHeight vs offsetHeight: Jquery 87% plus lent

  • Attr: $ .attr vs setAttribute: Jquery 86% plus lent

Le moteur du sélecteur Sizzle de jQuery peut utiliser querySelectorAll s'il est disponible. Il supprime également les incohérences entre les navigateurs pour obtenir des résultats uniformes. Si vous ne souhaitez pas utiliser tout jQuery, vous pouvez simplement utiliser Sizzle séparément. C'est une roue assez fondamentale à inventer.

Voici quelques cérémonies de la source qui montrent le genre de choses que jQuery (w / Sizzle) trie pour vous:

Safari quirks mode:

 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; } 

Si ce garde échoue, il utilise une version de Sizzle qui n'est pas améliorée avec querySelectorAll . Plus loin, il existe des manœuvres spécifiques pour les incohérences dans IE, Opera et le navigateur 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 ); } 

Et si tout échoue, il retournera le résultat de oldSizzle(query, context, extra, seed) .

C'est parce que jQuery peut faire beaucoup plus que querySelectorAll .

Tout d'abord, jQuery (et Sizzle, en particulier), fonctionne pour les navigateurs plus anciens comme IE7-8 qui ne supporte pas les sélecteurs CSS2.1-3.

De plus, Sizzle (qui est le moteur de sélection derrière jQuery) vous offre beaucoup d'instruments de sélection plus avancés, comme :selected pseudo-classe sélectionné, un sélecteur avancé :not() , une syntaxe plus complexe comme en $("> .children") Et ainsi de suite.

Et il le fait cross-browsers, impeccablement, offrant tout ce que jQuery peut offrir (plugins et API).

Oui, si vous pensez pouvoir compter sur des sélecteurs de classe et d'identification simples, jQuery est trop pour vous, et vous payez un gain exagéré. Mais si vous ne le faites pas, et souhaitez profiter de tous les avantages de jQuery, utilisez-le.

Voici une comparaison si je veux appliquer le même attribut, par exemple, cachez tous les éléments de la classe "my-class". C'est une des raisons d'utiliser 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'; } 

Avec jQuery déjà si populaire, ils auraient dû faire en sorte que document.querySelector () se comporte comme $ (). Au lieu de cela, document.querySelector () sélectionne uniquement le premier élément correspondant qui le rend à peu près utile.

Pour comprendre pourquoi jQuery est si populaire, il est important de comprendre d'où nous venons!

Il y a environ une décennie, les principaux navigateurs étaient IE6, Netscape 8 et Firefox 1.5. À l'époque, il y avait peu de moyens de navigateur croisé pour sélectionner un élément du DOM en plus de Document.getElementById() .

Ainsi, lorsque jQuery a été relâché en 2006 , c'était plutôt révolutionnaire. À l'époque, jQuery définit la norme pour savoir comment sélectionner / modifier facilement des éléments HTML et des événements déclencheurs, car sa flexibilité et son support de navigateur étaient sans précédent.

Maintenant, plus d'une décennie plus tard, beaucoup de fonctionnalités qui ont rendu jQuery si populaire sont devenues incluses dans le standard javaScript:

  • Au lieu de $() de jQuery, vous pouvez maintenant utiliser Document.querySelectorAll()
  • Au lieu de jQuery's $el.on() , vous pouvez maintenant utiliser EventTarget.addEventListener()
  • Au lieu de jQuery's $el.toggleClass() , vous pouvez maintenant utiliser Element.classList.toggle()

Ceux-ci n'étaient généralement pas disponibles en 2005. Le fait qu'ils sont aujourd'hui implique évidemment la question de savoir pourquoi nous devrions utiliser jQuery du tout. Et en effet, les gens se demandent de plus en plus de savoir si nous devrions utiliser jQuery .

Donc, si vous pensez avoir compris JavaScript assez bien pour se passer de jQuery, faites-le! Ne vous sentez pas obligé d'utiliser jQuery, juste parce que tant d'autres le font!

En ce qui concerne la facilité de maintenance du code, il existe plusieurs raisons de s'en tenir à une bibliothèque largement utilisée.

L'un des principaux est qu'ils sont bien documentés, et ont des communautés telles que … disons … stackexchange, où l'aide avec les bibliothèques peut être trouvée. Avec une bibliothèque codée personnalisée, vous avez le code source et peut-être un document pratique, à moins que le (s) codeur (s) ne passent plus de temps à documenter le code que l'écrire, ce qui est extrêmement rare.

L'écriture de votre propre bibliothèque pourrait fonctionner pour vous , mais le stagiaire assis à la prochaine table peut avoir plus de temps à démarrer avec quelque chose comme jQuery.

Appelez-le comme effet réseau si vous le souhaitez. Cela ne veut pas dire que le code sera supérieur en jQuery; Juste que la nature concise du code facilite la compréhension de la structure globale pour les programmeurs de tous les niveaux de compétences, ne serait-ce que parce qu'il y a plus de code fonctionnel visible à la fois dans le fichier que vous regardez. Dans ce sens, 5 lignes de code sont meilleures que 10.

Pour résumer, je vois les principaux avantages de jQuery comme étant un code concis et l'ubiquité.

Je pense que la vraie réponse est que jQuery a été développé longtemps avant que querySelector/querySelectorAll soit disponible dans tous les principaux navigateurs.

La version initiale de jQuery était en 2006 . En fait, même jQuery n'était pas le premier qui a mis en place des sélecteurs CSS .

IE était le dernier navigateur à implémenter querySelector/querySelectorAll . Sa 8ème version a été diffusée en 2009 .

Alors maintenant, les sélecteurs d'éléments DOM ne sont plus le point le plus fort de jQuery. Cependant, il a encore beaucoup de goodies dans sa manche, comme les raccourcis pour changer le contenu css et html de l'élément, les animations, les événements liés, ajax.

Comme le dit le site officiel: "jQuery: The Write Less, Do More, JavaScript Library"

Essayez de trancher le code jQuery suivant sans aucune bibliothèque

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