2. Limit DOM traversal
var $items = $(â#productsâ);
$items.click(function() {
$(this).next(âdivâ).slideToggle();
});
$items.addClass(âactiveâ);
$items.closest(âp#categoryâ).animate({ height:100px });
3. Less code. Better readability.
var $userprofile = $(â#user-profileâ);
$userprofile
.hover(function () {
$(this).addClass(âhighlight");
},
function () {
$(this).removeClass(âhighlight");
})
.click(function() {
//do something
})
.fadeIn(âslowâ);
4. Donât leave them hanging.
:first-child, :last-child, :even, :odd, :parent, :next, :prev, etc.
Precede them with a tag name or some selector;
else the universal selector is implied.
$(':focus') = $('*:focus')
5. Understand what each does. Use appropriately.
$('#sometable').each(function(){
$('td', this).bind('hover', function(){
$(this).toggleClass('hover');
});
});
$('#sometable').each(function(){
$('td', this).live('hover', function(){
$(this).toggleClass('hover');
});
});
$('#sometable').delegate('td', 'hover', function(){
$(this).toggleClass('hover');
});
6. Create in memory. Then update the DOM.
var $mylist = $('#mylist'); // <ul>
for (var i = 0; i < 100; i++) {
$mylist.append('<li>' + bestsellers[i] + '</li>');
}
var $mylist = $('#mylist'); // <ul>
var concatenatedList = ââ;
for (var i = 0; i < 100; i++) {
concatenatedList += ('<li>' + bestsellers[i] + '</li>');
}
$mylist.append(concatenatedList);
7. Bind less.
$(â#reports tdâ).bind(âclickâ, function() {
//do something
})
$(â#reportsâ).bind(âclickâ, function(e) {
var target = e.target;
if (target.nodeName === âtd') {
// do something
}
})
8. Choose your event carefully.
$(document).ready(function() {
//Fires as soon as the DOM is ready
//Doesnât wait for images, style sheets etc.
})
$(window).load(function() {
//Fires after all the content is loaded
//Includes images, style sheets, etc.
})
9. Think right-to-left (except for IDs)
$('#user-profiles > li > input:disabled');
$('#user-profilesâ).find(âli > input:disabled');
10. Sizzle engine is highly optimized butâŠ
var $someElement = $(â#elementIdâ);
Vs.
var someElement = document.getElementById(âelementIdâ);
$(â#elementIdâ).css(âdisplayâ, âblockâ);
Vs.
document.getElementById(âelementIdâ).style.display = âblockâ;
Do you really need a whole library to
accomplish your tasks?
11. Will this improve page performance by x times?
Probably, not.
(especially if you donât have a complex multi-nested DOM)
For example, how to better structure your code.
âą Module Pattern
âą Revealing Module Pattern
âą Constructional Pattern
âą Creational Pattern
âą Factory Pattern
âą etc.
12.
13.
14. Essential JavaScript Design Patterns: (Free!)
http://addyosmani.com/blog/essentialjsdesignpatternsupdate1
jQuery: Novice to Ninja
http://www.amazon.com/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857
jQuery API
http://api.jquery.com
JavaScript Performance Testing
http://jsperf.com/browse