🚘 👩‍🎓 🙎 دليل جافا سكريبت الجزء الثاني: نمط الرمز وهيكل البرنامج 💃🏿 🎇 ♣️

ننشر اليوم ترجمة للجزء التالي من دليل جافا سكريبت. هنا نتحدث عن نمط الكود والبنية المعجمية للبرامج.

→ الجزء الأول: البرنامج الأول وميزات اللغة والمعايير
→ الجزء الثاني: نمط الكود وهيكل البرنامج
→ الجزء الثالث: المتغيرات وأنواع البيانات والتعبيرات والكائنات
→ الجزء 4: الميزات
→ الجزء الخامس: المصفوفات والحلقات
← الجزء السادس: الاستثناءات ، الفاصلة المنقوطة ، حرفية أحرف البدل
→ الجزء 7: الوضع الصارم ، هذه الكلمة الرئيسية ، والأحداث ، والوحدات ، والحسابات الرياضية
→ الجزء الثامن: نظرة عامة على ميزات ES6
→ الجزء التاسع: نظرة عامة على معايير ES7 و ES8 و ES9

أسلوب البرمجة

"نمط البرمجة" أو "معيار الترميز" أو "نمط التعليمات البرمجية" هو مجموعة من الاصطلاحات المستخدمة في كتابة البرامج. أنها تحكم ميزات تصميم التعليمات البرمجية وإجراءات استخدام الإنشاءات الغامضة. في حالتنا ، نحن نتحدث عن البرامج المكتوبة بلغة جافا سكريبت. إذا كان المبرمج يعمل في مشروع معين بنفسه ، فإن نمط الكود الذي يستخدمه يمثل "عقده" مع نفسه. إذا كنا نتحدث عن فريق ، فهذه اتفاقيات يستخدمها جميع أعضاء الفريق. الكود المكتوب باستخدام مجموعة معينة من القواعد يجعل قاعدة الكود الخاصة ببرنامج مشروع موحد ، ويحسن إمكانية قراءة الكود وفهمه.

هناك العديد من أدلة الأسلوب. فيما يلي 2 منها الأكثر استخدامًا في عالم JavaScript:

يمكنك اختيار أي منها أو وضع القواعد الخاصة بك. أهم شيء هو استخدام نفس القواعد باستمرار عند العمل على مشروع معين. علاوة على ذلك ، إذا كنت ، على سبيل المثال ، تلتزم بمجموعة واحدة من القواعد ، وفي مشروع قائم تحتاج إلى العمل عليه ، يتم استخدام القواعد الخاصة بك ، يجب عليك الالتزام بقواعد المشروع.

يمكنك تنسيق الكود يدويًا ، أو يمكنك استخدام أدوات الأتمتة لهذه العملية. في الواقع ، يعد تنسيق رمز JS والتحقق منه قبل الإطلاق موضوعًا كبيرًا منفصلًا. فيما يلي أحد منشوراتنا المخصصة للأدوات ذات الصلة وميزات استخدامها.

النمط المستخدم في هذا الدليل

يستشهد مؤلف هذه المادة ، كمثال على دليل أسلوبه الخاص ، بمجموعة من القواعد التي يحاول اتباعها عند كتابة التعليمات البرمجية. يقول إن الكود في الأمثلة يركز على أحدث نسخة من المعيار ، والمتوفرة في الإصدارات الحديثة من المتصفحات. هذا يعني أنه لتشغيل مثل هذا الرمز في المتصفحات القديمة ، ستحتاج إلى استخدام محول مثل Babel . تتيح لك JS transpilers تحويل الشفرة المكتوبة باستخدام الميزات الجديدة للغة بحيث يمكن تشغيلها في المتصفحات التي لا تدعم هذه الميزات الجديدة. يمكن للناقل أن يوفر الدعم لميزات اللغة التي ليست قياسية حتى الآن ، أي لم يتم تنفيذها حتى في أحدث المتصفحات.

هنا قائمة القواعد المعنية.

