Pièges jQuery à éviter [fermé]

Je démarre un projet avec jQuery.

Quels pièges / erreurs / idées fausses / abus / abus avez-vous eu dans votre projet jQuery?

Ignorer les performances atteintes et sur-utiliser les sélecteurs au lieu de les affecter à des variables locales. Par exemple:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

Plutôt que:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

Ou encore mieux avec enchaînement : -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

J'ai trouvé cela le moment instructif quand j'ai réalisé comment les piles d'appels fonctionnent.

Edit: incorporé des suggestions dans les commentaires.

Comprenez comment utiliser le contexte. Normalement, un sélecteur jQuery recherchera tout le document:

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

Mais vous pouvez accélérer les choses en recherchant 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 s'il a une classe de "bouton".

Au lieu de cela, vous pouvez l'aider, comme:

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

J'ai appris cela l'année dernière sur 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 existe également une version mise à jour du test qui inclut la version de jQuery au moment de cette réponse.

Essayez de diviser les fonctions anonymes afin de pouvoir les réutiliser.

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

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

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

• Évitez d'abuser du document prêt.
• Gardez le document prêt pour initialiser le code uniquement.
• Extrayez toujours les fonctions en dehors du document prêt afin qu'elles puissent être réutilisées.

J'ai vu des centaines de lignes de code à l'intérieur de l'instruction doc ready. Moche, illisible et impossible à entretenir.

Lors de l'utilisation de la $.ajaxfonction pour les demandes Ajax au serveur, vous devez éviter d'utiliser l' completeévénement pour traiter les données de réponse. Il se déclenchera si la demande a réussi ou non.

Plutôt que d' completeutiliser success.

Voir les événements Ajax dans la documentation.

"Chaînage" d'événements d'animation avec rappels.

Supposons que vous vouliez animer un paragraphe disparaissant en cliquant dessus. Vous vouliez également supprimer 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 la fin de .fadeOut (), détruisant votre effet de fondu progressif et faisant simplement disparaître l'élément instantanément. Au lieu de cela, lorsque vous souhaitez lancer une commande uniquement après avoir terminé la précédente, utilisez le rappel:

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

Le deuxième paramètre de .fadeOut () est une fonction anonyme qui s'exécutera une fois l'animation .fadeOut () terminée. Cela se traduit par une décoloration progressive et une suppression ultérieure de l'élément.

Si vous liez () le même événement plusieurs fois, il se déclenchera plusieurs fois. Je vais d'habitude toujours unbind('click').bind('click')juste pour être en sécurité

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 maintenable à long terme. Tous les plug-ins ne sont pas pris en charge et maintenus, 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.

Les plug-ins sont faciles à insérer dans votre code, vous font gagner du temps, mais lorsque vous aurez besoin de quelque chose en plus, ce n'est pas une bonne idée de les modifier, car vous perdez les mises à jour possibles. Le temps que vous économisez au début vous perdra plus tard lors de la modification des plug-ins obsolètes.

Choisissez judicieusement les plug-ins que vous utilisez. Outre la bibliothèque et l'interface utilisateur, j'utilise constamment $ .cookie , $ .form , $ .validate et thickbox . Pour le reste, je développe principalement mes propres plug-ins.

Piège: utiliser des boucles au lieu de sélecteurs.

Si vous vous retrouvez à utiliser la méthode jQuery '.each' pour parcourir les éléments DOM, demandez-vous si vous pouvez utiliser un sélecteur pour obtenir les éléments à la place.

Plus d'informations sur les sélecteurs jQuery:
http://docs.jquery.com/Selectors

Piège: NE PAS utiliser un outil comme Firebug

Firebug a été pratiquement conçu pour ce type de débogage. Si vous allez fouiner 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 bonnes idées sont dans cet épisode du podcast polymorphe: (jQuery Secrets avec Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Mauvaise compréhension de l'utilisation de cet identifiant 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 l'un des exemples de la façon dont 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.
   })
});

Évitez de rechercher plusieurs fois dans l'ensemble du DOM. C'est quelque chose qui peut vraiment retarder votre script.

Mauvais:

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

Bien:

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

Mauvais:

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

Bien:

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

Mettez toujours $ (this) en cache dans une variable significative, en particulier dans un .each ()

Comme ça

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

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

Lors du développement de winforms ASP.NET, je le fais souvent

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

en oubliant le signe #. La forme correcte est

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

Événements

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

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

Selon le commentaire de JP - clone () lie les événements si vous passez vrai.

Évitez 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 pour JavaScript également, mais jQuery, JavaScript ne doit JAMAIS remplacer CSS.

Assurez-vous également que le site est utilisable pour quelqu'un avec JavaScript désactivé (pas aussi pertinent aujourd'hui que dans le passé, mais toujours agréable d'avoir un site entièrement utilisable).

Faire trop de manipulations DOM. Bien que les méthodes .html (), .append (), .prepend (), etc. soient excellentes, en raison de la façon dont les navigateurs effectuent le rendu et le rendu des pages, leur utilisation trop fréquente entraînera des ralentissements. Il est souvent préférable de créer le html sous forme de chaîne et de l'inclure une fois dans le DOM, plutôt que de le changer 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);
}

Essaye ça:

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. L'ajout de nœuds à cette div wrapper ne provoque pas de ralentissements, 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);

Utilisation de ClientID pour obtenir l'ID "réel" du contrôle dans les projets ASP.NET.

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

De plus, si vous utilisez jQuery dans SharePoint, vous devez appeler jQuery.noConflict ().

Passer des ID au lieu d'objets jQuery aux 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.

Utilisation excessive du chaînage.

Regarde ça:

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

Explication

Utilisez des chaînes de style accumulateur

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

a += 'x' + 'y';

Plus rapide:

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

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

Envisagez d'utiliser un fonctionnement primitif alternatif par rapport aux appels de fonction dans les boucles et fonctions critiques pour les performances. Lent:

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

Plus rapide:

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

Lire la suite sur les meilleures pratiques de performance JavaScript

Si vous souhaitez que les utilisateurs voient les 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 centimes)

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 ça -$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - et ce code s'exécutera sans lancer d'erreurs.

Dans certains cas, cela est utile, dans certains cas - pas du tout, mais c'est un fait que jquery a tendance à être, bien, compatible avec les correspondances vides. Encore,replaceWith jettera une erreur si l'on essaie de l'utiliser avec un élément qui n'appartient pas au document. Je le trouve plutôt contre-intuitif.

Un autre écueil est, à mon avis, l'ordre des nœuds 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(). Ce n'est pas grave, en fait, mais nous devons garder à l'esprit ce fait.

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

De plus, la moitié du temps, jQuery fera des choses qui le ralentiront, comme essayer d'analyser les balises de script dans le code HTML entrant et de gérer les bizarreries du navigateur. Si vous voulez une vitesse d'insertion rapide, restez avec du JavaScript simple.

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

Ne pas comprendre la liaison d'événement. JavaScript et jQuery fonctionnent différemment.

À la demande générale, un exemple:

Dans 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 utiliser le balisage en ligne (onClick, etc.) parce que vous pouvez simplement utiliser les ID et les classes qu'un développeur exploiterait normalement à des fins CSS.