Contextual jQuery (2012)

CONTEXTUAL jQuery Doug Neiner CONTEXTUAL jQuery

CONTEXTUAL jQuery Doug Neiner JQUERY CODE STYLES • Declarative •
Dynamic • Contextual

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

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(); }); });

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

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(); } }); });

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

CONTEXTUAL jQuery Doug Neiner CONTEXTUAL $(document).on("click", "form a.submit", function (e)
{ e.preventDefault(); $( this ) .closest( "form" ) .submit(); } );

CONTEXTUAL jQuery Doug Neiner BENEFITS of Contextual jQuery

CONTEXTUAL jQuery Doug Neiner BENEFITS • Faster Flexible and More
Responsible Code • Focussed Use of Resources • Less Code Overall • Easier to maintain • Easy to reuse

CONTEXTUAL jQuery Doug Neiner IMPLEMENTATION

CONTEXTUAL jQuery Doug Neiner IMPLEMENTATION Minimize Setup Delegated Events Traversal,
Filters and Selectors HTML Conventions

CONTEXTUAL jQuery Doug Neiner MINIMIZE SETUP • Use CSS classes
to control states • Always opt for just-in-time initialization

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>

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 () { … }); }

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" ); }

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.

CONTEXTUAL jQuery Doug Neiner USER ACTIONS • click • mouseenter
/ mouseleave • scrolling • focusin / focusout • metrics

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" ); }); });

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(); } });

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.

CONTEXTUAL jQuery Doug Neiner DELEGATED EVENTS

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

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

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

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

CONTEXTUAL jQuery Doug Neiner TRAVERSAL, FILTERS AND SELECTORS

CONTEXTUAL jQuery Doug Neiner TRAVERSAL METHODS • prev • prevAll
• prevUntil • next • nextAll • nextUntil • siblings • parent • parents • parentsUntil • offsetParent • closest • children • find • end

CONTEXTUAL jQuery Doug Neiner BRITTLE VS FLEXIBLE prev next parent
children prevAll nextAll closest ﬁnd

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>

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>

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>

CONTEXTUAL jQuery Doug Neiner WHICH IS FASTER? $(this) .closest("form") .find(".errors")
.hide(); $("#form-‐errors").hide()

CONTEXTUAL jQuery Doug Neiner FILTER METHODS • filter • eq
• first • slice • has • not

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!"); }

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

CONTEXTUAL jQuery Doug Neiner WHICH IS FASTER? "a[href*=twitter.com]" "a.twitter"

CONTEXTUAL jQuery Doug Neiner WRITE CODE LIKE YOU BUY A
CAR Always weigh the difference between cost and quality.

CONTEXTUAL jQuery Doug Neiner HTML CONVENTIONS

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!

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>

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 { ... } } );

CONTEXTUAL jQuery Doug Neiner WRITE CODE LIKE YOU ASK FOR
DIRECTIONS Try to get there on your own ﬁrst!

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 ﬁrst. • Always write your code with reusability in mind. Think in conventions as you work.

CONTEXTUAL jQuery Doug Neiner @dougneiner [email protected] http://dougneiner.com http://bit.ly/contextual-uk TWITTER EMAIL
WEB SLIDES

Contextual jQuery (2012)

Contextual jQuery (2012)

More Decks by Doug Neiner

Other Decks in Programming

Featured

Transcript