jQuery - 10 Time-Savers You (Maybe) Don't Know
2 likes2,273 views
This document discusses 10 time-saving techniques for jQuery and JavaScript: 1. Limit DOM traversal to improve performance. 2. Use chaining for cleaner code and better readability. 3. Be specific with selectors like :first-child to avoid universal selectors. 4. Understand events like .each(), .live(), and .delegate() and use appropriately. 5. Create DOM elements in memory then append for better performance. 6. Bind fewer events by checking the target of the event. 7. Choose events like .ready() and .load() carefully based on needs. 8. Think right-to-left for selectors except IDs
![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);](https://image.slidesharecdn.com/jquery-110813181620-phpapp01/85/jQuery-10-Time-Savers-You-Maybe-Don-t-Know-6-320.jpg)
jQuery - 10 Time-Savers You (Maybe) Don't Know
- 1. 10 Time-Savers You (Maybe) Don't Know Girish Gangadharan @appoosa girish@giri.sh http://giri.sh
- 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.
- 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