As I was cleaning up my jQuery code, I came across some jQuery syntax that I wasn't sure how to format. In my app, I have a lot of jQuery Mobile pages that have event handlers attached to them. At the moment, I have two formats, but I wanted to unify these formats for consistency. The first looks like this: [sourcecode lang="javascript"] manOpsPage.data('sideButtonsClass', '.ui-btn-text');
manOpsPage.bind('pagebeforeshow', function () { $(document).bind('keydown.side-buttons', 'e', function () { $('#label-6').click(); }); });
manOpsPage.bind('pagehide', function () { var radioButtons =
$('#manual-operations input[type="radio"]'); radioButtons.prop('checked', false); $('#radio-lap').prop('checked',
true); radioButtons.checkboxradio('refresh'); });[/sourcecode] The second uses
jQuery chaining syntax, which takes advantage of the fact that jQuery selections
return the object, so I have chained my calls to
bind together: [sourcecode lang="javascript"]
$('div[data-role="page"]').bind('pagebeforeshow',
function (e, ui) {
ASCTD.setupSideButtons($(this));
}).bind('pagehide', function (e, ui) {
ASCTD.removeSideButtons($(this));
}).bind('waitingForSequence', function () { if (ASCTD.uar.blocks[0].id === 21)
{ // We got a subtest complete sequence, so we are done. return; }
$.mobile.showPageLoadingMsg(); }).bind('sequenceStarted', function () {
$.mobile.hidePageLoadingMsg(); });[/sourcecode] Initially, I was planning on
converting all the syntax to the latter formatting, since it is more compact.
But as I continued on this path, I became less and less enamored with how the
syntax looked and "felt." The compact nature actually made it less readable. And
I noticed that refactoring this code was a little harder (e.g., removing a link
in the chain), since selecting the link required a bit of precision--I had to
get go from one close paren to the next period, both of which were in the middle
of a line.
An oft-cited advantage of using chaining is that it significantly improves performance. But since I am already caching the jQuery selection, this point wasn't relevant.
In the end, I decided to go for readability over condensed code. Using jQuery chaining seemed clever at first, but there turned out to be little benefit. At this point, I'm not concerned with saving bytes, and I figure that's what compressors and minifiers are for...
Bonus: Even though I won't be using chaining in this case, along the way I
did learn about the end() method, which allows
you to
continue chaining by reverting to the previous selection
once you've drilled down in the chain.