Share
Si il y en a un mal jQuery, c’est que le niveau d’entrée est tellement bas qu’il a tendance à attirer ceux qui n’ont pas une once de connaissances en JavaScript. Maintenant, d'une part, c'est fantastique. Cependant, d'un autre côté, cela aboutit également à une poignée de code, assez franchement dégoûtant (dont j'ai moi-même écrit certains!).
Mais ça va; Un code effroyablement pauvre qui ferait même haleter votre grand-mère est un rite de passage. La clé est de gravir la colline, et nous en discuterons dans le tutoriel d'aujourd'hui..
Il est important de se rappeler que la plupart des méthodes renvoient l'objet jQuery. Ceci est extrêmement utile et permet la fonctionnalité de chaînage que nous utilisons si souvent.
Accentsconagua
$ someDiv .attr ('class', 'someClass') .hide () .html ('nouveautés'); Sachant que l'objet jQuery est toujours renvoyé, nous pouvons l'utiliser pour supprimer parfois du code superflu. Par exemple, considérons le code suivant:
var someDiv = $ ('# someDiv'); someDiv.hide (); La raison pour laquelle nous "cachons" l'emplacement de la
un peuélément est de limiter le nombre de fois que nous devons traverser le DOM pour cet élément à une fois.
Le code ci-dessus est parfaitement correct; Cependant, vous pouvez tout aussi facilement combiner les deux lignes en une, tout en obtenant le même résultat..
var someDiv = $ ('# someDiv'). hide (); De cette façon, nous cachons encore le un peu comme nous l’avons appris, la méthode retourne également l’objet jQuery - qui est ensuite référencé via le un peu variable.
Tant que vos sélecteurs ne sont pas ridiculement pauvres, jQuery fait un travail fantastique en les optimisant au mieux, et vous n'avez généralement pas besoin de trop vous inquiéter. Cela dit, vous pouvez apporter quelques améliorations qui amélioreront légèrement les performances de votre script..
Une de ces solutions consiste à utiliser le trouver() méthode, lorsque cela est possible. La clé est loin de forcer jQuery à utiliser son moteur Sizzle, si cela n’est pas nécessaire. Certainement, il y aura des moments où ce ne sera pas possible - et ce n'est pas grave; mais si vous n'avez pas besoin de frais généraux supplémentaires, ne le cherchez pas.
// Fin dans les navigateurs modernes, bien que Sizzle commence à "courir" $ ('# someDiv p.someClass'). Hide (); // Mieux pour tous les navigateurs, et Sizzle n'y entre jamais. $ ('# someDiv'). find ('p.someClass'). hide (); Les derniers navigateurs modernes prennent en charge
QuerySelectorAll, qui vous permet de passer des sélecteurs de type CSS, sans avoir besoin de jQuery. jQuery vérifie également cette fonction.
Cependant, les anciens navigateurs, à savoir IE6 / IE7, ne fournissent naturellement aucune assistance. Cela signifie que ces sélecteurs plus complexes déclenchent le moteur complet Sizzle de jQuery, qui, bien que brillant, s'accompagne d'un peu plus de temps système..
Sizzle est une masse brillante de code que je ne comprendrai peut-être jamais. Cependant, dans une phrase, il prend d'abord votre sélecteur et le transforme en un "tableau" composé de chaque composant de votre sélecteur.
// Brève idée de son fonctionnement ['#someDiv,' p '];
Il commence ensuite, de droite à gauche, à déchiffrer chaque élément avec des expressions régulières. Cela signifie également que la partie la plus à droite de votre sélecteur doit être aussi spécifique que possible - par exemple, une identifiant ou nom de tag.
En bout de ligne, si possible:
trouver() méthode. De cette façon, plutôt que d'utiliser Sizzle, nous pouvons continuer à utiliser les fonctions natives du navigateur.. Il est également possible d'ajouter un contexte à vos sélecteurs, tels que:
$ ('. someElements', '#someContainer'). hide (); Ce code demande à jQuery d’envelopper une collection de tous les éléments avec une classe de certainsElements -- qui sont des enfants de un conteneur -- dans jQuery. L’utilisation d’un contexte est un moyen utile de limiter la traversée du DOM. Cependant, en coulisse, jQuery utilise le trouver méthode à la place.
$ ('# someContainer') .find ('. someElements') .hide (); // HANDLE: $ (expr, contexte) // (ce qui équivaut à: $ (contexte) .find (expr) else return jQuery (context) .find (sélecteur);
$ (ceci) Sans connaître les différentes propriétés et fonctions du DOM, il peut être facile de abuser de l'objet jQuery inutilement. Par exemple:
$ ('# someAnchor'). click (function () // Bleh alert ($ (this) .attr ('id'));); Si notre seul besoin de l'objet jQuery est d'accéder à la balise d'ancrage identifiant attribut, c'est un gaspillage. Mieux vaut rester avec du JavaScript "brut".
$ ('# someAnchor'). click (function () alert (this.id);); Notez que trois attributs doivent toujours être accessibles via jQuery: "src", "href" et "style". Ces attributs nécessitent l’utilisation de
obtenirAttribuerdans les anciennes versions d'IE.
// jQuery Source var rspecialurl = / href | src | style /; //… var special = rspecialurl.test (name); //… var attr =! JQuery.support.hrefNormalized && notxml && special? // Certains attributs nécessitent un appel spécial sur IE elem.getAttribute (name, 2): elem.getAttribute (name);
Le processus d'interrogation répétée du DOM et de création de plusieurs objets jQuery est encore pire..
$ ('# elem'). hide (); $ ('# elem'). html ('bla'); $ ('# elem'). otherStuff (); J'espère que vous savez déjà à quel point ce code est inefficace. Si non, ça va. nous apprenons tous. La solution consiste soit à implémenter un chaînage, soit à "mettre en cache" l’emplacement de #elem.
// Cela fonctionne mieux $ ('# elem') .hide () .html ('bla') .otherStuff (); // Ou ceci, si vous préférez pour une raison quelconque. var elem = $ ('# elem'); elem.hide (); elem.html ('bla'); elem.otherStuff (); Prêt Méthode L'écoute de quand le document est prêt à être manipulé est ridiculement simple avec jQuery.
$ (document) .ready (function () // montons dans heeya);
Cependant, il est très possible que vous ayez rencontré une fonction d’emballage différente, plus déroutante..
$ (function () // montons dans heeya);
Bien que ce dernier soit un peu moins lisible, les deux extraits ci-dessus sont identiques. Ne me crois pas? Il suffit de vérifier la source jQuery.
// HANDLE: $ (fonction) // Raccourci pour le document prêt if (jQuery.isFunction (sélecteur)) return rootjQuery.ready (sélecteur);
rootjQuery est simplement une référence à la racine jQuery (document). Lorsque vous passez un sélecteur à la fonction jQuery, il détermine le type de sélecteur que vous avez transmis: chaîne, balise, id, fonction, etc. Si une fonction a été transmise, jQuery appellera alors son prêt() méthode et passez votre fonction anonyme en tant que sélecteur.
Si vous développez du code pour la distribution, il est toujours important de compenser les éventuels conflits de noms. Que se passerait-il si un script, importé après le vôtre, avait également une $ une fonction? Mauvaises choses!
La réponse est d'appeler jQuery pas de conflit(), ou pour stocker votre code dans une fonction anonyme à invocation automatique, puis lui transmettre jQuery.
var j = jQuery.noConflict (); // Maintenant, au lieu de $, nous utilisons j. j ('# someDiv'). hide (); // La ligne ci-dessous fera référence à la fonction $ d'une autre bibliothèque. $ ('someDiv'). style.display = 'none'; Soyez prudent avec cette méthode et essayez de ne pas l'utiliser lors de la distribution de votre code. Cela dérouterait vraiment l'utilisateur de votre script! :)
(function ($) // Dans cette fonction, $ fera toujours référence à jQuery) (jQuery);
Les pentes finales au bas appellent la fonction automatiquement - une fonction()(). Cependant, lorsque nous appelons la fonction, nous passons également jQuery, qui est alors représenté par $.
Prêt Méthode jQuery (document) .ready (function ($) // $ fait référence à jQuery); // $ n'est pas défini ou fait référence à la fonction d'une autre bibliothèque.
Rappelez-vous - jQuery est juste JavaScript. Ne présumez pas qu'il a la capacité de compenser votre mauvais codage. :)
Cela signifie que, tout comme il faut optimiser des choses telles que JavaScript pour déclarations, la même chose est vraie pour jQuery chaque méthode. Et pourquoi pas nous? C'est juste une méthode d'assistance, qui crée ensuite un pour déclaration en coulisse.
// chaque méthode de jQuery est source: function (objet, callback, args) nom var, i = 0, longueur = longueur.objet, isObj = longueur === non défini || jQuery.isFunction (objet); if (args) if (isObj) pour (nom dans objet) if (callback.apply (objet [nom], args) === false) break; else pour (; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; // A special, fast, case for the most common use of each else if ( isObj ) for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) return object;
someDivs.each (function () $ ('# autreDiv') [0] .innerHTML + = $ (this) .text ();); un autreDiv pour chaque itération var someDivs = $ ('# conteneur'). find ('. someDivs'), contents = []; someDivs.each (function () contents.push (this.innerHTML);); $ ('# anotherDiv'). html (contents.join (")); De cette façon, dans les chaque (for), la seule tâche que nous effectuons consiste à ajouter une nouvelle clé à un tableau… par opposition à interroger le DOM, récupérer le innerHTML propriété de l'élément deux fois, etc..
Cette astuce est plus généralement basée sur JavaScript, plutôt que sur jQuery. Le but est de se rappeler que jQuery ne compense pas un mauvais codage.
Pendant que nous y sommes, une autre option pour ce genre de situation consiste à utiliser des fragments de document..
var someUls = $ ('# conteneur'). find ('. someUls'), frag = document.createDocumentFragment (), li; someUls.each (function () li = document.createElement ('li'); li.appendChild (document.createTextNode (this.innerHTML)); frag.appendChild (li);); $ ('# anotherUl') [0] .appendChild (frag); La clé ici est qu’il existe de nombreuses façons d’accomplir des tâches simples comme celle-ci, et que chacune d’elles présente des avantages en termes de performances d’un navigateur à l’autre. Plus vous collerez à jQuery et apprendrez JavaScript, plus vous constaterez que vous vous référez plus souvent aux propriétés et méthodes natives de JavaScript. Et si oui, c'est fantastique!
jQuery fournit un niveau d'abstraction incroyable dont vous devriez tirer parti, mais cela ne signifie pas que vous soyez obligé d'utiliser ses méthodes. Par exemple, dans l'exemple de fragment ci-dessus, nous utilisons jQuery chaque méthode. Si vous préférez utiliser un pour ou tandis que déclaration à la place, ça va aussi!
Cela dit, gardez à l'esprit que l'équipe de jQuery a fortement optimisé cette bibliothèque. Les débats sur jQuery
chaque()vs l'indigènepourdéclaration sont stupides et triviales. Si vous utilisez jQuery dans votre projet, gagnez du temps et utilisez leurs méthodes d'assistance. C'est pour ça qu'ils sont là! :)
Si vous commencez à peine à vous plonger dans jQuery, les différentes méthodes AJAX mises à notre disposition peuvent paraître décourageantes. bien qu'ils n'aient pas besoin. En fait, la plupart d’entre elles sont simplement des méthodes d’aide, qui se dirigent directement vers $ .ajax.
Par exemple, passons en revue getJSON, ce qui nous permet de récupérer JSON.
$ .getJSON ('chemin / vers / json', fonction (résultats) // callback // résultats contient l'objet de données renvoyé); Dans les coulisses, cette méthode appelle d'abord $ .get.
getJSON: fonction (url, données, rappel) return jQuery.get (url, données, rappel, "json");
$ .get puis compile les données transmises et, encore une fois, appelle le "maître" (de sorte) $ .ajax méthode.
get: function (url, data, callback, type) // décale les arguments si l'argument data a été omis if (jQuery.isFunction (data)) type = type || rappeler; callback = data; data = null; return jQuery.ajax (type: "GET", url: url, données: data, succès: rappel, dataType: type);
finalement, $ .ajax effectue une quantité énorme de travail pour nous permettre de faire des requêtes asynchrones avec succès sur tous les navigateurs!
Qu'est-ce que cela signifie est-ce que vous pouvez tout aussi bien utiliser le
$ .ajaxméthode directement et exclusivement pour toutes vos demandes AJAX. Les autres méthodes sont simplement des méthodes d'assistance qui finissent par le faire. Alors, si tu veux, coupe l'homme du milieu. Ce n'est pas un problème important dans les deux cas.
$ .getJSON ('chemin / vers / json', fonction (résultats) // callback // résultats contient l'objet de données renvoyé); $ .ajax (type: 'GET', url: 'chemin / vers / json', données: yourData, type de données: 'json', succès: fonction (résultats) console.log ('succès');) ) Vous avez donc appris un peu de JavaScript et appris que, par exemple, sur les balises d'ancrage, vous pouvez accéder directement aux valeurs d'attribut:
var anchor = document.getElementById ('someAnchor'); //anchor.id // anchor.href // anchor.title // .etc Le seul problème est que cela ne semble pas fonctionner lorsque vous référencez les éléments DOM avec jQuery, n'est-ce pas? Bien sûr pas.
// Echec de var id = $ ('# someAnchor'). Id; Donc, si vous avez besoin d'accéder à la href attribut (ou toute autre propriété ou méthode native pour cette question), vous avez une poignée d'options.
// OPTION 1 - Utiliser jQuery var id = $ ('# someAnchor'). Attr ('id'); // OPTION 2 - Accéder à l'élément DOM var id = $ ('# someAnchor') [0] .id; // OPTION 3 - Utilise la méthode get de jQuery var id = $ ('# someAnchor'). Get (0) .id; // OPTION 3b - Ne passez pas un index pour obtenir anchorsArray = $ ('. SomeAnchors'). Get (); var thirdId = anchorsArray [2] .id; le
obtenirCette méthode est particulièrement utile car elle peut traduire votre collection jQuery dans un tableau..
Certes, pour la grande majorité de nos projets, nous ne pouvons pas seulement comptez sur JavaScript pour des tâches telles que la validation ou les requêtes AJAX. Que se passe-t-il lorsque JavaScript est désactivé? Pour cette raison même, une technique courante consiste à détecter si une requête AJAX a été effectuée avec le langage de votre choix côté serveur..
jQuery rend cela ridiculement simple, en définissant un en-tête depuis le $ .ajax méthode.
// Définit l'en-tête pour que le script appelé sache qu'il s'agit d'un XMLHttpRequest // N'envoie l'en-tête que s'il ne s'agit pas d'un XHR distant si (! Remote) xhr.setRequestHeader ("X-Requested-With", "XMLHttpRequest"); Avec cet en-tête défini, nous pouvons maintenant utiliser PHP (ou tout autre langage) pour vérifier cet en-tête et procéder en conséquence. Pour cela, nous vérifions la valeur de $ _SERVER ['HTTP_X_REQUESTED_WITH'].
function isXhr () return $ _SERVER ['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
Jamais demandé pourquoi / comment vous pouvez utiliser jQuery et $ de manière interchangeable? Pour trouver votre réponse, affichez la source jQuery et allez tout en bas. Là, vous verrez:
window.jQuery = window. $ = jQuery;
Bien entendu, l'intégralité du script jQuery est encapsulée dans une fonction à exécution automatique, qui lui permet de limiter autant que possible le nombre de variables globales. Cela signifie également que l'objet jQuery n'est pas disponible en dehors de la fonction de wrapping anonyme.
Pour résoudre ce problème, jQuery est exposé à la la fenêtre objet, et, dans le processus, un alias - $ - est également créé.
HTML5 Boilerplate offre une astuce one-liner qui chargera une copie locale de jQuery si, pour une raison quelconque, votre CDN choisi est arrêté..
Pour "exprimer" le code ci-dessus: si window.jQuery n'est pas défini, un problème de téléchargement du script à partir du CDN a probablement dû se produire. Dans ce cas, procédez du côté droit de la && opérateur et insérez un script lié à une version locale de jQuery.
Membres Premium: Téléchargez cette vidéo (Vous devez être connecté)
Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!
Remarque:
jQuery.expr [':']est simplement un alias pourjQuery.expr.filters.
À partir de jQuery 1.4, nous ne pouvons maintenant transmettre qu’une seule fonction à la flotter méthode. Avant, les deux dans et en dehors les méthodes étaient nécessaires.
$ ('# someElement'). hover (function () // mouseover, function () // mouseout); $ ('# someElement'). hover (function () // la méthode toggle () peut être utilisée ici, le cas échéant); Notez que ce n'est pas un vieux vs new deal. Plusieurs fois, vous aurez toujours besoin de passer deux fonctions à flotter, et c'est parfaitement acceptable. Cependant, si vous avez seulement besoin de basculer entre certains éléments (ou quelque chose comme ça), passer une seule fonction anonyme sauvera une poignée de caractères ou plus.!
A partir de jQuery 1.4, nous pouvons maintenant passer un objet en tant que second paramètre de la fonction jQuery. Ceci est utile lorsque nous devons insérer de nouveaux éléments dans le DOM. Par exemple:
$ ('') .attr (id: 'someId', className: 'someClass', href: 'somePath.html'); $ ('', id: 'someId', className: 'someClass', href: 'somePath.html'); Non seulement cela sauve quelques caractères, mais cela permet également un code plus propre. En plus des attributs d'élément, nous pouvons même transmettre des attributs et des événements spécifiques à jQuery, tels que Cliquez sur ou texte.
