Jquery Best Practices
Upcoming SlideShare
Loading in...5
×
 

Jquery Best Practices

on

  • 8,881 views

 

Statistics

Views

Total Views
8,881
Views on SlideShare
8,856
Embed Views
25

Actions

Likes
4
Downloads
81
Comments
0

1 Embed 25

http://www.slideshare.net 25

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Best Practices Jquery Best Practices Presentation Transcript

  • 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
    • Why be awesome
    • Performance
    • Better for the team
    HUGE / New Browsers jQuery Best Practices
    • Selector Optimization
    • Avoid the universal selector
    • Avoid the implied
    HUGE / New Browsers jQuery Best Practices $(“.buttons > *”) //no no no, not good, costly $(“.buttons”).children() $(“.gender :radio”) //implied $(“.gender input:radio”) //way better
    • Selector Optimization
    • 1.3.3 will be right to left (Sizzle) – most of the time
    • Better to be more specific on the right hand side when you can
    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”)
    • Fastest when you can find by ID $(“#id”)
    $(“#table-data .nemo”)
    • The power of .find()
    • $(“#id”).find(“div”) // rules all when you can use an ID
    • Faster than $(“#id div”) – even though improved in 1.3.3
    • Better than $(“div”, “#id”) – start avoiding context selection Typical: $(“div”).each { $(“p.awesome”, this).css( … ); } Better: $(“div”).each { $(this).find(“p.awesome”).css( … ); }
    HUGE / New Browsers jQuery Best Practices
    • The power of .find() Semantically easier to read and is less work for jQuery:
    • [ jquery-1.3.2.js ]
    HUGE / New Browsers jQuery Best Practices // HANDLE: $(expr, [context]) // (which is just equivalent to: $(content).find(expr) } else return jQuery( context ).find( selector );
    • .live()
    • Use .live() from now on when assigning event handling
    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”) ); });
    • Speeds up page load – one event handler bound vs. many
    • 1.3.3 is suppose to ship once “submit”, “change”, and “focus/blur” work in .live()
    • Variables
    • Start using $ on variables that represent jQuery objects
    • Cache selections
    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(); } });
    • Variables
    • Variable declaration on “one line”!
    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);
    • Variables
    • Contain your global variables in a… global variable
    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” }, ... };
    • DOM Manipulation
    • Inserting HTML fragments
    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;); }
    • DOM Manipulation
    • Insert HTML after construction is complete; 1 operation
    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>”); }
    • Minimize DOM Touches
    • The DOM is slow… the more you jQuery each element, the slower
    • On user style change:
    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’);
    • Don’t act on absent elements
    • Can have costly overhead
    • Try to check first
    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 }
    • Understanding jQuery enclosures
    • Document ready
    HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here });
    • Self-enclosed namespace / “self-executing enclosures”
    (function ($) { forThisModule = function() { // only available for this “module” } })(jQuery);
    • Document ready combined with self enclosure
    jQuery(function($) { // your stuff here });
    • Understanding jQuery enclosures
    • Self-enclosed namespace / “self-executing enclosures”
    HUGE / New Browsers jQuery Best Practices
    • Assigns the dollar for jQuery usage and preserves it in that space
    • Good to use if using another js library that has $ usage
    (function ($) { forThisModule = function() { // only available for this “module” } })(jQuery);
    • Understanding jQuery enclosures
    • Document ready
    HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here }); Is same as jQuery(function($) { // your stuff here });
    • The latter better preserves the $, but not a big deal for us because we only use jQuery
    • Should we use the latter as best practice?
    • Listen to the Jehk
    • Use object literals
    • Enclose your object literals in an anonymous jQuery function
    HUGE / New Browsers jQuery Best Practices