Contextual jQuery

CONTEXTUAL jQuery

CONTEXTUAL jQuery Doug Neiner

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


JQUERY CODE STYLES
• Declarative

• Dynamic

• Contextual


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


DECLARATIVE

$(function () {
  var $container = $("#container"),
      $slider    = $("#slider"),
      $footer    = $("#footer");
  
  $("#toggle").click(function () {
    $container.toggle();
  });
  
  $slider.click(function () {
    $footer.html($slider.html());
  });
});


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


DYNAMIC

$(function () {
  var $container = $("#container");
  
  $("a.toggle").live("click", function (e) {
    $container.toggle();
    e.preventDefault();
  });
});


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

$("form a.submit").live("click", function (e) {
  e.preventDefault();
  $(this)
    .closest("form")
    .find(".errors").slideUp().end()
    .submit();
});


BENEFITS
of Contextual jQuery


BENEFITS
• Faster Flexible and More Responsive Code

• Focussed Use of Resources

• Less code

• Easier to maintain

• Easy to reuse


IMPLEMENTATION


THREE PARTS

Live Events
Traversal, Filters and Selectors
HTML Conventions


LIVE EVENTS


BOUND EVENTS
document

$("a").click( … ); <a> Click Handler

<a> Click Handler

<div#container>


LIVE EVENTS
document Click Handler

$("a") <a>
.live("click", … );

<a>

<div#container>


DELEGATE EVENTS
document

$("#container") <a>
.delegate("a",
   "click", … );

<a>

<div#container> Click Handler


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


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


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>


DETERMINE INITIALIZATION STATE
$("a[href^=contact]").live("click", function (e) {
  var dialog = $("#dialog");
  if(dialog.data("dialog"))
    dialog.dialog("open");
  else
    dialog.dialog(); 
});

$("a[href^=contact]").live("click", function (e) {
  var dialog = 
    $(document).data("dialog") || 
    $(document)
      .data("dialog", $("#dialog").dialog({autoOpen: false}))
      .data("dialog");
  dialog.dialog("open");
});


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.


TRAVERSAL, FILTERS
AND SELECTORS


TRAVERSAL METHODS
• prev • parents

• prevAll • parentsUntil

• prevUntil • offsetParent

• next • closest

• nextAll • children

• nextUntil • find

• siblings • end

• parent


BRITTLE VS FLEXIBLE

prev prevAll
next nextAll
parent closest
children ﬁnd


WHAT DOES THIS DO?

$("a").next("div")


TRY THIS INSTEAD

$("a").nextAll("div:first")


WHICH IS FASTER?

$(this)
 .closest("form")
 .nextAll("nav:first")
 .hide();

$("#form‐nav").hide()


FILTER METHODS
• filter

• eq

• first

• slice

• has

• not


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


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


WHICH IS FASTER?

$("a[href*=twitter.com]")

$("a.twitter")


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


HTML CONVENTIONS


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>
  


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!


DON'T THINK OF IDS AND
CLASSES AS YOUR FIRST LINE
OF ATTACK!


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>


EXAMPLE CODE
$("a[href$=preview], a[href$=edit]").live("click", function (e) {
  var $this = $(this),
      parts = $this.attr('href').split('/'),
      id = parts[2],
      action = parts[3],
      author = $this.closest("div").find("cite").html();

  if (action === "preview") {
    ...
  }
});


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


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.


TWITTER @dougneiner

EMAIL doug@dougneiner.com

WEB http://dougneiner.com


Contextual jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Contextual jQuery

Similar to Contextual jQuery (20)

Recently uploaded

Recently uploaded (20)

Contextual jQuery

Editor's Notes