Best practice

Innhold

Minimer endringer i DOM'en.

	// Good
	var messageBox = $('.messageBox');
	var message = '';

	for (i = 0; i < 100; i++) {
 		message += '

This is test message #' + i + '.

'; } messageBox.html(message); // Not so good var messageBox = $('.messageBox'); for (i=0; i < 100; i++) { messageBox.append('

This is test message #' + i + '.

'); }
Test case

Cache elementene dine

	console.time('test1'); 
	for (i = 0; i < 1000; i++) { 
   	 	$('p').css('color','#000000');
	} 
	console.timeEnd('test1'); 
	console.time('test2'); 
	var par = $('p');
	for (i = 0; i < 1000; i++) { 
   	 	par.css('color','#000000');
	} 
	console.timeEnd('test2'); 

Bruk context! Eller?

Context provides a means to limit the search within a specific node.

Er i default document for alle elementer.

Test case

Ikke (mis)bruk $(document).ready

Ikke bind alle funksjoner innenfor en document.ready. Alle funksjoner kjøres og låser nettleseren før bilder og f.eks. iframes lastes inn.

Document.ready skal kun brukes for init-kode.

Ala dette:
	var mylib = {
	article_page :
	{
		init : function()
		{
			// Article page specific jQuery functions.
		}
	},
	section_page :
	{
		init : function()
		{
			// Traffic light specific jQuery functions.
		}
	},
	section_specific_stuff :
	{
		init : function()
		{
			// Traffic light specific jQuery functions.
		}
	}
 }  

Og så på en artikkelside:

	mylib.article_page.init(); 

Og en mer seksjonsside med mer spesifikk funksjonalitet:

	mylib.section_page.init(); 
	mylib.section_specific_stuff.init(); 

$(window).load kan være bra for animasjoner - alt det visuelle - for det "låser" ikke nettleseren.