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

[object Object],[object Object],[object Object],HUGE / New Browsers jQuery Best Practices

[object Object],[object Object],[object Object],HUGE / New Browsers jQuery Best Practices $(“.buttons > *”) //no no no, not good, costly $(“.buttons”).children() $(“.gender :radio”) //implied $(“.gender input:radio”) //way better

[object Object],[object Object],[object Object],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”) ,[object Object],$(“#table-data .nemo”)

[object Object],[object Object],[object Object],[object Object],HUGE / New Browsers jQuery Best Practices

[object Object],[object Object],HUGE / New Browsers jQuery Best Practices // HANDLE: $(expr, [context]) // (which is just equivalent to: $(content).find(expr) } else return jQuery( context ).find( selector );

[object Object],[object Object],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”) ); }); ,[object Object],[object Object]

[object Object],[object Object],[object Object],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(); } });

[object Object],[object Object],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);

[object Object],[object Object],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” }, ... };

[object Object],[object Object],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>"); }

[object Object],[object Object],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>”); }

[object Object],[object Object],[object Object],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’);

[object Object],[object Object],[object Object],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 }

[object Object],[object Object],HUGE / New Browsers jQuery Best Practices $(document).ready( function() { // your stuff here }); ,[object Object],(function ($) { forThisModule = function() { // only available for this “module” } })(jQuery); ,[object Object],jQuery(function($) { // your stuff here });

[object Object],[object Object],HUGE / New Browsers jQuery Best Practices ,[object Object],[object Object],(function ($) { forThisModule = function() { // only available for this “module” } })(jQuery);

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

Jquery Best Practices

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Jquery Best Practices

Similar a Jquery Best Practices (20)

Último

Último (20)

Jquery Best Practices