CodingStyle

Nested Function Call Coding Style

When defining content via nested calls to element functions, it's easy to lose sight of where the commas which are required to seperate function call arguments are placed, leading to syntax errors if you forget one. Not a problem if you're using a syntax-checking IDE, but they can just feel so... heavy for JavaScript.

It's worth considering using comma-first style when creating structures of any size with element functions, as it makes it easier to detect missing commas with a quick scan of the code.

These code snippet use Template Mode, which will be coming in DOMBuilder 2.1, to deomstrate.

First, with trailing commas. To place a comma, you need to ask yourself "is this the last argument?". To validate that you've placed commas correctly by sight , you need to scan the staggered line endings while considering the contents of the following line:

$template({name: 'article_list', extends: 'article_base'},
  $block('content',
    DIV({'class': 'articles'},
      $for('article in articles',
        DIV({id: 'article{{ article.id }}'},
          H2('{{ article.title }}'),
          DIV({'class': 'body'},
            $html('{{ article.body }}')
          )
        ),
        'In Loop'
      ),
      'Out of Loop'
    ),
    'Out of Element'
  )
)

Now, with leading commas. The logic here is "is this this first argument?" - the main point of variance is whether or not you're passing an attributes argument. Note how commas line up with closing parentheses, closing parentheses never have a leading comma and the commas clearly delineate the nesting levels:

$template({name: 'article_list', extends: 'article_base'}
, $block('content'
  , DIV({'class': 'articles'}
    , $for('article in articles'
      , DIV({id: 'article{{ article.id }}'}
        , H2('{{ article.title }}')
        , DIV({'class': 'body'}
          , $html('{{ article.body }}')
          )
        )
      , 'In Loop'
      )
    , 'Out of Loop'
    )
  , 'Out of Element'
  )
)