Ces pièges de JQuery, classement de l'index des pièges de JQuery

1 Utilisation aveugle des sélecteurs

Indice de tromperie : 200

JQueryLes appels de sélecteur sont très coûteux et les appels répétés sont moins efficaces. La méthode de mise en cacheobjet doit être utilisée ou la méthode des appels chaînés doit être utilisée.

//错误的写法
$("#button").click(function(){
    $('#list li').addClass('strong');
    $('#list li').css('color', 'red');
});
//正确的写法
$("#button").click(function(){
    $lis = $('#list li');
    $lis.addClass('strong');
    $lis.css('color', 'red');
});
//更好的写法
$("#button").click(function(){
    $('#list li').addClass('strong').css('color', 'red');
});

2 La sélection globale est inefficace

Indice de trading : 100

Utilisez autant que possible la recherche contextuelle pour éviter l'utilisation de la sélection globale . Le sélecteur global recherchera l'intégralité du document, ce qui est très inefficace.

//错误的写法
$(".active").method();
//正确的写法
var ul = $("#myList");
$(".active",ul).method();

3 Copier Fonction anonyme

Indice de trading : 50

Évitez de copier plusieurs fois les fonctions anonymes, séparez les fonction anonyme afin qu'elle puisse être appelée plusieurs fois par d'autres objets.

//错误的写法
$('#myp').click( function(){
   //一些操作
});
//正确的写法
function pClickFn (){
   //一些操作   
}
$('#myp').click( pClickFn );

4 Utilisation abusive de l'intégralité d'ajax

Indice de tromperie : 30

Lors de l'utilisation d'ajax pour les requêtes de données, évitez d'utiliser la méthode de rappel complète, utilisez plutôt la méthode du succès. Le rappel complet est déclenché, que la requête réussisse ou échoue.

//错误的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
    //一些操作  
});
//正确的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
    //一些操作  
});

5 Utilisation abusive des appels en chaîne

Indice de triche : 20

L'utilisation des appels en chaîne entraînera un changement de dégradé de l'objet Il est supprimé avant qu'il ne soit terminé, c'est-à-dire que la méthode Remove sera appelée avant que la méthode fadeOut ne soit terminée. Lorsque vous devez exécuter la deuxième méthode une fois la première méthode terminée, veuillez utiliser le rappel, qui est la deuxième méthode.

//错误的写法
$("#myp").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正确的写法
$("myp").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

6 ÉvénementLiaisons multiples

Indice de triche : 20

Si vous liez (liez) le même événement plusieurs fois, la réponse sera exécutée plusieurs fois. Pour éviter plusieurs exécutions, veuillez d'abord dissocier l'événement, puis le relier à nouveau.

//避免响应多次执行
$("myp").unbind("click").bind("click");

7 Mauvaise utilisation de cet indicateur

Indice de tromperie : 10

Cet indicateur existe dans un certain contexte Quand cela pointe vers un. objet différent lorsque le contexte change. Si vous souhaitez toujours appeler ceci dans le contexte d'origine, vous devez mettre en cache l'objet this d'origine dans le contexte d'origine ($that = $(this)).

//错误的写法
$( "#myList").click( function() {
   $(this).method(); 
   $("#myList li").each( function() {
      //this并不指向myList
      $(this).method2(); 
   })
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!