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
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(){
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
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
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
Notes de l'éditeur
jQuery gives developers a lot of freedom when it comes to structuring code; no hard-and-fast rules about right/wrong