Kosman on Better jQuery Code
published Monday, January 2, 2012
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 a
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:
document.getElementById() and the latter uses
$('.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.
.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 stuff.
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.