Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Objects to Organize your jQuery Code

34,904 views

Published on

When you move beyond simple snippets of jQuery and start developing more complex interactions, your code can quickly become unwieldy and difficult to debug and maintain. In this presentation, I outline an object-based approach to organizing your jQuery.

Using Objects to Organize your jQuery Code

  1. 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
  2. me • Independent front-end architecture consultant in Durham, N.C. • @rmurphey on Twitter • http://www.rebeccamurphey.com Sunday, September 13, 2009
  3. why objects? Sunday, September 13, 2009
  4. jQuery is easy to write Sunday, September 13, 2009
  5. complex jQuery is easy to write badly Sunday, September 13, 2009
  6. a simple example Load some content when a list item is clicked; hide the content for sibling list items Sunday, September 13, 2009
  7. Sunday, September 13, 2009
  8. 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
  9. // 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(){
  10. omg wtf. SRRY MS Sunday, September 13, 2009
  11. 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
  12. 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
  13. no really • Features with ... • Multiple states • Multiple behaviors • Multiple points of interaction Sunday, September 13, 2009
  14. patterns Sunday, September 13, 2009
  15. object literal (singleton) • Simple setup • One instance per page • All methods and properties are public • May require initialization method Sunday, September 13, 2009
  16. Where are my privates!?!? Sunday, September 13, 2009
  17. module • Function returns an object • Self-initializing • Allows for private methods and properties Sunday, September 13, 2009
  18. Closures ftw Sunday, September 13, 2009
  19. IN UR JQUERY RITIN’ SOME OBJEX Sunday, September 13, 2009
  20. tips plz? Sunday, September 13, 2009
  21. • 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
  22. 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
  23. 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

×