Diese Fallstricke von JQuery, JQuery-Fallstrickindex-Ranking

1 Wahllose Verwendung von Selektoren

Täuschungsindex: 200

JQuerySelektoraufrufe sind sehr teuer und wiederholte Aufrufe weniger effizient. Es sollte die Methode des CachingObjekts oder die Methode der verketteten Aufrufe verwendet werden.

//错误的写法
$("#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 Globale Auswahl ist ineffizient

Handelsindex: 100

Verwenden Sie so weit wie möglich die Kontextsuche, um die Verwendung einer globalen Auswahl zu vermeiden . Der globale Selektor durchsucht das gesamte Dokument, was sehr ineffizient ist.

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

3 Kopieren Anonyme Funktion

Handelsindex: 50

Vermeiden Sie das mehrfache Kopieren anonymer Funktionen, trennen Sie die anonyme Funktion, sodass sie mehrmals von anderen Objekten aufgerufen werden kann.

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

4 Missbrauch von Ajax’s Complete

Täuschungsindex: 30

Wenn Sie Ajax für Datenanfragen verwenden, vermeiden Sie die Verwendung der Complete-Callback-Methode. Verwenden Sie stattdessen die Erfolgsmethode. Der vollständige Rückruf wird unabhängig davon ausgelöst, ob die Anforderung erfolgreich ist oder fehlschlägt.

//错误的写法
$.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 Missbrauch von Kettenaufrufen

Cheat-Index: 20

Die Verwendung von Kettenaufrufen führt dazu, dass sich der Gradient des Objekts ändert. Es wird entfernt Bevor die Methode abgeschlossen ist, wird die Remove-Methode aufgerufen, bevor die FadeOut-Methode abgeschlossen ist. Wenn Sie die zweite Methode ausführen müssen, nachdem die erste Methode abgeschlossen ist, verwenden Sie bitte Callback, die zweite Methode.

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

6 EreignisMehrere Bindungen

Cheat-Index: 20

Wenn Sie dasselbe Ereignis binden (binden). mehrmals wird die Antwort mehrmals ausgeführt. Um mehrere Ausführungen zu vermeiden, lösen Sie bitte zuerst die Bindung des Ereignisses und binden Sie es dann erneut.

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

7 Falsche Verwendung dieses Indikators

Täuschungsindex: 10

Dieser Indikator existiert in einem bestimmten Kontext, wenn dies auf a anderes Objekt, wenn sich der Kontext ändert. Wenn Sie dies weiterhin im Originalkontext aufrufen möchten, müssen Sie das ursprüngliche This-Objekt im Originalkontext zwischenspeichern ($that = $(this)).

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

Das obige ist der detaillierte Inhalt vonDiese Fallstricke von JQuery, JQuery-Fallstrickindex-Ranking. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!