jQuery Best Practice

JQUERY BEST PRACTICE
AND
SELECTORS
Author: Chandra Shekher P
© chandrashekher

TOPICS
1. Loading jQuery
2. Variables
3. Selectors
4. Dom Manipulation
5. Events
6. Ajax
7. Animations
8. Plugins
9. Chaining
10. Miscellaneous

LOADING JQUERY
 Always try to use a CDN to include jQuery on your page,
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script> <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"
type="text/javascript"></script>')</script>
 If possible, keep all your JavaScript and jQuery includes at the bottom
of your page.
 For advanced browser feature detection, use Modernizr.js .
 If you are using other libraries like Prototype, MooTools, Zepto etc. that
uses $ sign as well,
 try not to use $ for calling jQuery functions and instead
use jQuery simply. You can return control of $ back to the other library
with a call to $.noConflict().

JQUERY VARIABLES
 All variables that are used to store/cache jQuery
objects should have a name prefixed with a $.
 Always cache your jQuery selector returned objects
in variables for reuse.
var $myDiv = $("#myDiv");
$myDiv.click(function(){...});
 Use camel case for naming variables.

SELECTORS
 Use ID selector whenever possible. It is faster because they are handled
using document.getElementById().
 When using class selectors, don't use the element type in your selector. for
Performance Improvements.
var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST
 Use find for Id->Child nested selectors. The .find() approach is faster because the first
selection is handled without going through the Sizzle selector engine.
// BAD, a nested query for Sizzle selector engine
var $productIds = $("#products div.id");
// GOOD, #products is already selected by document.getElementById() so only div.id
needs
to go through Sizzle selector engine
var $productIds = $("#products").find("div.id");

SELECTORS
 Be specific on the right-hand side of your selector, and less
specific on the left
// Unoptimized $("div.data .gonzalez"); //
Optimized $(".data td.gonzalez");
 Avoid Excessive Specificity
$(".data table.attendees td.gonzalez"); // Better: Drop the middle if
possible.
$(".data td.gonzalez");

SELECTORS
 Give your Selectors a Context.
// SLOWER because it has to traverse the whole DOM for
.class
$('.class');
// FASTER because now it only looks under class-container.
$('.class', '#class-container');
 Avoid Universal Selectors
$('div.container > *'); // BAD
$('div.container').children(); // BETTER

SELECTORS
 Avoid Implied Universal Selectors. When you leave off the
selector, the universal selector (*) is still implied.
$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD
Don’t Descend Multiple IDs or nest when selecting an ID. ID-only
selections are handled using document.getElementById() so
don't mix them with other selectors.
$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD, only calls
document.getElementById()

DOM MANIPULATION
 Always detach any existing element before manipulation and
attach it back after manipulating it.
var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");
 Don’t Act on Absent Elements.
// BAD: This runs three functions before it realizes there's nothing in the
selection
$("#nosuchthing").slideUp();
// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
$mySelection.slideUp();
}

DOM MANIPULATION
 Use string concatenation or array.join() over .append()
// BAD
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
$myList.append("<li>"+i+"</li>");
}
// GOOD var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
list += "<li>"+i+"</li>";
}
$myList.html(list);
// EVEN FASTER
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));

EVENTS
 Use only one Document Ready handler per page. It makes it easier
to debug and keep track of the behavior flow.
 DO NOT use anonymous functions to attach events. Anonymous
functions are difficult to debug, maintain, test, or reuse.
$("#myLink").on("click", function(){...}); // BAD
// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);
 Document ready event handler should not be an anonymous
function. Once again, anonymous functions are difficult to debug,
maintain, test, or reuse.
$(function(){ ... }); // BAD: You can never reuse or write a test for this function.
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
// Page load event where you can initialize values and call other
initializers.

EVENTS
 Document ready event handlers should be included from
external files and inline JavaScript can be used to call the
ready handle after any initial setup.
<script src="my-document-ready.js"></script>
<script>
// Any global variable set-up that might be needed.
$(document).ready(initPage); // or
$(initPage);
</script>
 DO NOT use behavioral markup in HTML (JavaScript inlining),
