Wie kann jQuery nicht überbeansprucht werden?

Question

Typische jQuery Übernutzung:

$('button').click(function() { 
    alert('Button clicked: ' + this.id); 
}); 

Welche Art und Weise schneller ist:

$('button').click(function() { 
    alert('Button clicked: ' + $(this).attr('id')); 
}); 

Welche werden vereinfacht.

Können Sie mir weitere Beispiele für ähnliche jQuery-Überbenutzung geben?

Answer 1

IMHO, sind diese Dinge nicht zu kümmern.

Die $ -Funktion ist unglaublich schnell und garantiert Cross-Browser-Probleme werden kein Problem sein. Zum Beispiel, das könnte jetzt gut funktionieren, aber was passiert, wenn IE9 herauskommt und es bricht? Wenn Sie die $ -Funktion überall verwenden, wird sie durch eine Korrektur an einem Ort überall behoben. Ganz zu schweigen davon, dass ich mir keinen Fall vorstellen kann, in dem dies zu einer Leistungssteigerung führen würde.

Wenn Sie also keine Probleme mit der Leistung haben, machen Sie sich keine Sorgen über Mikrooptimierungen. jQuery 1.4 hatte einige große Leistungssteigerungen wie auch immer, es sei denn, Sie tun:

$('p>a:first-child+input[type=text]~span'); 

überall ohne Caching, Sie gehen zu keine Rückkehr auf Ihre Zeit Investition.

Answer 2

Der zweite Weg ist natürlich schneller, da es die ID-Eigenschaft direkt vom DOM-Objekt erhält, daher gibt es mindestens einen Funktionsaufruf weniger.

Das sagte, der Unterschied wäre sowieso nicht wahrnehmbar und nichts zu befürchten, und so werde ich wagen zu sagen, dass das erste Beispiel nicht ein Beispiel für eine Übernutzung ist.

Answer 3

Das Beispiel in der Frage ist IMO nicht zu verwenden, nicht wegen der Leistungsbedenken, sondern weil die einfache JavaScript-Version wesentlich besser lesbar ist.

ähnlich td.cellIndex und tr.rowIndex sind viel besser lesbar (wie auch schneller) als die üblicherweise gegebenen Hacks wie $(this).parent().children().index(this) und einfache Eigenschaften wie this.checked sind IMO besser als $(this).is(':checked').

Innerhalb von jQuery sollten Sie lieber jQuery-Wrapper-Methoden als die Versionen verwenden, die in Nicht-Standard-Selektoren eingebettet sind.

$('#thing .thing').last() 

kann schnell sein, weil die Wähler auf den schnellen Einbau-querySelectorAll Anruf auf modernen Browser übergeben werden.

$('#thing .thing:last') 

wird relativ langsam sein.

Achten Sie auch auf Selektor-String-slinging, die in der Regel eine schlechte Sache ist:

$('div.'+className) 

wird so bald brechen, wie ein Klassenname mit einem Punkt gibt es (oder verschiedene andere Interpunktion) darin. Vermeiden Sie eine Selektorzeichenfolge, wenn es eine zuverlässigere Testmethode gibt.

Answer 4

„Wir sollten etwa 97% der Zeit über kleine Effizienz, sagen vergessen: vorzeitige Optimierung ist die Wurzel aller Übel“

       -- Donald Knuth (probably) 

Aus anwendungstechnischer Sicht, ist es wahrscheinlich fällt in die 97%.

„Es gibt zwei Möglichkeiten, ein Software-Designs Konstruktion: Eine Möglichkeit ist, um es so einfach, dass es offensichtlich keine Mängel, und der andere Weg ist, um machen es so kompliziert, dass es keine offensichtlichen Mängel. Die erste Methode ist viel schwieriger. "

       -- C.A.R. Hoare 

Aus Komplexität Standpunkt, Einfachheit, Klarheit und Verständlichkeit sind gute Motivation.

Answer 5

jQuery Über-Verwendung?

Diese Mitteilung dieser Stelle nicht tun

$('.link').click(function(){ 
    $(this).attr("height", "99px"); 
    $(this).attr("width", "302px"); 
    $(this).css("left", "329px"); 
    $(this).attr("position", "absolute"); 
    ... 
}); 

tun

.my-class { 
    background:url("/images/bg.png") no-repeat scroll 0 0 transparent; 
    height:99px; 
    left:329px; 
    position:absolute; 
    top:419px; 
    width:302px; 
    } 

$('.link').click(function(){ 
     $(this).addClass('my-class'); 
    }); 

, wenn Sie absolut haben [nicht zu wissen, CSS ist keine gültige Ausrede]