Using Objects to Organize your jQuery Code
55 likes20,577 views
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.
More Related Content
Viewers also liked (20)
Similar to Using Objects to Organize your jQuery Code (20)
More from Rebecca Murphey (15)
Recently uploaded (20)
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
Editor's Notes
- #6: jQuery gives developers a lot of freedom when it comes to structuring code; no hard-and-fast rules about right/wrong