Best Practices for jQuery Developers

Following are some of the best practices that you could follow while working with jQuery:

• Plugins:
  • Please avoid unnecessary use of plugins
  • If a plugin is being used, respect the authors work and ensure that the plugin file is reused with the license comments intact
  • If you are writing a reusable functionality in the code, always move it into a jQuery plugin format, to be reused across the site

• Coding:
  • Use jQuery CDN (google or Microsoft or jQuery) as much as possible for script registration, if its fine with clients. To be on the safer side, you could have a fallback code as well:
    <!– Grab Google CDN jQuery. fall back to local if necessary –> 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js“></script> 

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”><\/script>’)</script>

• Avoid unnecessary upgrades of jQuery, unless there are features, which you require or some plugins require. Stick to one version from the beginning. (ex. 1.5.1)
• Avoid writing event handler attributes (onclick etc.), instead use live or bind methods to attach the respective event handlers.
• Avoid mixing javascript code with jQuery code.
• Cache any jQuery selector, if reused in multiple statements.
  Ex. Avoid $(“#x”).val(); $(“#x”).attr(“align”,”right”); Use var $x = $(“#x”); $x.val();$x.attr(“align”,”right”);
• Ensure that you place ready function in your code. $(document).ready(function(){});
• Use find method, instead of building a complex jQuery selector.
  

//Fine in modern browsers, though Sizzle does begin “running”

$(‘#someDiv p.someClass’).hide(); 

// Better for all browsers, and Sizzle never inits. 

$(‘#someDiv’).find(‘p.someClass’).hide(); 

• Avoid misusing $(this).
  Ex. Use this.id instead of $(this).attr(‘id’)
• Keep your code safe, by using noConflict() method or by passing jQuery.
  Ex. (function($){})(jQuery); or by wrapping it in a ready method.
• Avoid declaring new jQuery selectors within foreach, instead declare them outside and reuse it inside the loop.
• Use $.ajax instead of $.get or $.getJSON, because internally they call $.ajax.
• Use JSON formats for communications.
• Ensure that you move your jQuery codes to a separate javascript file, instead of inline scripts.
• Compress javascript files for better performance.
• Combine multiple css() calls or attr() calls into one. In case of attributes, you could also pass them as shown below: 

$(‘</a>’, {

    id : ‘myId’, 

    className : ‘myClass’, 

    href : ‘mytest.html’ 

});

• Debugging:
  • Use Developer Toolbars and Inspectors to debug your code from client side. You do not need to perform deployments and builds to debug your jQuery code(s).

• jQuery Cheat Sheet:
  • Always keep a jQuery cheat sheet handy with you to know about the list of functions available for you. Download here

Below are some more useful links you could check out:

• http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/

• http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

• http://www.webforg.com/tutorials/javascript-ajax/jquery-best-practice

• http://www.artzstudio.com/2009/04/jquery-performance-rules/

Some words of caution:

• $.ajax has issues in making cross domain AJAX calls. As a solution, you can get a patched version of $.ajax from the net.

• Avoid http request on https sites. Your user will be prompted with a nagging security popup, which on rejection can break your request.

• Avoid loading multiple jQuery versions.

• Majority of the jQuery plugins are browser compatible, but NOT ALL. Read the plugin documentations carefully and use them judiciously.

This might appear to be a drop from the ocean. But it will guide them in the right direction.