Ineffizienter jQuery-Code

Ich schaue recht gerne in den JS-Code anderer. Hierbei fällt einem neben der Tatsache, dass saubere Organisation von JS selten vorkommt, vor allem die ineffiziente Verwendung von jQuery auf. Hier einige dieser Anti-Patterns:

Ineffiziente CSS-Selektoren:

Beispiel:

$('.nav li a')

Besseres Beispiel:

$('ul.nav a')

Ineffizientes Chaining:

$('#foo').attr('bar', 'baz').attr('bomber', 'boom').addClass('test').addClass('test2');

Besseres Beispiel:

$('#foo') .attr({ bar: 'baz', bomber: 'boom' }) .addClass('test test2');

X-fache Erstellung von jQuery-Objektinstanzen identischen Inhalts (Kein Chaining/Kein “Zwischenspeichern”):

Beispiel:

{ init: function() { $('#foo').addClass('bar'); $('#foo').attr('title', 'hello'); $('#foo').click(myobject.onClick); }, doSomething: function() { $('#foo').attr('title', 'hello again'); $('#foo li').mouseover(myobject.onOver); } };

Besseres Beispiel:

{ init: function() { myobject.myElement = $('#foo') .addClass('bar') .attr('title', 'hello') .click(myobject.onClick); }, doSomething: function() { myobject.myElement .attr('title', 'hello again'); $('li', myobject.myElement[0]) .mouseover(myobject.onOver); } };

Erstellung von Instanzen, die einen nicht interessieren:

Beispiel:

$('#foo').after('<a href="#" id="bar">tut was</a>'); $('#bar').click(tuWas);

Besseres Beispiel:

$('<a href="#" id="bar">tut was</a>') .insertAfter('#foo') .click(tuWas);

Anfordern von Informationen, die einen nicht Interessieren:

(seltenes) Beispiel:

if($('*').index('#foo') == -1){ //tu was }

Besseres Beispiel:

if(!$('#foo').length){ //tu was }