Contextual jQuery

CONTEXTUAL jQuery CONTEXTUAL jQuery Doug Neiner

CONTEXTUAL jQuery Doug Neiner

PRE-OPTIMIZATION IS REALLY, REALLY BAD But super easy to get caught up in. CONTEXTUAL jQuery Doug Neiner

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

DECLARATIVE • Heavy use of ID’s, some classes, simple selectors • 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 $(function () {   var $container = $("#container"),       $slider    = $("#slider"),       $footer    = $("#footer");      $("#toggle").click(function () {     $container.toggle();   });      $slider.click(function () {     $footer.html($slider.html());   }); }); CONTEXTUAL jQuery Doug Neiner

DYNAMIC • Heavy use of classes, simple selectors • Mixture of traditional binding and live/delegate 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 $(function () {   var $container = $("#container");      $("a.toggle").live("click", function (e) {     $container.toggle();     e.preventDefault();   }); }); CONTEXTUAL jQuery Doug Neiner

CONTEXTUAL • Heavy use of selectors and traversing • Minimal use of ID’s or classes • 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 $("form a.submit").live("click", function (e) {   e.preventDefault();   $(this)     .closest("form")     .find(".errors").slideUp().end()     .submit(); }); CONTEXTUAL jQuery Doug Neiner

BENEFITS of Contextual jQuery CONTEXTUAL jQuery Doug Neiner

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

IMPLEMENTATION CONTEXTUAL jQuery Doug Neiner

THREE PARTS Live Events Traversal, Filters and Selectors HTML Conventions CONTEXTUAL jQuery Doug Neiner

LIVE EVENTS CONTEXTUAL jQuery Doug Neiner

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

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

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

BIND VS LIVE • Separate handler for each • Single handler for all element elements • Executes only when event • Checksevent on every is triggered on bound element in its context, and elements executes when a match is found • Elements can be retrieved ahead of time • Elements should be retrieved at run time • Mustbe bound after the DOM is ready • Can be setup at any time CONTEXTUAL jQuery Doug Neiner

WHAT ABOUT INITIALIZATION? • Keep the setup minimal • Use CSS and js/no-js classes • Use selectors or data to determine initialization state • Always opt for just-in-time initialization CONTEXTUAL jQuery Doug Neiner

JS/NO-JS <!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

DETERMINE INITIALIZATION STATE $("a[href^=contact]").live("click", function (e) {   e.preventDefault();   var dialog = $("#dialog");   if(dialog.data("dialog"))     dialog.dialog("open");   else     dialog.dialog();  }); $("a[href^=contact]").live("click", function (e) {   e.preventDefault();   var dialog =      $(document).data("dialog") ||      $(document)       .data("dialog", $("#dialog").dialog({autoOpen: false}))       .data("dialog");   dialog.dialog("open"); }); 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

TRAVERSAL, FILTERS AND SELECTORS CONTEXTUAL jQuery Doug Neiner

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

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

WHAT DOES THIS DO? $("a").next("div") CONTEXTUAL jQuery Doug Neiner

TRY THIS INSTEAD $("a").nextAll("div:first") CONTEXTUAL jQuery Doug Neiner

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

WHICH IS FASTER? $(this)  .closest("form")  .nextAll("nav:first")  .hide(); $("#form‐nav").hide() CONTEXTUAL jQuery Doug Neiner

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

NOT VS IS if( $("a").not("a") ){   alert("Why does this work?"); } if( $("a").is(":not(a)") ){   alert("This won't show... phew!"); } // or if( !$("a").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

SEMANTIC HTML <div>   <p class="post‐title">My Article</p>   <p class="post‐author">Doug Neiner</p>      <p>Hi there!</p>   <p class="post‐quote">My quote!</p> </div>    <div class="post">   <h2>My Article</h2>   <cite>Doug Neiner</cite>      <p>Hi there!</p>   <blockquote>My quote!</blockquote> </div>    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

DON'T THINK OF IDS AND CLASSES AS YOUR FIRST LINE OF ATTACK! CONTEXTUAL jQuery Doug Neiner

KEEP YOUR MARKUP CLEAN <div class="record">   <h2>My song</h2>   <cite>My Author</cite>   <nav>     <a href="/song/5/preview">Preview</a>     <a href="/song/5/edit">Edit Song</a>   </nav> </div> <div class="record">   <h2>My song</h2>   <cite>My Author</cite>   <nav>     <a href="/song/12/preview">Preview</a>     <a href="/song/12/edit">Edit Song</a>   </nav> </div> CONTEXTUAL jQuery Doug Neiner

EXAMPLE CODE $("a[href$=preview], a[href$=edit]").live("click", function (e) {   e.preventDefault();   var $this = $(this),       parts = $this.attr('href').split('/'),       id = parts[2],       action = parts[3],       author = $this.closest("div").find("cite").html();   if (action === "preview") {     ...   } }); 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 IDs or classes 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

TWITTER @dougneiner EMAIL doug@dougneiner.com WEB http://dougneiner.com CONTEXTUAL jQuery Doug Neiner

http://dougneiner.com	22595
http://speakerrate.com	357
http://feeds.feedburner.com	127
http://www.tumblr.com	73
http://translate.googleusercontent.com	35
http://localhost	32
http://safe.tumblr.com	31
http://ravisarraf.co.cc	23
http://www.weebly.com	11
http://xgalihx.tumblr.com	10
http://nickarabia.tumblr.com	9
http://christianberenguer.com	8
http://www.syamdas.in	8
http://engenhocadesign.tumblr.com	8
http://us-w1.rockmelt.com	5
http://webcache.googleusercontent.com	4
http://mooremag.tumblr.com	4
http://destinylovesangel.tumblr.com	3
http://jeditakingtheoneringtohogwarts.tumblr.com	3
http://thefreakingboy.tumblr.com	3
http://goblin-grenade.tumblr.com	2
http://amitmelkor.tumblr.com	2
http://majanudin.tumblr.com	2
http://jennylyngines.webs.com	2
http://a0.twimg.com	2
http://paper.li	2
https://si0.twimg.com	1
http://dwarakesh.tumblr.com	1
http://jan-g.tumblr.com	1
http://kaleazy.com	1
http://gotdamed.tumblr.com	1
http://lashockshop.tumblr.com	1
http://tech-vostro-1015	1
http://ie6test.it	1
http://static.slidesharecdn.com	1

Contextual jQuery

by Doug Neiner on Oct 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

35 Embeds 23,370

Statistics

Contextual jQuery — Presentation Transcript