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.

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