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