Contextual jQuery (2012)

9cde37f47e4a800ea081ea42de8d749a?s=47 Doug Neiner
February 10, 2012

Contextual jQuery (2012)

This was an updated version of my original Contextual jQuery talk from Boston 2010. The syntax has been updated for jQuery 1.7's `on` method. More examples were added, and some examples were changed to make the meaning more clear.

9cde37f47e4a800ea081ea42de8d749a?s=128

Doug Neiner

February 10, 2012
Tweet

Transcript

  1. CONTEXTUAL jQuery Doug Neiner CONTEXTUAL jQuery

  2. CONTEXTUAL jQuery Doug Neiner JQUERY CODE STYLES • Declarative •

    Dynamic • Contextual
  3. CONTEXTUAL jQuery Doug Neiner DECLARATIVE • Heavy use of ID’s

    • All traditional event binding • Often repeated code with slight variations • Changes to HTML often require changes to JS and vice versa. • Large number of selectors running on Document Ready
  4. CONTEXTUAL jQuery Doug Neiner DECLARATIVE $(  document  ).ready(  function  ()

     {    var  $form1  =  $(  "#form1"  ),            $form2  =  $(  "#form2"  );        $("#form1Submit").click(function  (  e  )  {        e.preventDefault();        $form1.submit();    });    $("#form2Submit").click(function  (  e  )  {        e.preventDefault();        $form2.submit();    }); });
  5. CONTEXTUAL jQuery Doug Neiner DYNAMIC • Heavy use of classes,

    simple selectors • Mixture of traditional event binding and delegated binding • Less repeated code • Changes to HTML still may require changes to JS • Many selectors still running on Document Ready
  6. CONTEXTUAL jQuery Doug Neiner DYNAMIC $(  document  ).ready(  function  ()

     {    var  $form1  =  $(  "#form1"  ),            $form2  =  $(  "#form2"  );        $(  "a.formSubmit"  ).click(  function  (  e  )  {        e.preventDefault();        if  (  this.id  ===  "form1Submit"  )  {            $form1.submit();        }  else  {            $form2.submit();        }    }); });
  7. CONTEXTUAL jQuery Doug Neiner CONTEXTUAL • Minimal use of ID’s,

    some classes • Leverages selectors and traversing • Very little repeated code • HTML follows a convention so edits require less changes to the JS • Virtually no selectors running on Document Ready
  8. CONTEXTUAL jQuery Doug Neiner CONTEXTUAL $(document).on("click",  "form  a.submit",  function  (e)

     {        e.preventDefault();        $(  this  )            .closest(  "form"  )            .submit();    } );
  9. CONTEXTUAL jQuery Doug Neiner BENEFITS of Contextual jQuery

  10. CONTEXTUAL jQuery Doug Neiner BENEFITS • Faster Flexible and More

    Responsible Code • Focussed Use of Resources • Less Code Overall • Easier to maintain • Easy to reuse
  11. CONTEXTUAL jQuery Doug Neiner IMPLEMENTATION

  12. CONTEXTUAL jQuery Doug Neiner IMPLEMENTATION Minimize Setup Delegated Events Traversal,

    Filters and Selectors HTML Conventions
  13. CONTEXTUAL jQuery Doug Neiner MINIMIZE SETUP • Use CSS classes

    to control states • Always opt for just-in-time initialization
  14. CONTEXTUAL jQuery Doug Neiner HANDLING INITIAL STATE <!DOCTYPE  html> <html

     class="no-­‐js"> <head>      <meta  charset="UTF-­‐8">      <title>Sample</title>      <style>            html.no-­‐js  .js,  html.js  .no-­‐js  {  display:  none  }      </style>      <script>          document.documentElement.className  =                document.documentElement.className.replace(  "no-­‐js",  "js"  );      </script> </head> <body>    <div  class="no-­‐js"><a  href="/about">Learn  About  Us</a></div>    <div  class="js">  Something  Amazing!  </div> </body>
  15. CONTEXTUAL jQuery Doug Neiner LEVERAGING MODERNIZR <a  class="find-­‐location"  href="#">Find  My

     Location</a> .find-­‐location  {  display:  none;  } .geolocation  .find-­‐location  {  display:  inline;  } if  (  Modernizr.geolocation  )  {      $(  document  ).on(  "click",  ".find-­‐location",  function  ()  {          …      }); }
  16. CONTEXTUAL jQuery Doug Neiner CREATE YOUR OWN <a  class="user-­‐action"  href="/account"

     >My  Account</a> .user-­‐action  {  display:  none;  } .signed-­‐in  .user-­‐action  {  display:  inline;  } function  authenticate()  {    //  Lots  of  important  code  here    $(  document  ).addClass(  "signed-­‐in"  ); }
  17. CONTEXTUAL jQuery Doug Neiner JUST IN TIME INITIALIZATION • Users

    don't generally use every part of every page all the time. • Set up areas of your page only when needed. • Leverage user actions or probable user actions as an indication of what to initialize.
  18. CONTEXTUAL jQuery Doug Neiner USER ACTIONS • click • mouseenter

    / mouseleave • scrolling • focusin / focusout • metrics
  19. CONTEXTUAL jQuery Doug Neiner DECLARATIVE DIALOG $(  document  ).ready(  function

     (e)  {      var  $contactDialog  =            $(  "#contact-­‐dialog"  ).dialog({  autoOpen:  false  });      $(  "#openContactForm"  ).click(  function  (  e  )  {          e.preventDefault();          $contactDialog.dialog(  "open"  );      }); });
  20. CONTEXTUAL jQuery Doug Neiner CONTEXTUAL DIALOG $(  document  ).on(  "click",

     "a[href^=contact]",  function  (e)  {    e.preventDefault();    var  $contactDialog  =  $(  "#contact-­‐dialog"  );      if  (  $contactDialog.data(  "dialog"  )  )  {          $contactDialog.dialog(  "open"  );    }  else  {          $contactDialog.dialog();    } });
  21. CONTEXTUAL jQuery Doug Neiner WRITE CODE LIKE YOU SPEND MONEY

    Opt to pay a little more later so you don't risk losing it all on something that never happens.
  22. CONTEXTUAL jQuery Doug Neiner DELEGATED EVENTS

  23. CONTEXTUAL jQuery Doug Neiner TRADITIONAL EVENTS <a> <div#container> document <a>

    Click Handler Click Handler $(  "a"  )    .bind("click",  …)
  24. CONTEXTUAL jQuery Doug Neiner DELEGATED EVENTS <a> <div#container> document <a>

    Click Handler $(  document  )    .on("click",  "a")
  25. CONTEXTUAL jQuery Doug Neiner DELEGATED EVENTS <a> <div#container> document <a>

    Click Handler $(  "#container"  )    .on("click",  "a")
  26. CONTEXTUAL jQuery Doug Neiner BOUND VS DELEGATED • Separate handler

    for each element • Executes only when event is triggered on bound elements • Elements can be retrieved ahead of time • Must be bound after the DOM is ready • Single handler for all elements • Checks event on every element in its context, and executes when a match is found • Elements should be retrieved at run time • Can be setup as soon as the context element is ready
  27. CONTEXTUAL jQuery Doug Neiner TRAVERSAL, FILTERS AND SELECTORS

  28. CONTEXTUAL jQuery Doug Neiner TRAVERSAL METHODS • prev • prevAll

    • prevUntil • next • nextAll • nextUntil • siblings • parent • parents • parentsUntil • offsetParent • closest • children • find • end
  29. CONTEXTUAL jQuery Doug Neiner BRITTLE VS FLEXIBLE prev next parent

    children prevAll nextAll closest find
  30. CONTEXTUAL jQuery Doug Neiner WORKING TRAVERSAL $(  document  ).on(  "click",

     "a.hideTile",  function  (e)  {    e.preventDefault();    $(  this  ).parent().hide(); }); <div  class="tile">      ...      <a  class="hideTile"  href="#">Hide</a>      ... </div>
  31. CONTEXTUAL jQuery Doug Neiner BROKEN TRAVERSAL $(  document  ).on(  "click",

     "a.hideTile",  function  (e)  {    e.preventDefault();    $(  this  ).parent().hide(); }); <div  class="tile">      ...      <p><a  class="hideTile"  href="#">Hide</a></p>      ... </div>
  32. CONTEXTUAL jQuery Doug Neiner WORKING TRAVERSAL $(  document  ).on(  "click",

     "a.hideTile",  function  (e)  {    e.preventDefault();    $(  this  ).closest(  ".tile"  ).hide(); }); <div  class="tile">      ...      <p><a  class="hideTile"  href="#">Hide</a></p>      ... </div>
  33. CONTEXTUAL jQuery Doug Neiner WHICH IS FASTER? $(this)  .closest("form")  .find(".errors")

     .hide(); $("#form-­‐errors").hide()
  34. CONTEXTUAL jQuery Doug Neiner FILTER METHODS • filter • eq

    • first • slice • has • not
  35. CONTEXTUAL jQuery Doug Neiner PRO TIP: NOT VS IS if(

     $(  this  ).not("a")  ){    alert("Why  does  this  work?"); } if(  $(  this  ).is(":not(a)")  ){    alert("This  won't  show...  phew!"); } //  or if(  !$(  this  ).is("a")  )  {  alert("This  won't  show  either!"); }
  36. CONTEXTUAL jQuery Doug Neiner SELECTORS • http://api.jquery.com/category/selectors/ • A few

    selectors • [name=word],  [name!=word] • [name^=word],  [name$=word] • .stacked.classes • div:has(a) • div,  a,  p
  37. CONTEXTUAL jQuery Doug Neiner WHICH IS FASTER? "a[href*=twitter.com]" "a.twitter"

  38. CONTEXTUAL jQuery Doug Neiner WRITE CODE LIKE YOU BUY A

    CAR Always weigh the difference between cost and quality.
  39. CONTEXTUAL jQuery Doug Neiner HTML CONVENTIONS

  40. CONTEXTUAL jQuery Doug Neiner CONVENTIONS ARE PATTERNS • You can

    build them yourself • They need to be consistent (or they aren't patterns) • They are a promise you make • They can change between projects • They need to work for you!
  41. CONTEXTUAL jQuery Doug Neiner KEEP YOUR MARKUP CLEAN <ul  class="records">

       <li>        <h2>My  song</h2>        <p  class="author">My  Author</p>        <nav>            <a  href="/song/5/preview">Preview</a>            <a  href="/song/5/edit">Edit  Song</a>        </nav>    </li>    <li>        <h2>My  song</h2>        <p  class="author">My  Author</p>        <nav>            <a  href="/song/12/preview">Preview</a>            <a  href="/song/12/edit">Edit  Song</a>        </nav>    </li> </ul>
  42. CONTEXTUAL jQuery Doug Neiner KEEP YOUR MARKUP CLEAN $(  document

     ).on("click",  "a[href$=preview],  a[href$=edit]",    function  (e)  {        e.preventDefault();        var  $this  =  $(this),                parts  =  $this.attr('href').split('/'),                id  =  parts[2],                action  =  parts[3],                author  =  $this.closest("li").find(".author").html();        if  (action  ===  "preview")  {            ...        }  else  {            ...        }    } );
  43. CONTEXTUAL jQuery Doug Neiner WRITE CODE LIKE YOU ASK FOR

    DIRECTIONS Try to get there on your own first!
  44. CONTEXTUAL jQuery Doug Neiner IN REVIEW • Don't spend resources

    early, strive for just-in-time wherever possible. • Don't be afraid to use complex selectors in the right settings. • Think twice before adding to your markup. See if there is another way first. • Always write your code with reusability in mind. Think in conventions as you work.
  45. CONTEXTUAL jQuery Doug Neiner @dougneiner doug@dougneiner.com http://dougneiner.com http://bit.ly/contextual-uk TWITTER EMAIL

    WEB SLIDES