jQuery Standards and Best Practice

I’m currently responsible for rolling out the use of jQuery to the community of Web Developers within our company. Part of this involves presenting a course, however another part involves communicating standards and best practice.

If you Google 'jQuery best practice', you’ll probably find the following among the search results. http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/ http://www.artzstudio.com/2009/04/jquery-performance-rules/

These have been helpful and I have gleamed much useful information on them. However, what I would be really interested in would be any tips, traps, opinions, etc, on best practice from experienced jQuery developers and those who may have found themselves in a similar position to myself. Any good links would also be appreciated.

EDIT:

Added a jQuery Coding Standards section on my own page:

http://www.jameswiseman.com/blog/?p=48

You can find this trending topic right here in StackOverflow.com

https://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid

Very interesting useful tips one after the other.

here are some more i found in my bookmarks:

• http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/

• http://jquery.open2space.com/</strike>

• http://thetoptenme.wordpress.com/2008/08/19/the-complete-guide-for-jquery-developer-reblog/

• http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx</strike>

Something I've personally started to do is a sort of an Apps Hungarian Notation for jQuery sets, by prefixing those variables with a $

var someInt = 1;
var $someQueryCollection = $( 'selector' );

I find that as my jQuery snippets grow, this becomes invaluable, not only in the promotion of storing jQuery sets as variables, but to help me keep track of which variables actually are jQuery sets.

Unobtrusive JavaScript (separation of markup and behavior)

Back in the days, it was common to put your click handler inside the markup. Now it's recommended that you do not write your JS code inside your markup but include it via DOM events.

Progressive enhancement

User gets better experience if they are using standards compliant browser and/or has JavaScript enabled. Website/web application is still accessible even if they have older browser or has JS disabled.

Feature detection and not browser detection

Keeping above points aside, I would really focus on conveying the message (breaking the pre-conceived notion) that JavaScript is a toy language. I have seen too many developers who thinks this way and everything is downhill from there. You need to explain them how JavaScript is a very powerful language and why they need a JS library (because of browser inconsistencies) even though JS itself is very powerful.

Good luck.

The way that jQuery works is NOT the same way that JavaScript works, even though they are one and the same. jQuery works on CSS selectors, like the class name(s) and the id of elements. To select an item in jQuery, you do:

$("#yourID") or $(".yourClass") or $("div") or $("#yourID p") etc

And you will get a collection of all the elements on the page that fit your criteria. You can then perform your actions on ALL of those elements without any looping of any sort. This is important to remember:

$(".yourClass").click(function(){
    //do stuff
});

will affect all items with .yourClass attached to them. One tip: if you're going to access the $(this), you should save it as a local variable:

$(".yourClass").click(function(){
    var $this = $(this);
});

as it will speed up your function.