コード設計→セパレーターファースト

これは、いくつかの短いセパレータで区切られたいくつかの式のセットがあり、複数の行に表示する必要がある場合に適用されます。



エジプトの伝統的な表現方法：

var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .

1. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
   
   
   
   

var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .

各行の最後には、最後を除いてカンマがあります-カンマがあってはならないことに注意してください。 問題は、コードを記述するプロセスを加速する場所で行を再配置したり、他のコピー＆ペーストを行う場合、カンマを注意深く監視する必要があり、カンマが表示されないため、必然的にエラーが発生することです。



最初に分離：

1. var userList =
2. [{名前： 'Tom' 、年齢：5、レース： '猫' }
3. 、{名前： 'Jerry' 、年齢：3、レース： 'マウス' }
4. 、{名前： 'スパイク' 、年齢：11、レース： '犬' }
5. ]

*このソースコードは、 ソースコードハイライターで強調表示されました。

ここでは、すべてのセパレーターが1行で表示され、一目でわかります。つまり、セパレーターの修正を忘れると、すぐに目が離せなくなります。

1. var userList =
2. 、{名前： 'Jerry' 、年齢：3、レース： 'マウス' }
3. [{名前： 'Tom' 、年齢：5、レース： '猫' }
4. 、{名前： 'スパイク' 、年齢：11、レース： '犬' }
5. ]

*このソースコードは、 ソースコードハイライターで強調表示されました。

ネストを追加します：

1. var userList = [
2. {
3. 名前： 'Tom' 、
4. 年齢：5
5. レース： 「猫」
6. }、
7. {
8. 名前： 'Jerry' 、
9. 年齢：3
10. レース： 「マウス」、
11. }、
12. {
13. 名前： 'Spike' 、
14. 年齢：11、
15. レース： 「犬」
16. }
17. ]
19. var userList =
20. [{name： 'Tom'
21. 、年齢：5
22. 、レース： 「猫」
23. }
24. 、{名前： 'ジェリー'
25. 、年齢：3
26. 、レース： 「マウス」
27. }
28. 、{名前： 'スパイク'
29. 、年齢：11
30. 、レース： 「犬」
31. }
32. ]

*このソースコードは、 ソースコードハイライターで強調表示されました。

区切り文字付きのバリアントでは、従来のバージョンとは対照的に、構文の忠実度が最初に大まかに一目で評価されます。 さらに、行末でランダムにジャンプするよりも、すべての区切り文字が同じレベルにある場合に編集する方が簡単です。



関数を呼び出すときに、同様の方法を適用できます。

1. anElement.AddEventListener
2. （ 「クリック」
3. 、 関数 （ イベント ）{
4. if （ event .button） trueを 返し ます
5. console.log（ イベント ）
6. 偽を返す
7. }
8. 偽
9. ）

*このソースコードは、 ソースコードハイライターで強調表示されました。

演算子間の区切り文字は改行文字であるため、エジプトの表記がコールバックの決定に使用されることに注意してください。改行文字は行の先頭に配置できません。 ただし、7列を分割しない場合は、次の操作を実行できます。

1. anElement.AddEventListener
2. （ 「クリック」
3. 、 関数 （ イベント ）
4. { if （ event .button） trueを 返す
5. ; console.log（ イベント ）
6. ; 偽を返す
7. }
8. 偽
9. ）

*このソースコードは、 ソースコードハイライターで強調表示されました。

しかし、区切り文字を気にせずにエジプト表記を使用する方が便利です。



異なるタブサイズに注意を払わない-構文ハイライターの作成者に対するすべての主張



エジプトのコードの1つにタイプミスがあることに気づいた人はいますか？ ;-)