Jquery Best Practices

8,080 views

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,080
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
90
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Jquery Best Practices

  1. 1. 10/28/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com jQuery Best Practices Being Awesome with jQuery October 13th, 2009
  2. 2. <ul><li>Why be awesome </li></ul><ul><li>Performance </li></ul><ul><li>Better for the team </li></ul>HUGE / New Browsers jQuery Best Practices
  3. 3. <ul><li>Selector Optimization </li></ul><ul><li>Avoid the universal selector </li></ul><ul><li>Avoid the implied </li></ul>HUGE / New Browsers jQuery Best Practices $(“.buttons > *”) //no no no, not good, costly $(“.buttons”).children() $(“.gender :radio”) //implied $(“.gender input:radio”) //way better
  4. 4. <ul><li>Selector Optimization </li></ul><ul><li>1.3.3 will be right to left (Sizzle) – most of the time </li></ul><ul><li>Better to be more specific on the right hand side when you can </li></ul>HUGE / New Browsers jQuery Best Practices // Finding Nemo $(“.data td.nemo”) Better than $(“div.data .nemo”) Don’t over do it $(“.data table.guests td.nemo”) <ul><li>Fastest when you can find by ID $(“#id”) </li></ul>$(“#table-data .nemo”)
  5. 5. <ul><li>The power of .find() </li></ul><ul><li>$(“#id”).find(“div”) // rules all when you can use an ID </li></ul><ul><li>Faster than $(“#id div”) – even though improved in 1.3.3 </li></ul><ul><li>Better than $(“div”, “#id”) – start avoiding context selection Typical: $(“div”).each { $(“p.awesome”, this).css( … ); } Better: $(“div”).each { $(this).find(“p.awesome”).css( … ); } </li></ul>HUGE / New Browsers jQuery Best Practices
  6. 6. <ul><li>The power of .find() Semantically easier to read and is less work for jQuery: </li></ul><ul><li>[ jquery-1.3.2.js ] </li></ul>HUGE / New Browsers jQuery Best Practices // HANDLE: $(expr, [context]) // (which is just equivalent to: $(content).find(expr) } else return jQuery( context ).find( selector );
  7. 7. <ul><li>.live() </li></ul><ul><li>Use .live() from now on when assigning event handling </li></ul>HUGE / New Browsers jQuery Best Practices $(“a.extra”).live(“click” , function() { alert( this.attr(“title”) ); }); Better than $(“a.extra”).click( function() { alert( this.attr(“title”) ); }); <ul><li>Speeds up page load – one event handler bound vs. many </li></ul><ul><li>1.3.3 is suppose to ship once “submit”, “change”, and “focus/blur” work in .live() </li></ul>
  8. 8. <ul><li>Variables </li></ul><ul><li>Start using $ on variables that represent jQuery objects </li></ul><ul><li>Cache selections </li></ul>HUGE / New Browsers jQuery Best Practices $(“#nav li”).live(“mouseover” , function() { var dropDownMessage = “I’m lonely!”; var $dropDown = $(this).find(“div.dropdown”); if ($dropDown.length === 0) { alert( dropDownMessage ); } else { $dropDown.show(); } });
  9. 9. <ul><li>Variables </li></ul><ul><li>Variable declaration on “one line”! </li></ul>HUGE / New Browsers jQuery Best Practices var test1 = 1; var test2 = function() { // stuff }; var test3 = test2(test1); var test1 = 1, test2 = function() { // stuff }, test3 = test2(test1);
  10. 10. <ul><li>Variables </li></ul><ul><li>Contain your global variables in a… global variable </li></ul>HUGE / New Browsers jQuery Best Practices Var MYAPP = {}; MYAPP.creator = { “ first-name” : “Joe”, “ last-name” : “Shmo” }; MYAPP.flight = { airline: “Oceanic”, number: 915, departure: { IATA: “JFK” time: “2004-09-22 14:55”, city: “New York” }, ... };
  11. 11. <ul><li>DOM Manipulation </li></ul><ul><li>Inserting HTML fragments </li></ul>HUGE / New Browsers jQuery Best Practices for (var i=0; i<250; i++) { $(&quot;<li>something</li>&quot;).attr(&quot;id&quot;, &quot;foo&quot; + i).appendTo(&quot;ul&quot;); } Is faster (in 1.3.3) than for (var i=0; i<250; i++) { $(&quot;ul&quot;).append(&quot;<li id='foo&quot; + i + &quot;'>something</li>&quot;); }
  12. 12. <ul><li>DOM Manipulation </li></ul><ul><li>Insert HTML after construction is complete; 1 operation </li></ul>HUGE / New Browsers jQuery Best Practices var s = “”; for (var i=0; i<250; i++) { s = s + “<li>”+i+”</li>”; } $(“ul”).append(s); Better than for (var i=0; i<250; i++) { $(“ul”).append(“<li>”+i+”</li>”); }
  13. 13. <ul><li>Minimize DOM Touches </li></ul><ul><li>The DOM is slow… the more you jQuery each element, the slower </li></ul><ul><li>On user style change: </li></ul>HUGE / New Browsers jQuery Best Practices // the more “a.crazy” the more processing jQuery(“a.crazy”).css(“color”, “#BADA55”); // one consistent load time jQuery(‘<style type=“text/css”> a.crazy {color:#BADA55} </style>’) .appendTo(‘head’);
  14. 14. <ul><li>Don’t act on absent elements </li></ul><ul><li>Can have costly overhead </li></ul><ul><li>Try to check first </li></ul>HUGE / New Browsers jQuery Best Practices jQuery.fn.doOnce = function(func) { this.length && func.apply(this); return this; } $(“li.cartitems”).doOnce( function(){ // do something }); jQuery.fn.somethingElse = function(opts) { if (!this.length) return this; // do something else }
  15. 15. <ul><li>Understanding jQuery enclosures </li></ul><ul><li>Document ready </li></ul>HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here }); <ul><li>Self-enclosed namespace / “self-executing enclosures” </li></ul>(function ($) { forThisModule = function() { // only available for this “module” } })(jQuery); <ul><li>Document ready combined with self enclosure </li></ul>jQuery(function($) { // your stuff here });
  16. 16. <ul><li>Understanding jQuery enclosures </li></ul><ul><li>Self-enclosed namespace / “self-executing enclosures” </li></ul>HUGE / New Browsers jQuery Best Practices <ul><li>Assigns the dollar for jQuery usage and preserves it in that space </li></ul><ul><li>Good to use if using another js library that has $ usage </li></ul>(function ($) { forThisModule = function() { // only available for this “module” } })(jQuery);
  17. 17. <ul><li>Understanding jQuery enclosures </li></ul><ul><li>Document ready </li></ul>HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here }); Is same as jQuery(function($) { // your stuff here }); <ul><li>The latter better preserves the $, but not a big deal for us because we only use jQuery </li></ul><ul><li>Should we use the latter as best practice? </li></ul>
  18. 18. <ul><li>Listen to the Jehk </li></ul><ul><li>Use object literals </li></ul><ul><li>Enclose your object literals in an anonymous jQuery function </li></ul>HUGE / New Browsers jQuery Best Practices

×