jQuery pièges à éviter

Question

Je suis en train de créer un projet avec jQuery.

Quels sont les pièges, les erreurs et les idées fausses/abus/le dévoiement avez-vous dans votre jQuery projet?

Answer 1

N'étant pas conscient de l'impact sur les performances et le gaspillage des 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 le chaînage:-

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

J'ai trouvé cette éclairant le moment où j'ai réalisé combien les piles d'appels de travail.

Edit: constituée des suggestions dans les commentaires.

Answer 2

Comprendre comment utiliser le contexte. Normalement, un sélecteur jQuery va chercher l'ensemble du doc:

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

Mais vous pouvez accélérer les choses en faisant une recherche dans un contexte:

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

Answer 3

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

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

Ce sera à la fin en regardant chaque élément pour voir si elle a une classe de "bouton".

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

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

J'ai appris de cette dernière année, à partir de Rebecca Murphy blog

Mise à jour - Cette réponse a été donnée il y a 2 ans et n'est pas correct pour l' actuelle version de jQuery. L'un des commentaires comprend un test pour le prouver. Il existe également une version mise à jour du test, qui comprend la version de jQuery au moment de cette réponse.

Answer 4

Essayez de séparer les fonctions anonymes, de sorte que vous pouvez les réutiliser.

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

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

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

Answer 5

Tout en utilisant $.ajax fonction pour Ajax demandes à un serveur, vous devez éviter d'utiliser l' complete événement pour traiter les données de réponse. Cela va déclencher si la demande a été acceptée ou non.

Plutôt que d' complete, utilisez success.

Voir Ajax Événements dans les docs.