Thursday, 10 January 2013

Best practice with jQuery

 1. How to select your selector ?

There are various ways of selecting a DOM element in jQuery, but performance depend on how we select our selector.faster to slower-
 $(“#id”) - This is the fastest way of selecting a DOM element.because it uses native document.getElementId() method.
 $(“tagName”) - Use of tag name for selector is also very fast, such as for better performance we can use $(“p”), because it uses native document.getElementsByTagname() method.
 $(“.class”) - This also a fast selector but slow in older versions of IE.It uses native document.getElementByClassName() method. because all above methods have their respective native methods so they are very fast. 
 $(“[attribute=name]”) - Selection by using attribute is slow because it does not have any native method in JavaScript.
 $(“:hidden”) - This is the most powerful but slowest selector in all of above so be careful when we use pseudo-selectors.

2. How to use jQuery Object for Chaining ?

An important fact about jQuery is that its almost all methods returns a jQuery object, its mean we can use multiple methods in a single line.It will make our code slightly shorter and more faster.Example:

by using chaining we can minimize our code as :

3. How to use Cache ?

If you are using a selector more than one times in your code then its better to use caching in your program.It will improve your program performance.

by using Cache:
var multi = $(“multiply”).find(“id”);

by using cache and chaining both:
var multi = $(“multiply”).find(“id”);

4. How to handle events in better way ?

“Event-listeners cost memory”
Whenever we are writing a event-listener than always kept in mind the above statement.
Commonly in our code we uses hundreds of event-listener and jQuery provides us various method for that but how to use efficiently these methods is upto us.Example:
          $(this).toggleClass(“active”); })

Here, we are binding an event to each “td” of table which will take more memory,instead of that we can use “on” method which wrap-up functionality of all jQuery’s previous event-listeners (.bind(),delegate(),.live()). additionally “on” support some other parameters also which helps in delegation.
          $(this).toggleClass(“active”); })

but in above still we are binding our event with each “td” again wastage of memory, so we can use in such a we are binding event with our table not  in a particular “td”,so here we reduced our memory uses.

5.How to separate “CSS” and “jQuery” ?

Instead of changing appearances by jQuery directly, we can use CSS classes for changing  appearances.
Instead of that we should make a CSS class and then use jQuery methods to implement that class.Such as:
CSS class:

It will provide us more flexibility, we can easily remove that css whenever required.

6. How to store data in jQuery ?

.attr or .data - Many of us use .attr method for storing data, which is not a good practice.Instead of that we should use .data method for storage. .attr method is for manipulating the attribute.So:
$(‘selector’).attr(‘alt’, ‘this is the data that I am storing’);
           // then later getting that data with

Here we are storing data with HTML, which are not meant to be.Instead of that we store data in our javaScript code,which is a better idea.
Instead of that we should use:
$(‘selector’).data(‘meaningfullname’, ‘this is the data I am storing’);
// then later getting the data with

Updation continue in this article @ click  you can send your suggestion on .