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.
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 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 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 BENEFITS • Faster Flexible and More Responsible Code • Focussed Use of Resources • Less Code Overall • Easier to maintain • Easy to reuse
CONTEXTUAL jQuery Doug Neiner CREATE YOUR OWN My
Account .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 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 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 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 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 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.
dougneiner
yumakann
os1ma
honma12345
koba04
pyama86
masuda220
syossan27
ivargrimstad
77web
rinchsan
yukana
umizaru
chriscoyier
aki_iinuma
shpigford
jasonvnalue
erikaheidi
jakevdp
panda_program
mraible
maltzj
lara
malarkey