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 ...
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 CodePresentation Transcript
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
1–3 of 3 previous next Post a comment