jQuery Style Rules

kostis90gr — Thu, 12 Jun 2008 21:57:13 +0000

In Excalibur Phoenix a really powerful JavaScript library is used, jQuery. It allows developers to create JavaScript code fast, using only a few lines, and also offers a great variety of features that make coding life easier. jQuery code, though, doesn’t have many similarities with regular JavaScript DOM code. This post contains a few suggestions about how Kamibu developers should write jQuery code. Before you start reading this post, please take a quick look on this
article, since those style rules should be also applied whenever possible.

1) jQuery allows developers to execute more than one jQuery class methods using a technique called method chaining. Method Chaining should be used to the maximum by Kamibu developers.

Do not use this:

$( "div.newcomment" ).clone( true );
$( "div.newcomment" ).css( "opacity", 0 ).removeClass( "newcomment" );

Use this instead:

$( "div.newcomment" ).clone( true ).css( "opacity", 0 ).removeClass( "newcomment" );

The first example is not as fast as the second, since two DOM searches are performed.

2) Sometimes, however, chaining makes the code complex and difficult to read, especially when find() is used a lot of times. Therefore, when end() is used, the developer should change a line exactly after it.

Do not use this:

$( "div.comments" ).find( "span.time" ).text( "πριν λίγο" ).end().find( "div.text" ).empty().append( document.createTextNode( texter ) ).end();

Use this instead:

$( "div.comments" ).find( "span.time" ).text( "πριν λίγο" ).end()
.find( "div.text" ).empty().append( document.createTextNode( texter ) ).end();

3) This new JavaScript library provides a lot of ways to select a DOM node, apart from getElementById and getElementsByTagName. You should always use jQuery selectors, before trying to find another way to select the node you want.

Do not use this:

var node = $( "div.comments" ).get( 0 );
node = node.childNodes[ node.childNodes.length-1 ];

Use this instead:

var node = $( "div.comments:last-child" ).get( 0 );

And do not use this:

var node = $( "div.comments" ).eq( 0 );

Use this instead:

var node = $( "div.comments:first" );

4) Even though selectors could become really long, do not break them into parts, unless you have a good reason to do so.

Do not use this:

$( "#dilution div.comments div.text" ).find( "div div:last-child" );

Use this instead:

$( "#dilution div.comments div.text div div:last-child" );

5) When you want to create a node and append it to an element do not use jQuery’s append method using a string as an argument. Firstly, create the element you want using DOM JavaScript, and then append it to the node you want. This solution should be preffered since it is more object-oriented. Use jQuery’s append( “string” ) only when you would use innerHTML in normal DOM

Do not use this:

$( "div.bottom" ).append( "Click Me" );

Use this instead:

var a = document.createElement( 'a' );
a.href = "http://www.zino.gr";
a.appendChild( document.createTextNode( 'Click Me' ) );
$( "div.bottom" ).append( a );

6) Always try to use jQuery’s characteristics as much as you can, before you try to find another “manual” way. A characteristic example is jQuery’s toggleClass method.

7) Always prefer jQuery’s events except for the following situations.
7.1 When a DOM element that will be appended is going to be bound to an event.
7.2 When an argument from backend is going to be used.
You should use this:


				$foo = 5;
			?>"function() { alert(  );return false;" >Test

7.3 When an event that was not bounded by jQuery is going to be replaced.
Do not use this:

var a = document.createElement( 'a' );
		a.onclick = function() { 
			alert( 'lolek' ); 
		};
		$(a).click( function() { alert( 'bolek' ); } );

Use this instead:

var a = document.createElement( 'a' );
		a.onclick = function() { 
			alert( 'lolek' ); 
		};
		a.onclick = function() {
			alert( 'bolek' );
		};

Notice: Keep in mind that jQuery supports multiple events. The first example, will just add another function to be executed when a is clicked. So two alerts will pop up (lolek,bolek). Moreover, the unbind method cannot be used since the first event was not bounded using jQuery.

8 ) Use fadeIn, fadeOut, fadeTo, show, hide methods, instead of the more general animate method, whenever possible.

Do not use this:

$( 'chiki' ).animate( { opacity : 0 }, 400 );

Use this instead:

$( 'chiki' ).fadeOut( 400 );

9) Prefer jQuery’s methods instead of the body’s onload event.

Do not use this:

"alert( 'done' );">

Use this instead:

$(document).ready(function(){
		alert( 'done' );
	} );

Moreover,
Do not use this:

$(function() {
		alert( 'done' );
	} );

Use this instead:

$(document).ready(function(){
		alert( 'done' );
	} );

Notice: Use “jQuery(function($) {” format only when absolutely necessary

10) Always prefer $( ‘something’ ) instead of jQuery( ‘something’ ), unless a compatibility issue emerges.

11) Kamibu Specific:
11.1 Use jQuery’s effects instead of the objects of animation.js
Do not use this:

Animations.Create( document.getElementById( 'fire' ) , 'opacity' , 2000 , 1 , 0.3 );

Use this instead:

$( '#fire' ).css( 'opacity', 1 ).fadeTo( 2000, 0.3 );

11.2 Prefer Coala instead of jQuery.ajax

Kamibu » style

jQuery Style Rules