المحاذاة. لمحاذاة كتل التعليمات البرمجية ، يتم استخدام المسافات (مسافتان لكل مستوى من المحاذاة) ، لا يتم استخدام علامات التبويب.
فاصلة منقوطة. لا يتم استخدام الفاصلة المنقوطة.
طول الخط 80 حرفًا (إن أمكن).
تعليقات سطر واحد. يتم استخدام هذه التعليقات في المدونة.
تعليقات متعددة الأسطر. يتم استخدام هذه التعليقات لتوثيق التعليمات البرمجية.
كود غير مستخدم. لا يبقى الرمز غير المستخدم في البرنامج الذي تم التعليق عليه في حال احتجت إليه لاحقًا. يمكن العثور على مثل هذا الرمز ، إذا كان لا يزال مطلوبًا ، في نظام التحكم في الإصدار ، إذا تم استخدامه ، أو في شيء مثل ملاحظات مبرمج مصممة لتخزين مثل هذا الرمز.
قواعد التعليق. لا حاجة للتعليق على الأشياء الواضحة ، أضف التعليقات إلى الشفرة التي لا تساعد على فهم جوهرها. إذا كانت الشفرة تفسر نفسها بفضل أسماء ومتغيرات الوظائف المختارة جيدًا وأوصاف JSDoc للوظائف ، فلا يجب عليك إضافة تعليقات إضافية إلى هذا الرمز.
إعلان متغير. يتم الإعلان عن المتغيرات دائمًا بشكل صريح لمنع تلوث كائن عالمي. لم يتم استخدام الكلمة var . إذا لم يكن من المخطط تغيير قيمة متغير أثناء تنفيذ البرنامج ، فسيتم الإعلان عنه في شكل ثابت (غالبًا ما تسمى الثوابت المتشابهة أيضًا "متغيرات") باستخدام الكلمة الأساسية const ، واستخدامها بشكل افتراضي - باستثناء الحالات التي يتم فيها التخطيط لتغيير قيمة متغير. في مثل هذه الحالات ، يتم استخدام الكلمة let .
الثوابت إذا كانت بعض القيم في البرنامج ثوابت ، فإن أسمائها تتكون من أحرف كبيرة. على سبيل المثال ، CAPS . تُستخدم الشرطة السفلية ( _ ) لفصل أجزاء الأسماء التي تتكون من عدة كلمات.
وظائف تستخدم تعريفات الدوال بناء جملة للسهم. لا تنطبق إعلانات الوظائف العادية إلا في حالات خاصة. على وجه الخصوص ، في أساليب الأشياء أو في المصممين. يتم ذلك بسبب ميزات this . يجب الإعلان عن الوظائف باستخدام الكلمة الأساسية const ، وإذا أمكن ، فمن الضروري إرجاع نتائج عملهم بشكل صريح منها. لا يُحظر استخدام الوظائف المتداخلة لإخفاء بعض الآليات المساعدة من الشفرة الرئيسية.

فيما يلي مثال على زوج من وظائف الأسهم البسيطة:

 const test = (a, b) => a + b const another = a => a + 2

كيانات التسمية. دائمًا ما تبدأ أسماء الوظائف والمتغيرات وأساليب الكائنات بحرف صغير ، ويتم كتابة الأسماء التي تتكون من عدة كلمات باستخدام نمط الجمل (أسماء مثل camelCase ). تبدأ فقط أسماء وظائف وفئات المُنشئ بحرف كبير. إذا كنت تستخدم إطار عمل يحتوي على متطلبات خاصة لكيانات التسمية ، فاستخدم القواعد التي ينص عليها. يجب أن تتكون أسماء الملفات من أحرف صغيرة ، ويتم فصل الكلمات المنفصلة في الأسماء بشرطة ( - ).
قواعد إنشاء وتنسيق التعبيرات.

إذا . فيما يلي بعض الطرق لكتابة if شرطية if :

 if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }

ل . لتنظيم الحلقات ، يتم استخدام المعيار للبناء ، ويرد مثال على ذلك أدناه ، أو للحلقة. for in .hasOwnProperty() يجب تجنبها - ما لم يتم استخدامها مع بناء .hasOwnProperty() . هنا هو مخطط حلقة:

 for (initialization; condition; update) { statements }

