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
}