jQuery - 10 Time-Savers

You may have heard of and even used jQuery before. But are you doing it right? Have you gotten the best out of it yet?

There are a lot of clever techniques that most of us are unaware of, that can not only help speed up the performance of your site but also make the code easy to support, extend and maintain.

In this presentation, we'll look at some of these features that makes jQuery programming a pleasure and help you get more done with less code.

Transcript

1. 10 Time-Savers You (Maybe) Don't Know Girish Gangadharan @appoosa girish@giri.sh http://giri.sh
2. var $items = $(„#products‟); Limit DOM traversal $items.click(function() { $(this).next(„div‟).slideToggle(); }); $items.addClass(„active‟); $items.closest(„p#category‟).animate({ height:100px });
3. $userprofile Less code. Better readability. .hover(function () { $(this).addClass(“highlight"); }, function () { $(this).removeClass(“highlight"); }) .click(function() { //do something }) .fadeIn(„slow‟); var $userprofile = $(„#user-profile‟);
4. Precede them with a tag name or some selector; else the universal selector is implied. $(':focus') = $('*:focus') :first-child, :last-child, :even, :odd, :parent, :next, :prev, etc. Don‟t leave them hanging.
5. $('#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'); }); Understand what each does. Use appropriately.
6. Create in memory. Then update the DOM. var $mylist = $('#mylist'); // <ul> var concatenatedList = “”; for (var i = 0; i < 100; i++) { concatenatedList += ('<li>' + bestsellers[i] + '</li>'); } $mylist.append(concatenatedList); var $mylist = $('#mylist'); // <ul> for (var i = 0; i < 100; i++) { $mylist.append('<li>' + bestsellers[i] + '</li>'); }
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‟).find(„li > input:disabled'); $('#user-profiles > li > input:disabled');
10. Sizzle engine is highly optimized but… $(„#elementId‟).css(„display‟, „block‟); document.getElementById(„elementId‟).style.display = „block‟; var $someElement = $(„#elementId‟); var someElement = document.getElementById(„elementId‟); Vs. Vs. 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.
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
15. 10 Time-Savers You (Maybe) Don't Know Girish Gangadharan @appoosa girish@giri.sh http://giri.sh