بينما . فيما يلي مثال تخطيطي while :

 while (condition) { statements }

افعل . هنا هيكل حلقة do :

 do { statements } while (condition);

التبديل . فيما يلي رسم تخطيطي لعبارة switch الشرطية:

 switch (expression) { case expression:   statements default:   statements }

حاول . فيما يلي بعض خيارات التصميم لتكوين try-catch . يوضح المثال الأول هذا البناء بدون كتلة أخيرة ، والثاني بمثل هذه الكتلة.

 try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }

المساحات . يجب استخدام المسافات بحكمة ، أي أنها تساهم في تحسين قراءة التعليمات البرمجية. لذلك ، يتم وضع المسافات بعد الكلمات الرئيسية متبوعة بأقواس افتتاحية ، وهي محاطة بعوامل تنطبق على معاملين ( + ، - ، / ، * ، && وغيرها). يتم استخدام المسافات داخل الحلقة للحلقة ، بعد كل فاصلة منقوطة ، لفصل أجزاء رأس الحلقة عن بعضها البعض. يتم وضع مسافة بعد الفاصلة.
أسطر فارغة . تشير الأسطر الفارغة إلى كتل التعليمات البرمجية التي تحتوي على العمليات المتصلة منطقياً مع بعضها البعض.
علامات الاقتباس . عند العمل مع السلاسل ، يتم استخدام علامات الاقتباس المفردة ( ' ) ، وليس علامات الاقتباس المزدوجة ( " ). عادة ما يتم العثور على علامات الاقتباس المزدوجة في سمات HTML ، لذا فإن استخدام علامات الاقتباس المفردة يساعد على تجنب المشاكل عند العمل مع سلاسل HTML. إذا كنت بحاجة إلى تنفيذ بعض العمليات باستخدام السلاسل ، فهذا يعني ، على سبيل المثال ، يجب استخدام حِرَف القالب المتسلسل ، والتي يتم رسمها باستخدام backticks ( ` ).

البنية المعجمية لشفرة جافا سكريبت

لنتحدث عن اللبنات الأساسية لكود جافا سكريبت. على وجه الخصوص ، حول استخدام ترميز Unicode ، حول الفواصل المنقوطة ، المسافات ، حول حساسية اللغة لحالة الأحرف ، حول التعليقات ، حول الحرف ، حول المعرفات وحول الكلمات المحجوزة.

nicUnicode

يتم تمثيل رمز JavaScript باستخدام ترميز Unicode. هذا ، على وجه الخصوص ، يعني أنه في الكود ، يمكنك استخدام ، على سبيل المثال ، رموز تعبيرية كأسماء متغيرة. للقيام بذلك ، بالطبع ، لا ينصح. من المهم هنا أن تتم كتابة أسماء المعرفات ، وفقًا لقواعد معينة ، بأي لغة ، على سبيل المثال ، باللغة اليابانية أو الصينية.

▍ فاصلة منقوطة

يشبه بناء جملة JavaScript بناء الجملة C. يمكنك العثور على العديد من المشاريع التي يوجد بها فاصلة منقوطة في نهاية كل سطر. ومع ذلك ، تكون الفواصل المنقوطة في نهاية الأسطر في JavaScript اختيارية. في الغالبية العظمى من الحالات ، يمكنك الاستغناء عن الفاصلة المنقوطة. يميل المطورون الذين استخدموا اللغات قبل عدم استخدام فاصلة منقوطة ، إلى تجنبها في جافا سكريبت.

إذا كنت لا تستخدم تركيبات غريبة عند كتابة الرمز ، أو لا تبدأ السطر بقوس أو قوس مربع ، فلن تخطئ في 99.9٪ من الحالات (إذا كان هناك أي شيء ، يمكن أن يحذرك اللنتر من خطأ محتمل). إلى "تصميمات غريبة" ، على سبيل المثال ، يمكننا أن نعزو هذا:

 return variable

يعد استخدام فاصلة منقوطة أم لا مسألة شخصية لكل مبرمج. يقول مؤلف هذا الدليل ، على سبيل المثال ، أنه قرر عدم استخدام الفواصل المنقوطة حيث لا حاجة إليها ، ونتيجة لذلك ، فهي نادرة للغاية في الأمثلة الواردة هنا.

▍ الفجوات

جافا سكريبت لا تولي اهتماما للمسافات. بالطبع ، في حالات معينة ، سيؤدي عدم وجود مسافة إلى خطأ (بالإضافة إلى مساحة غير مناسبة حيث لا ينبغي أن تكون) ، ولكن في كثير من الأحيان لا يوجد فرق بين عدم وجود مسافة في جزء معين من البرنامج ووجود واحد أو أكثر من المساحات. بيان مشابه صحيح ليس فقط للمسافات ، ولكن أيضًا لتغذية الخطوط وعلامات التبويب. هذا ملحوظ بشكل خاص ، على سبيل المثال ، على رمز مصغر. ألقِ نظرة ، على سبيل المثال ، على الكود الذي تمت معالجته باستخدام مترجم الإغلاق .

بشكل عام ، تجدر الإشارة إلى أنه عند تنسيق رمز البرنامج ، من الأفضل عدم الذهاب إلى التطرف ، والالتزام بمجموعة معينة من القواعد.

▍ حساسية الحالة

JavaScript هي لغة حساسة لحالة الأحرف. هذا يعني أنه يميز ، على سبيل المثال ، أسماء المتغيرات something Something . وينطبق الشيء نفسه على أي معرفات.

▍ التعليقات

يمكنك استخدام نوعين من التعليقات في JavaScript. النوع الأول هو التعليقات ذات السطر الواحد:

//

وهي ، كما يوحي الاسم ، تقع على سطر واحد. كل ما يتبع الأحرف // يعتبر تعليقًا.

النوع الثاني هو التعليقات متعددة الأسطر:

 /*   */

هنا ، التعليق هو كل ما يقع بين مجموعة الأحرف /* و */ .

▍ الحرف والمعرفات

الحرف هو قيمة معينة مكتوبة في شفرة المصدر للبرنامج. على سبيل المثال ، يمكن أن تكون سلسلة أو رقمًا أو قيمة منطقية أو بنية أكثر تعقيدًا - كائن حرفي (يسمح لك بإنشاء كائنات منسقة بأقواس متعرجة) أو صفيف حرفي (يسمح لك بإنشاء صفائف ، منسقة باستخدام أقواس مربعة). إليك بعض الأمثلة:

 5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}

