SlideShare a Scribd company logo
JavaScript ‫עקרונות עיצוב מסמך‬
                                      ‫מציגה: הדר ויס‬




Google JavaScript Style Guide ‫*מבוסס על‬
‫שמות של משתנים‬

                            ‫שמות של משתנים, מחלקות ושיטות:‬
‫‪functionNamesLikeThis‬‬


                                     ‫שמות של ערכים קבועים:‬
‫‪CONSTANT_VALUES_LIKE_THIS‬‬
‫סוגריים מסולסלים‬

                   ‫יתחילו באותה השורה של מה שהם פותחים‬    ‫●‬
                                   ‫יסתיימו בשורה נפרדת‬    ‫●‬
                                              ‫רווח לפני‬   ‫●‬




‫{ )‪if (something‬‬
  ‫... //‬
‫{ ‪} else‬‬
  ‫... //‬
‫}‬
‫אתחול מערכים ואובייקטים‬

‫הכנסת נתונים לתוך מערך נעשית ברצף בשורה אחת כאשר האורך לא עולה על‬
                                                             :‫שורה‬

var arr = [1, 2, 3];




      :‫הכנסת נתונים לתוך מערך בשורות נפרדות כאשר האורך עולה על שורה‬

var arr = [
   '"Slartibartfast" <fjordmaster@magrathea.com>',
   '"Zaphod Beeblebrox" <theprez@universe.gov>',
   '"Ford Prefect" <ford@theguide.com>',
   '"Arthur Dent" <has.no.tea@gmail.com>',
   '"Marvin the Paranoid Android" <marv@googlemail.com>',
   'the.mice@magrathea.com'
];
‫אתחול מערכים ואובייקטים‬

                         :‫תמיד העדיפו לא ליישר את הטקסט של הרשימות‬

CORRECT_Object.prototype = {
   a: 0,
   b: 1,
   lengthyName: 2
};



WRONG_Object.prototype = {
   a          : 0,
   b          : 1,
   lengthyName: 2
};
‫פונקציות‬

  .‫כשאפשר, רצוי שכל רשימת המשתנים שפונקציה מקבלת תופיע בשורה אחת‬
      :‫אם זה לא מתאפשר, צריך לכתוב את הרשימה כך שתהיה קריאה וברורה‬

function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
             tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator)
{
  // ...
}



function bar(veryDescriptiveArgumentNumberOne,
             veryDescriptiveArgumentTwo,
             tableModelEventHandlerProxy,
             artichokeDescriptorAdapterIterator) {
  // ...
}
‫הזחה‬

 ‫כשקוד לא נכנס בשורה אחת אלא בכמה שורות, יש ליישר את הטקסט בשורות‬
         ‫הבאות לטקסט בשורה הראשונה, או להשתמש בהזחה של 4 רווחים.‬
                                              ‫הכל נכנס בשורה אחת:‬
‫;‪var x = a ? b : c‬‬



                                                     ‫הזחה של 4 רווחים:‬
‫? ‪var y = a‬‬
    ‫;‪longButSimpleOperandB : longButSimpleOperandC‬‬


                             ‫יישור למיקום תחילת הטקסט בשורה הראשונה:‬

‫? ‪var z = a‬‬
        ‫: ‪moreComplicatedB‬‬
        ‫;‪moreComplicatedC‬‬
‫שורות ריקות‬

         :‫השתמשו בשורות ריקות כדי ליצור "קבוצות" הגיוניות של קוד, למשל‬

doSomethingTo(x);
doSomethingElseTo(x);
andThen(x);

nowDoSomethingWith(y);

andNowWith(z);
‫שימוש במרכאות‬


  ‫עדיף להשתמש בגרש )'( מאשר במרכאות )"(, זה שימושי כאשר מעוניינים‬

                                        ‫ליצור ‪ string‬שכולל קוד ‪:HTML‬‬

‫;'>‪var myCode= '<canvas id="myCanvas" width="200"></canvas‬‬
‫כתיבת הערות‬

                                                  :JSDoc-‫מומלץ להשתמש ב‬

/**
 * A JSDoc comment should begin with a slash and 2 asterisks.
 * Inline tags should be enclosed in braces like {@code this}.
 * @desc Block tags should always start on their own line.
 */



/**
 * Illustrates line wrapping for long param/return descriptions.
 * @param {string} foo This is a param with a description too long to fit in
 *     one line.
 * @return {number} This returns something that has a description too long to
 *     fit in one line.
 */

More Related Content

Viewers also liked

סטנדרטים בכתיבת Css
סטנדרטים בכתיבת Cssסטנדרטים בכתיבת Css
סטנדרטים בכתיבת Csshadarw
 
IT HELPT DESK
IT HELPT DESKIT HELPT DESK
IT HELPT DESKpdubz
 
Low cost self driven car system
Low cost self driven car systemLow cost self driven car system
Low cost self driven car systemMadhawa Gunasekara
 
Customer interface - Business Ontology Model
Customer interface - Business Ontology ModelCustomer interface - Business Ontology Model
Customer interface - Business Ontology ModelMadhawa Gunasekara
 
Research: Automatic Diabetic Retinopathy Detection
Research: Automatic Diabetic Retinopathy DetectionResearch: Automatic Diabetic Retinopathy Detection
Research: Automatic Diabetic Retinopathy Detection
Madhawa Gunasekara
 
