Eight Tips That Makes You a Better jQuery Coder

jQuery is a JavaScript framework that is becoming insanely popular. It is fast, easy to use and creating custom plugins and components is done in a breeze. These days, everyone is a jQuery developer and the plugin repository over at jQuery is virtually exploding with new plugins being added every day.In light of all this, here are my eight best tips for becoming a better jQuery coder that you might consider before taking on your next project.

1. Stay accessible and maintain degradability

With jQuery being as popular as it is, more and more people are writing plugins and creating component packages that are ready to use as-is. But few developers bare in mind that it should also work without JavaScript turned on. Well, that’s one of the main reasons to go unobtrusive, right? So as an example, this code:

CSS:

.animate{color:red;display:none};

jQuery:

$('.animate').fadeIn();

…would use jQuery to fade in the elements that has the class name ‘animate’. But if JavaScript is turned off, the browser still parses the CSS and will naturally hide the elements without ever showing them!

Instead, always make a habit of separating “JavaScript CSS” and “pure CSS”. Try this:

CSS:

.animate{color:red}

.animate_js{display:none};

jQuery:

$('.animate').addClass('animate_js').fadeIn();

This way, you can style the elements for each scenario and maintain degradability in a sensible way. As always, test your code without JavaScript turned on before deployment.

2. Move visual effects to the presentational layer

When writing JavaScript, always focus on behavior. jQuery is not CSS, and be aware of the core differences between presentation and behavior. For example, it is often a good idea to add classes instead of pure CSS properties. Avoid fades and glamor inside the functions. Save the effects for a juicy demo but stay low key in the JavaScript functions – everyone doesn’t share your visual taste!

3. Use firebug and the console.log

Firebug is your friend when developing with jQuery. And so is the console.log command that gracefully replaces the annoying alert(). Simply type console.log() to debug whenever you need to in your code. But remember to remove them before production since many browsers will choke on them, including older versions of IE (of course). Google Chrome also has the same functionality as Firebug built in.

4. Define sensible defaults and use a limited amounts of parameters

When you get bitten by the jQuery bug and start to create plugins, you are often tempted to maximize the number of parameters to make it as flexible as possible. This is all very noble, but stay clear and try not to confuse the web developer with tiny parameters that hardly make any difference (like fade speeds etc). Instead, pass on a parameter object and define sensible defaults. Your code is not meant to be everything under the sky!

5. Encapsulate your custom alias

jQuery is not the only framework that uses the $ dollar shorthand. Many jQuery plugins and code snippets uses the $ exclusively for defining onDomReady callbacks and CSS selector functions, but you might end up with cross-framework conflicts by doing so.

Instead you can use a custom alias, (which can still be $) like this:

jQuery(function($) { // your code using $ alias here });

The example above uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. You can and should also encapsulate the $ when authoring plugins, like this:

(function($) { // plugin code here, use $ as much as you like })(jQuery);

6. Define custom callbacks

When authoring jQuery plugins, it’s a good idea to let the developer assign custom callbacks as parameter functions, thus making it possible to customize the plugin even more. So instead of forcing callback effects inside the plugin, trigger event functions and set the effects free.

Here is an example where we pass on the onFade function to the plugin, written as a simple fadeIn plugin:

 /* This plugin fades an element and triggers the onFade when completed EXAMPLE USAGE: $('.fademe').customFade({ fadeSpeed: 50, onFade: function(elem) { console.log(elem+' has faded!') } }); */ jQuery.fn.customFade($params) { var $defaults = { fadeSpeed: 1000, onFade: function(element){} }; var $p = $.extend($defaults, $params); $(this).fadeIn($p.fadeSpeed,$p.onFade($(this))); } 

–

7. Be aware of browser differences

jQuery is very cross-browser friendly. But there are still glitches, especially with browsers like Safari who has a different onLoad trigger, and of course MSIE. Always test in several browsers once in a while and pay close attention to when and where the glitches occur.

8. Don’t overuse it and define your purpose

Make sure you are not using jQuery just because you can. Always analyze your needs and have a clear idea of what you want to achieve and why before even writing the first line. Sketch your code visually and discuss your ideas with fellow peers before coding. Don’t re-invent the wheel unless you are doing it to educate yourself, have a look around for high quality plugins  for inspiration and to see what has already been done.

That concludes this guide to jQuery and these 8 tips to become a better coder with this framework. Hopefully this will help you create better web sites and improve on your coding performance.