these are debugging nightmares. Always bind events with
jQuery to be consistent so it's easier to attach and remove
events dynamically.
<a id="myLink" href="#" onclick="myEventHandler();"> my link
</a> 
$("#myLink").on("click", myEventHandler); // GOOD

EVENTS
 When possible, use custom namespace for events. It's easier to
unbind the exact event that you attached without affecting other
events bound to the DOM element.
$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// Later on, it's easier to unbind just your click event
$("#myLink").unbind("click.mySpecialClick");
 Use event delegation when you have to attach same event to
multiple elements. Event delegation allows us to attach a single
event listener, to a parent element, that will fire for all
descendants matching a selector, whether those descendants
exist now or are added in the future.
$("#list a").on("click", myClickHandler); // BAD, you are attaching an
event to all
the links under the list.
$("#list").on("click", "a", myClickHandler); // GOOD, only one event
handler is
attached to the parent.

AJAX
 Avoid using .getJson() or .get(), simply use the $.ajax() as
that's what gets called internally.
 DO NOT use http requests on https sites. Prefer schemaless
URLs (leave the protocol http/https out of your URL)
 DO NOT put request parameters in the URL, send them using
data object setting.
// Less readable...
$.ajax({
url: "something.php?param1=test1&param2=test2", ....
});
// More readable...
$.ajax({
url: "something.php",
data: { param1: test1, param2: test2 }
});

AJAX
 Try to specify the dataType setting so it's easier to know what
kind of data you are working with.
 Use Delegated event handlers for attaching events to content
loaded using Ajax. Delegated events have the advantage that
they can process events from descendant elements that are
added to the document at a later time
$("#parent-container").on("click", "a",
delegatedClickHandlerForAjax);
 Use Promise interface
$.ajax({ ... }).then(successHandler, failureHandler);
// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

AJAX
 Sample Ajax Template:
var jqxhr = $.ajax({
url: url,
type: "GET", // default is GET but you can use other verbs based on your needs.
cache: true, // default is true, but false for dataType 'script' and 'jsonp', so set it on need
basis.
data: { }, // add your request parameters in the data object.
dataType: "json", // specify the dataType for future reference
jsonp: "callback", // only specify this to match the name of callback parameter your API is
expecting for JSONP requests. //
statusCode: { // if you want to handle specific error codes, use the status code mapping
settings.
404: handler404,
500: handler500
} });
jqxhr.done(successHandler);

EFFECTS AND ANIMATIONS
 Adopt a restrained and consistent approach to implementing
animation functionality.
 DO NOT over-do the animation effects until driven by the UX
requirements.
1 Try to use simple show/hide, toggle and
slideUp/slideDown
functionality to toggle elements.
2 Try to use predefined animations durations of "slow",
"fast" or 400
(for medium).

CHAINING
 Use chaining as an alternative to variable caching and multiple
selector calls.
$("#myDiv").addClass("error").show();
 Whenever the chain grows over 3 links or gets complicated because
of event assignment, use appropriate line breaks and indentation to
make the code readable.
$("#myLink")
.addClass("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();
 For long chains it is acceptable to cache intermediate objects in a
variable.

PLUGINS
 Always choose a plugin with good support, documentation,
testing and community support.
 Check the compatibility of plugin with the version of jQuery
that you are using.
 Any common reusable component should be implemented as
a jQuery plugin

MISCELLANEOUS
 Use Object literals for parameters.
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
 Do not mix CSS with jQuery.
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
$("#mydiv").addClass("error"); // GOOD
 DO NOT use Deprecated Methods. It is always important to keep an eye on deprecated
methods for each new version and try avoid using them.Click here for a list of deprecated
methods.
 Combine jQuery with native JavaScript when needed. See the performance difference for
the example given below
$("#myId"); // is still little slower than... document.getElementById("myId");

jQuery Best Practice

More Related Content

What's hot (20)

Similar to jQuery Best Practice (20)

Recently uploaded (20)

jQuery Best Practice