Download ppt - Jquery Best Practices

04/10/23HUGE / ParentsConnect / 1

HUGE45 Main Street, 2nd Floor NY NY 11201718.625.4843 www.hugeinc.com

jQuery Best Practices

Being Awesome with jQuery

October 13th, 2009

HUGE / New Browsers 2

Why be awesome

• Performance

• Better for the team



Selector Optimization

• Avoid the universal selector• Avoid the implied


$(“.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


// 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 ]


// 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


$(“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


$(“#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”!


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


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


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


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:


// the more “a.crazy” the more processingjQuery(“a.crazy”).css(“color”, “#BADA55”);

// one consistent load timejQuery(‘<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


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


$(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 enclosurejQuery(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


$(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
