jQuery pièges à éviter [fermé]

Comprendre comment utiliser le contexte. Normalement, un sélecteur jQuery recherchera le doc entier:

// This will search whole doc for elements with class myClass
$('.myClass');

mais vous pouvez accélérer les choses en cherchant dans un contexte:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

N'utilisez pas de sélecteurs de classe nus, comme ceci:

$('.button').click(function() { /* do something */ });

cela finira par regarder chaque élément pour voir si elle a une classe de"bouton".

à la place, vous pouvez l'aider, comme:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

j'ai appris cette dernière année de le blog de Rebecca Murphy

mise à jour - cette réponse a été donnée il y a plus de 2 ans et n'est pas correcte pour la version actuelle de jQuery. L'un des commentaires comprend un test pour le prouver. Il y a aussi une version mise à jour du test qui inclut la version de jQuery au moment de cette réponse.

essayer de séparer les fonctions anonymes afin que vous puissiez les réutiliser.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

• éviter d'abuser du document prêt.
• garder le document prêt pour initialiser le code seulement.
• toujours extraire les fonctions en dehors du doc prêt pour qu'elles puissent être réutilisées.

j'ai vu des centaines de lignes de code dans la déclaration doc ready. Laid, illisible et impossible à entretenir.

en utilisant la fonction $.ajax pour les requêtes Ajax au serveur, vous devez éviter d'utiliser l'événement complete pour traiter les données de réponse. Il tirera que la demande ait été acceptée ou non.

au lieu de complete , utilisez success .

Voir Ajax Événements dans les docs.

" enchaînement " Animation-événements avec Callbacks.

supposons que vous vouliez animer un paragraphe qui disparaît en Le cliquant. Vous vouliez aussi retirer l'élément du DOM par la suite. Vous pouvez penser que vous pouvez simplement enchaîner les méthodes:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

Dans cet exemple, .remove () sera appelé avant .fadeOut () a terminé, détruisant votre effet de décoloration graduelle, et faisant simplement disparaître l'élément instantanément. Au lieu de cela, quand vous voulez lancez une commande seulement après avoir terminé la précédente, utilisez la commande de rappel:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

le second paramètre de .fadeOut () est une fonction anonyme qui s'exécute une fois le .l'animation de fadeOut () est terminée. Cela entraîne une décoloration graduelle, suivie d'une suppression de l'élément.

N'abusez pas des plug-ins.

la plupart du temps, vous n'aurez besoin que de la bibliothèque et peut-être de l'interface utilisateur. Si vous restez simple, votre code sera maintenu à long terme. Tous les plug-ins ne sont pas pris en charge et entretenus, en fait la plupart ne le sont pas. Si vous pouvez imiter la fonctionnalité en utilisant des éléments de base, je le recommande fortement.

Plugins sont faciles à insérer dans votre code, vous faire économiser du temps, mais quand vous en aurez besoin un extra quelque chose, c'est une mauvaise idée de les modifier, comme vous perdez les mises à jour possibles. Le gain de temps au début, vous perdrez plus tard sur l'évolution des plugins obsolètes.

choisissez les plug-ins que vous utilisez à bon escient. En dehors de la bibliothèque et de l'interface utilisateur, j'utilise constamment $.cookie , $.formulaire , $.valider et thickbox . Pour le reste, j'ai surtout développer mes propres plugins.

si vous liez() le même événement plusieurs fois, il se déclenchera plusieurs fois . D'habitude je vais toujours unbind('click').bind('click') juste pour être sûr

Piège: à l'Aide de boucles au lieu de sélecteurs.

si vous cherchez le jQuery."chaque ' méthode pour itérer sur les éléments DOM, demandez-vous si peut utiliser un sélecteur pour obtenir les éléments à la place.

plus d'informations sur les sélecteurs jQuery:

http://docs.jquery.com/Selectors

Écueil à éviter: ne PAS utiliser un outil comme Firebug

Firebugg était pratiquement fait pour ce genre de débogage. Si vous allez vous balader dans le DOM avec Javascript, vous avez besoin d'un bon outil comme Firebug pour vous donner de la visibilité.

plus d'informations sur Firebug: http://getfirebug.com/

D'autres grandes idées sont dans cet épisode du Podcast polymorphique: (jQuery Secrets avec Dave Ward) http://polymorphicpodcast.com/shows/jquery/

malentendu quant à l'utilisation de cet identificateur dans le bon contexte. Par exemple:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

et voici un des échantillons comment vous pouvez le résoudre:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

éviter de chercher dans le DOM entier plusieurs fois. C'est quelque chose qui peut vraiment retarder votre script.

Mauvais:

$(".aclass").this();
$(".aclass").that();
...

Bonne:

$(".aclass").this().that();

Mauvais:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

Bonne:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

cache toujours $(ceci) vers une variable significative surtout dans une .chaque ()

comme ceci

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

semblable à ce que Repo Man a dit, mais pas tout à fait.

