patternjavascriptMinor
Indentation and formatting for chained jQuery methods
Viewed 0 times
formattingindentationmethodsjquerychainedforand
Problem
Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.
I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form:
Here is my specific code and the formatting/indentation that I've come up with:
Is there a more readable way of indenting this?
I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form:
$(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });Here is my specific code and the formatting/indentation that I've come up with:
$('.footnote[id^="ret_"]')
.removeAttr('title')
.removeAttr('alt')
.mouseenter(function(e) {
var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
$footnoteTooltip.stop(true, false);
//only completely hide and change text/position if we are hovering over a different footnote
if($footnoteTooltip.html() != footnote)
$footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
$footnoteTooltip.fadeTo(fadeTime, opacity);
})
.mouseleave(function() {
$footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
})
;Is there a more readable way of indenting this?
Solution
My suggestion:
$('.footnote[id^="ret_"]')
.removeAttr('title')
.removeAttr('alt')
.mouseenter(function(e) {
var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
$footnoteTooltip.stop(true, false);
//only completely hide and change text/position if we are hovering over a different footnote
if($footnoteTooltip.html() != footnote)
$footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
$footnoteTooltip.fadeTo(fadeTime, opacity);
}).mouseleave(function() {
$footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
});- Three or four spaces indentation - your preference. My opinion is that two spaces is more difficult to read (although Lisp uses it).
- Semicolon on same line as last method call. The only time I approve of having it on it's own line is an empty
while.
}).mouseLeave()I put the call on the same line as the end of the block to make it clear that you're calling the method of the object returned.
Code Snippets
$('.footnote[id^="ret_"]')
.removeAttr('title')
.removeAttr('alt')
.mouseenter(function(e) {
var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
$footnoteTooltip.stop(true, false);
//only completely hide and change text/position if we are hovering over a different footnote
if($footnoteTooltip.html() != footnote)
$footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
$footnoteTooltip.fadeTo(fadeTime, opacity);
}).mouseleave(function() {
$footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
});Context
StackExchange Code Review Q#1957, answer score: 7
Revisions (0)
No revisions yet.