HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Indentation and formatting for chained jQuery methods

Submitted by: @import:stackexchange-codereview··
0
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: $(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.