lors du développement ASP.NET winforms, I often do

$('<%= Label1.ClientID %>');

oubliant le signe#. Le bon formulaire est

$('#<%= Label1.ClientID %>');

Événements

$("selector").html($("another-selector").html());

ne clone aucun des événements - vous devez tous les rebrousser chemin.

Comme par JP est commen t - clone() ne relier les événements si vous passez true.

éviter la création multiple des mêmes objets jQuery

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

je dis cela aussi pour JavaScript, mais jQuery, JavaScript ne devrait jamais remplacer CSS.

Aussi, assurez-vous que le site est utilisable pour quelqu'un avec le JavaScript désactivé (pas aussi pertinent aujourd'hui qu'à l'époque, mais toujours agréable pour disposer d'un site utilisable).

Faire trop de manipulations DOM. Alors que l' .HTML. ,)(annexer. ,)(prepend (), etc. les méthodes sont excellentes, en raison de la façon dont les navigateurs rendent et re-rendent les pages, les utiliser trop souvent causera des ralentissements. Il est souvent préférable de créer le html sous forme de chaîne, et de l'inclure dans le DOM une fois, plutôt que de changer le DOM plusieurs fois.

au lieu de:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

essayez ceci:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

ou même ceci ($wrapper est un élément nouvellement créé qui n'a pas encore été injecté dans le DOM. Ajouter des noeuds à ce div wrapper ne provoque pas de ralentissement, et à la fin nous ajoutons $wrapper à $parent, en utilisant une seule manipulation DOM):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

utilisant ClientID pour obtenir le" vrai " id du contrôle en ASP.NET projets.

jQuery('#<%=myLabel.ClientID%>');

aussi, si vous utilisez jQuery inside SharePoint vous devez appeler jQuery.noConflict ().

passer des ID au lieu d'objets jQuery à des fonctions:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

passer un ensemble enveloppé est beaucoup plus flexible:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

usage excessif de l'enchaînement.

voir ceci:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

explication

utiliser des cordes de style accumulateur

en utilisant + opérateur une nouvelle chaîne est créée en mémoire et la valeur concaténée lui est assignée. Seulement après cela, le résultat est affecté à une variable. Pour éviter la variable intermédiaire pour le résultat de concaténation, vous pouvez affecter directement le résultat en utilisant += opérateur. Lent:

a += 'x' + 'y';

plus rapide:

a += 'x';
a += 'y';

opérations Primitives peuvent être plus rapides que les appels de fonction

envisager l'utilisation d'une opération primitive alternative par rapport aux appels de fonction dans les boucles et les fonctions critiques de performance. Lent:

var min = Math.min(a, b);
arr.push(val);

plus rapide:

var min = a < b ? a : b;
arr[arr.length] = val;

plus d'informations à meilleures pratiques de Performance JavaScript

si vous voulez que les utilisateurs voient des entités html dans leur navigateur, utilisez "html" au lieu de "texte" pour injecter une chaîne Unicode, comme:

$('p').html("Your Unicode string")

mes deux cents)

habituellement, travailler avec jquery signifie que vous n'avez pas à vous soucier des éléments DOM réels tout le temps. Vous pouvez écrire quelque chose comme ceci - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - et ce code s'exécutera sans lancer d'erreurs.

Dans certains cas, il est utile, dans certains cas - pas du tout, mais c'est un fait que jquery tendance à être, bien, vide-matches amicaux. Pourtant, replaceWith lève une erreur si on tente de l'utiliser avec un élément qui ne font pas partie du document. Je trouve cela plutôt contre-intuitif.

un autre piège est, à mon avis, l'ordre des noeuds retournés par la méthode prevAll () - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll() . Pas un gros problème, en fait, mais nous devons garder à l'esprit ce fait.

si vous prévoyez D'Ajax dans beaucoup de données, comme par exemple, 1500 lignes d'une table avec 20 colonnes, alors ne pensez même pas à utiliser jQuery pour insérer ces données dans votre HTML. Utilisez le JavaScript simple. jQuery sera trop lent sur les machines plus lentes.

aussi, la moitié du temps jQuery va faire des choses qui vont le ralentir, comme essayer de parser les balises de script dans le HTML entrant, et traiter avec les bizarreries du navigateur. Si vous voulez une vitesse d'insertion rapide, utilisez le JavaScript simple.

utilisant jQuery dans un petit projet qui peut être complété avec seulement quelques lignes de JavaScript ordinaire.

ne comprend pas la liaison d'événement. JavaScript et jQuery fonctionnent différemment.

par demande populaire, un exemple:

En jQuery:

$("#someLink").click(function(){//do something});

sans jQuery:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

fondamentalement, les crochets requis pour JavaScript ne sont plus nécessaires. C'est-à-dire: utilisez le markup inline (onClick, etc) parce que vous pouvez simplement utiliser les ID et les classes qu'un développeur utiliserait normalement pour les besoins du CSS.