Kosman on Better jQuery Code
24 Ways had one on writing less sucky jQuery and in the intro Scott Kosman talks about how its really easy to use jQuery to write spaghetti code. I've heard this term before, but never really knew what it meant other than the obvious implication that its something to avoid.
Wikipedia had this to say about spaghetti code:
Spaghetti code is a pejorative term for source code that has a complex and tangled control structure, especially one using many GOTOs, exceptions, threads, or other "unstructured" branching constructs.
There's also an example there written in BASIC that shows an
IF statement and
GOTO being used where a
FOR loop makes much more sense. So the term
spaghetti code is really just talking about hard to follow control flow.
With this distraction resolved, I got back to the article and learned some cool shit.
There are two ways of writing jQuery selectors that are always much faster than other ways:
and thus are super quick. The former uses
document.getElementById() and the
$('.class'); selector is going to be slow in browsers that don't support
document.getElementsByClassName(), so that's IE8 and below. Use it when you
are free to be a browser snob.
There's more to it that Scott goes into, but my take-away was: try to write
can't, at least try to use these faster selectors to get at a parent element and
then throw a
.find() on that to drill down further.
Oh and he reminds us that these selectors return a jQuery object that can be "cached" by setting it to a variable. So don't be a dick and write the same selector three times causing three DOM lookups, either chain your actions on the first lookup or save the first lookup in a variable and use it instead.
Then he goes into his second topic, Event Delegation. Here he demonstrates how
one might use delegation to improve performance by reducing 100 event listeners
to 1 with the
.on() event listener method introduced in jQuery 1.7. Cool
Finally, he goes into DOM Manipulation and we get a reminder on a much more performant way to iterate through a collection of image urls, create an element and append it to the DOM.