JQuery Development Standards

Question

I'm looking into development standards fro JavaScript. I had previously used Doulgas Crockfords Javascript standards and JsLint . However now I'm making more use of JQuery I'm looking for something that is more Jquery oriented as well.

Ideally a sensible checklist and an automated tool to validate. However realistically just a set of sensible guidelines would be a good starting point

Answer 1

Some suggestions:

Don't rely on "$" being the jQuery object

Either use 'jQuery' or wrap like this:

(function($) {
  // your code
})(jQuery);

Pass 'options' objects to your functions

Like jQuery's APIs themselves. Important when you have more than 2 or 3 parameters.

// define
function myFunc(options) {
  alert(options.foo);
  alert(options.bar);
}

// call
myFunc({
  foo: 1,
  bar: "xxx"
});

Unit-test your code

For example with QUnit

Answer 2

I'll add to this as I think of them, but here's a few off the top of my head:

• prepend jQuery object variables with a $, for example: var $doc_list = $('.documents'); this will help prevent you getting confused trying to remember if you're currently holding an id string, an element or a jQuery object in that variable.
• Use the UI css framework. A great tutorial on getting started with it is here.
• Take a read through the plugins authoring documentation

Answer 3

Specify a context:

$('p > a', '#content'); // The 2nd argument is the context

Tab your chains!

// BAD
$('a').css('fontSize', '12px').addClass('link').bind('click', clickHandler).find('span').removeClass('inner');

// BETTER
$('a')
    .css('fontSize', '12px')
    .addClass('link')
    .bind('click', clickHandler)
    .find('span')
        .removeClass('inner');

Don't have massive HTML strings:

// BAD
$('<img id="something" src="path/img.jpg" height="300" width="300" />');

// BETTER
$('<img/>').attr({
    id: 'something',
    src: 'path/img.jpg',
    height: 300,
    width: 300
});

Answer 4

cache you objects :

$('#id').show();

...

$('#id').remove();

better :

var $block = $('#id');
$('#id').remove();

Don't manipulate too much the DOM :

for (var i=0; i<=5000; i++) 
{
   $('<div></div>').appendTo('body');
}

better :

var $wrapper= $('<div></div>');
for (var i=0; i<=5000; i++) 
{
   $('<div></div>').appendTo($wrapper);
}

$wrapper.appendTo('body');

(better solution : do not create objects in the loop but a long string then use $('body').html(string);

Use custom events and bind them to dom elements :

var $myDiv = $('<div></div>').bind('contentUpdate', function() { // hello! });

...

$myDiv.trigger('contentUpdate');

...

$myDiv.remove();

=> all event observers removed, mem is free ! :)

Learn .end(); :

var $myDiv = $('#id');

myDiv
.find('.className')
.show();

myDiv.css('top', 0);

better :

myDiv
.find('.className')
.show()
.end() // go back to myDiv !
.css('top', 0);

**Use jQuery document ready wrapper : (+$ obfuscator) **

(function($){

// $ is protected

jQuery(function(){

// all code here will be executed at DOM ready

}

})(jQuery);

etc

HF