object laterals
                               object literals
                               using objects
              ...
me
                   •         Independent front-end architecture
                             consultant in Durham, N.C....
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 c...
Sunday, September 13, 2009
the url needs to be configurable
          can we cache the content?
   what about back button support?
                  ...
// NAVIGATION
              function togglePage(section) {
                       // if the clicked section is already the...
omg wtf.
                               SRRY MS
Sunday, September 13, 2009
a solution:
                                          objects
                   •         Keep the global namespace clean...
when does it make
                   sense to use objects?

                   •         About an hour after you start try...
no really
                   •         Features with ...
                         •     Multiple states
                  ...
patterns



Sunday, September 13, 2009
object literal
                                   (singleton)
                   •         Simple setup
                  ...
Where are my privates!?!?
Sunday, September 13, 2009
module
                   •         Function returns an object
                   •         Self-initializing
            ...
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
               st...
awesome stuff we
                         don’t have time for
                   •         Objects for managing code execu...
thanks.
                   •         http://blog.rebeccamurphey.com/
                             organize-your-jquery/
  ...
Upcoming SlideShare
Loading in...5
×

Using Objects to Organize your jQuery Code

24,955

Published on

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.

3 Comments
52 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,955
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
3
Likes
52
Embeds 0
No embeds

No notes for slide
  • jQuery gives developers a lot of freedom when it comes to structuring code; no hard-and-fast rules about right/wrong
  • Transcript of "Using Objects to Organize your jQuery Code"

    1. 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. 2. me • Independent front-end architecture consultant in Durham, N.C. • @rmurphey on Twitter • http://www.rebeccamurphey.com Sunday, September 13, 2009
    3. 3. why objects? Sunday, September 13, 2009
    4. 4. jQuery is easy to write Sunday, September 13, 2009
    5. 5. complex jQuery is easy to write badly Sunday, September 13, 2009
    6. 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. 7. Sunday, September 13, 2009
    8. 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. 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. 10. omg wtf. SRRY MS Sunday, September 13, 2009
    11. 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. 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. 13. no really • Features with ... • Multiple states • Multiple behaviors • Multiple points of interaction Sunday, September 13, 2009
    14. 14. patterns Sunday, September 13, 2009
    15. 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. 16. Where are my privates!?!? Sunday, September 13, 2009
    17. 17. module • Function returns an object • Self-initializing • Allows for private methods and properties Sunday, September 13, 2009
    18. 18. Closures ftw Sunday, September 13, 2009
    19. 19. IN UR JQUERY RITIN’ SOME OBJEX Sunday, September 13, 2009
    20. 20. tips plz? Sunday, September 13, 2009
    21. 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. 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. 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

    ×