لن تكون هناك فائدة خاصة من إطلاق برنامج واجهت مثل هذه الإنشاءات. من أجل العمل مع الحرف في البرامج ، يتم تعيينها أولاً للمتغيرات أو تمريرها إلى الوظائف.

المعرف عبارة عن سلسلة من الحروف التي يمكن استخدامها لتحديد متغير ، وظيفة ، كائن. يمكن أن يبدأ بحرف ، علامة الدولار ( $ ) أو بشرطة سفلية ( _ ) ، يمكن أن يحتوي على أرقام ، وإذا لزم الأمر ، أحرف Unicode مثل الرموز (على الرغم من أنه ، كما ذكرنا من قبل ، من الأفضل عدم القيام بذلك). فيما يلي بعض الأمثلة عن المعرّفات:

 Test test TEST _test Test1 $test

يتم استخدام علامة الدولار بشكل شائع عند إنشاء معرفات تخزن مراجع لعناصر DOM.

words الكلمات المحجوزة

فيما يلي قائمة بالكلمات التي تحفظها اللغة. لا يمكنك استخدامها كمعرفات.

break
do
instanceof
typeof
case
else
new
var
catch
finally
return
void
continue
for
switch
while
debugger
function
this
with
default
if
throw
delete
in
try
class
enum
extends
super
const
export
import
implements
let
private
public
interface
package
protected
static
yield

الملخص

ناقشنا اليوم أسلوب وبنية البرامج المكتوبة بلغة JavaScript. في المرة القادمة سنتحدث عن المتغيرات وأنواع البيانات والتعبيرات والكائنات.

أعزائي القراء! ما هو دليل نمط جافا سكريبت الذي تستخدمه؟

دليل جافا سكريبت الجزء الثاني: نمط الرمز وهيكل البرنامج