Using Objects to Organize your jQuery Code

object laterals object literals using objects to organize your code jQuery Conference 2009 ~ Boston, MA @rmurphey ~ rebecca@rebeccamurphey.com http://blog.rebeccamurphey.com/organize-your-jquery/ Sunday, September 13, 2009

me • Independent front-end architecture consultant in Durham, N.C. • @rmurphey on Twitter • http://www.rebeccamurphey.com Sunday, September 13, 2009

why objects? Sunday, September 13, 2009

jQuery is easy to write Sunday, September 13, 2009

complex jQuery is easy to write badly Sunday, September 13, 2009

a simple example Load some content when a list item is clicked; hide the content for sibling list items Sunday, September 13, 2009

Sunday, September 13, 2009

the url needs to be configurable can we cache the content? what about back button support? animation is so web 2.0 let’s add a lightbox! doh, we forgot to mark the current list item Sunday, September 13, 2009

// NAVIGATION function togglePage(section) { // if the clicked section is already the current section AND we're in full page mode // minimize the current tab if (jQuery('#md_tab_'+ section).hasClass('current') && jQuery('#md_tab_'+ section + ' a').hasClass('md_fullpage')) { // alert('clicked section is current section AND fullpage mode is active; teaser should load'); // Minimize jQuery('#md_tabs_navigation a').removeClass('md_fullpage'); jQuery('.md_body').hide(); jQuery('#md_feature').slideDown('normal',function(){ var bodyContent = jQuery('#md_body_'+ section); bodyContent.fadeOut('normal',function(){ jQuery('#md_tabs_navigation a').each(function(){ var thisSection = jQuery(this).html().replace('<span<','').replace('</span<',''); var thisSection_comp = thisSection.toLowerCase().replace(' ','_'); jQuery('#md_body_'+ thisSection_comp).load( '/app/modules/info/loadTeaser.php?sect='+ thisSection_comp, function(){ tb_init('.md_body a.thickbox, .md_body area.thickbox, .md_body input.thickbox'); bodyContent.animate({ height: 'toggle', opacity: 'toggle' },"slow"); } ); }); }); }); jQuery('#expandtabs span').empty().append('Expand Tabs'); } else { // if the clicked section is NOT the current section OR we're NOT in full page mode // then let's go to full page mode and show the whole tab // Maximize // alert('clicked section is not the current section OR full page mode is not active; full section should load'); jQuery('#md_tabs_navigation li').removeClass('current'); jQuery('#md_tab_'+ section).addClass('current'); jQuery('#md_tabs_navigation a').addClass('md_fullpage'); jQuery('.md_body').hide(); jQuery('#md_feature').slideUp('normal',function(){ var bodyContent = jQuery('#md_body_'+ section); Sunday, September 13, 2009 bodyContent.fadeOut('normal',function(){

omg wtf. SRRY MS Sunday, September 13, 2009

a solution: objects • Keep the global namespace clean • Encapsulate separate behaviors in methods • Set configuration options outside methods • Self-document with good method names and small methods • Make methods available to other code Sunday, September 13, 2009

when does it make sense to use objects? • About an hour after you start trying to write a complex feature without them. Sunday, September 13, 2009

no really • Features with ... • Multiple states • Multiple behaviors • Multiple points of interaction Sunday, September 13, 2009

patterns Sunday, September 13, 2009

object literal (singleton) • Simple setup • One instance per page • All methods and properties are public • May require initialization method Sunday, September 13, 2009

Where are my privates!?!? Sunday, September 13, 2009

module • Function returns an object • Self-initializing • Allows for private methods and properties Sunday, September 13, 2009

Closures ftw Sunday, September 13, 2009

IN UR JQUERY RITIN’ SOME OBJEX Sunday, September 13, 2009

tips plz? Sunday, September 13, 2009

• Write stubs to sketch out your feature • Centralize configuration – minimize quoted strings in non-config code • Create methods for event handling • Allow for external configuration if it makes sense Sunday, September 13, 2009

awesome stuff we don’t have time for • Objects for managing code execution • Using object literals to define plugin submethods • Changing the meaning of “this” inside event handlers and opening up a world of win (native in 1.3.3?) • You should have been at Paul Irish’s talk Sunday, September 13, 2009

thanks. • http://blog.rebeccamurphey.com/ organize-your-jquery/ • Rate this talk: http://speakerrate.com/ talks/1423 • Thanks to Paul Irish, Chris Williams, Victor Hong, Brian Mitchell, Ben Alman, and the folks in #jquery-ot Sunday, September 13, 2009

http://blog.rebeccamurphey.com	1100
http://coderwall.com	300
http://jsconflive.com	299
http://www.jsconflive.com	277
http://onwebdev.blogspot.com	210
http://www.slideshare.net	52
http://www.codedodger.com	16
http://blog.gabrieleromanato.com	14
http://onwebdev.blogspot.co.uk	10
http://feeds.feedburner.com	9
http://prakashsource.blogspot.com	7
http://onwebdev.blogspot.com.au	6
http://onwebdev.blogspot.com.es	5
http://onwebdev.blogspot.com.br	5
http://prakashsource.blogspot.in	3
http://staging.jsconflive.com	3
http://us-w1.rockmelt.com	2
http://onwebdev.blogspot.ca	2
http://onwebdev.blogspot.in	2
http://onwebdev.blogspot.com.ar	1
http://onwebdev.blogspot.be	1
http://onwebdev.blogspot.hu	1
http://posterous.com	1
http://onwebdev.blogspot.fr	1
http://onwebdev.blogspot.kr	1

Using Objects to Organize your jQuery Code

by Rebecca Murphey on Sep 12, 2009

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 2,328

Statistics

Using Objects to Organize your jQuery Code Presentation Transcript