How to prepare Title and Abstract for Research Articles
How to prepare Title and Abstract for Research ArticlesHow to prepare Title and Abstract for Research Articles
How to prepare Title and Abstract for Research ArticlesMadhawa Gunasekara
 

Viewers also liked (9)

סטנדרטים בכתיבת Css
סטנדרטים בכתיבת Cssסטנדרטים בכתיבת Css
סטנדרטים בכתיבת Css
 
IT HELPT DESK
IT HELPT DESKIT HELPT DESK
IT HELPT DESK
 
Semiotics final
Semiotics finalSemiotics final
Semiotics final
 
Low cost self driven car system
Low cost self driven car systemLow cost self driven car system
Low cost self driven car system
 
Customer interface - Business Ontology Model
Customer interface - Business Ontology ModelCustomer interface - Business Ontology Model
Customer interface - Business Ontology Model
 
Research: Automatic Diabetic Retinopathy Detection
Research: Automatic Diabetic Retinopathy DetectionResearch: Automatic Diabetic Retinopathy Detection
Research: Automatic Diabetic Retinopathy Detection
 
Radix sorting
Radix sortingRadix sorting
Radix sorting
 
How to prepare Title and Abstract for Research Articles
How to prepare Title and Abstract for Research ArticlesHow to prepare Title and Abstract for Research Articles
How to prepare Title and Abstract for Research Articles
 
Audio compression
Audio compressionAudio compression
Audio compression
 

סטנדרטים בכתיבת Java script

  • 1. JavaScript ‫עקרונות עיצוב מסמך‬ ‫מציגה: הדר ויס‬ Google JavaScript Style Guide ‫*מבוסס על‬
  • 2. ‫שמות של משתנים‬ ‫שמות של משתנים, מחלקות ושיטות:‬ ‫‪functionNamesLikeThis‬‬ ‫שמות של ערכים קבועים:‬ ‫‪CONSTANT_VALUES_LIKE_THIS‬‬
  • 3. ‫סוגריים מסולסלים‬ ‫יתחילו באותה השורה של מה שהם פותחים‬ ‫●‬ ‫יסתיימו בשורה נפרדת‬ ‫●‬ ‫רווח לפני‬ ‫●‬ ‫{ )‪if (something‬‬ ‫... //‬ ‫{ ‪} else‬‬ ‫... //‬ ‫}‬
  • 4. ‫אתחול מערכים ואובייקטים‬ ‫הכנסת נתונים לתוך מערך נעשית ברצף בשורה אחת כאשר האורך לא עולה על‬ :‫שורה‬ var arr = [1, 2, 3]; :‫הכנסת נתונים לתוך מערך בשורות נפרדות כאשר האורך עולה על שורה‬ var arr = [ '"Slartibartfast" <fjordmaster@magrathea.com>', '"Zaphod Beeblebrox" <theprez@universe.gov>', '"Ford Prefect" <ford@theguide.com>', '"Arthur Dent" <has.no.tea@gmail.com>', '"Marvin the Paranoid Android" <marv@googlemail.com>', 'the.mice@magrathea.com' ];
  • 5. ‫אתחול מערכים ואובייקטים‬ :‫תמיד העדיפו לא ליישר את הטקסט של הרשימות‬ CORRECT_Object.prototype = { a: 0, b: 1, lengthyName: 2 }; WRONG_Object.prototype = { a : 0, b : 1, lengthyName: 2 };
  • 6. ‫פונקציות‬ .‫כשאפשר, רצוי שכל רשימת המשתנים שפונקציה מקבלת תופיע בשורה אחת‬ :‫אם זה לא מתאפשר, צריך לכתוב את הרשימה כך שתהיה קריאה וברורה‬ function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... } function bar(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... }
  • 7. ‫הזחה‬ ‫כשקוד לא נכנס בשורה אחת אלא בכמה שורות, יש ליישר את הטקסט בשורות‬ ‫הבאות לטקסט בשורה הראשונה, או להשתמש בהזחה של 4 רווחים.‬ ‫הכל נכנס בשורה אחת:‬ ‫;‪var x = a ? b : c‬‬ ‫הזחה של 4 רווחים:‬ ‫? ‪var y = a‬‬ ‫;‪longButSimpleOperandB : longButSimpleOperandC‬‬ ‫יישור למיקום תחילת הטקסט בשורה הראשונה:‬ ‫? ‪var z = a‬‬ ‫: ‪moreComplicatedB‬‬ ‫;‪moreComplicatedC‬‬
  • 8. ‫שורות ריקות‬ :‫השתמשו בשורות ריקות כדי ליצור "קבוצות" הגיוניות של קוד, למשל‬ doSomethingTo(x); doSomethingElseTo(x); andThen(x); nowDoSomethingWith(y); andNowWith(z);
  • 9. ‫שימוש במרכאות‬ ‫עדיף להשתמש בגרש )'( מאשר במרכאות )"(, זה שימושי כאשר מעוניינים‬ ‫ליצור ‪ string‬שכולל קוד ‪:HTML‬‬ ‫;'>‪var myCode= '<canvas id="myCanvas" width="200"></canvas‬‬
  • 10. ‫כתיבת הערות‬ :JSDoc-‫מומלץ להשתמש ב‬ /** * A JSDoc comment should begin with a slash and 2 asterisks. * Inline tags should be enclosed in braces like {@code this}. * @desc Block tags should always start on their own line. */ /** * Illustrates line wrapping for long param/return descriptions. * @param {string} foo This is a param with a description too long to fit in * one line. * @return {number} This returns something that has a description too long to * fit in one line. */