This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how ...
This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.
1) bind before DOM ready, events captured quickly 2) Purchase tickets to every conference in 2011 just in case you attend 3) Follow a convention to reduce your code. Why reconfigure code all the time.
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
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
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
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
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
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
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
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 first!
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 first.
• 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
Tri Vuong
2) Purchase tickets to every conference in 2011 just in case you attend
3) Follow a convention to reduce your code. Why reconfigure code all the time.