Jquery Best Practices

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( … ); }

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++) { $("<li>something</li>").attr("id", "foo" + i).appendTo("ul"); } Is faster (in 1.3.3) than for (var i=0; i<250; i++) { $("ul").append("<li id='foo" + i + "'>something</li>"); }

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 });

Self-enclosed namespace / “self-executing enclosures”

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);

Document ready

HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here }); Is same as jQuery(function($) { // your stuff here });