Оформление кода → Разделитель вначале

Применяется, когда у нас есть набор некоторых выражений, разделённых некоторым коротким разделителем, который нужно представить к несколько строк.

Традиционный египетский способ представления:

1. var userList= [
2.     { name: 'Tom', Age: 5, race: 'cat' },
3.     { name: 'Jerry', Age: 3, race: 'mouse' },
4.     { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Обратите внимание, что в конце каждой строчки стоит запятая, кроме последней — там запятой быть не должно. Проблема в том, что при перестановке строчек местами и прочей копипасте ускоряющей процесс написания кода, нужно очень внимательно следить за запятыми, а так как они не навиду, это неизбежно приводит к ошибке.

Представление с разделителем вначале:

1. var userList=
2. [  { name: 'Tom', Age: 5, race: 'cat' }
3. ,  { name: 'Jerry', Age: 3, race: 'mouse' }
4. ,  { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Тут все разделители идут в одну линию и охватываются одним взглядом, а значит, если забыть исправить какой-то разделитель — это сразу бросится в глаза:

1. var userList=
2. ,  { name: 'Jerry', Age: 3, race: 'mouse' }
3. [  { name: 'Tom', Age: 5, race: 'cat' }
4. ,  { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Теперь добавим вложенности:

1. var userList= [
2.     {
3.         name: 'Tom',
4.         Age: 5,
5.         race: 'cat'
6.     },
7.     {
8.         name: 'Jerry',
9.         Age: 3,
10.         race: 'mouse',
11.     },
12.     {
13.         name: 'Spike',
14.         Age: 11,
15.         race: 'dog'
16.     }
17. ]
18.  
19. var userList=
20. [   {    name: 'Tom'
21.     ,    Age: 5
22.     ,    race: 'cat'
23.     }
24. ,   {    name: 'Jerry'
25.     ,    Age: 3
26.     ,    race: 'mouse'
27.     }
28. ,   {    name: 'Spike'
29.     ,    Age: 11
30.     ,    race: 'dog'
31.     }
32. ]

* This source code was highlighted with Source Code Highlighter.

В варианте с разделителями вначале верность синтаксиса оценивается беглым взглядом, во отличие от традиционного варианта. Кроме того, редактировать проще, когда все разделители находятся на одном уровне, а не скачут как попало в конце строки.

Аналогичный метод можно применять и при вызове функций:

1. anElement.AddEventListener
2. (  'click'
3. ,  function( event ){
4.         if( event.button ) return true
5.         console.log( event )
6.         return false
7.    }
8. ,  false
9. )

* This source code was highlighted with Source Code Highlighter.

Обратите внимание, что для определения коллбэка используется египетская нотация, потому что между операторами разделителем является символ перевода строки, который в начале строки не поставишь. Хотя, если кому не влом ставить семиколон, то можно и так:

1. anElement.AddEventListener
2. (  'click'
3. ,  function( event )
4.    {  if( event.button ) return true
5.    ;  console.log( event )
6.    ;  return false
7.    }
8. ,  false
9. )

* This source code was highlighted with Source Code Highlighter.

Но удобней всё же использовать египетскую нотацию и не заморачиваться с разделителями.

не обращайте внимания на разный размер табуляции — все претензии к автору подсвечивателя синтаксиса

кто-нибудь заметил опечатку в одном из египетских кодах? ;-)