كيف تكتب كود JavaScript نظيف: نصائح أساسية

استخدم أسماء وصفية

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

• لا تستخدم الأحرف المفردة (x, a, …) أو الأسماء العامة، لأنها تقدم القليل من السياق أو لا تقدم أي شيء حول هدف المتغير. بدلاً من ذلك، استخدم أسماء أكثر وصفية ومعنى، حتى لو كانت أطول.
• تجنب الاختصارات لأنها قد تربكك أو تربك فريقك بعد العودة إلى الكود بعد أيام، إلا إذا كانت مفهومة عالميًا (على سبيل المثال، HTTP، API، CSS).
• استخدم اصطلاحات تسمية موحدة في جميع مشاريعك: camelCase للمتغيرات والدوال (مثل، userName)، UPPERCASE للثوابت (مثل، PI)، و PascalCase للفئات (مثل، Player)، وتجنب استخدام التسمية الهنغارية (مثل، strName) لأنها تضيف حروفًا غير ضرورية تصف نوع المتغير بينما يمكنك التمرير فوق المتغير في IDE الخاص بك لمعرفة نوعه.

// تسمية سيئة
const x = 100;
const data = ["John", "Grace", "Jamir"];

// تسمية جيدة
const totalItemsInStock = 100;
const userNames = ["John", "Grace", "Jamir"];

تجنب الأرقام السحرية

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

// مع الأرقام السحرية
const totalPrice = price * 0.8;

// بدون الأرقام السحرية
const discount = 0.2;
const totalPrice = price * (1 - discount);

التنسيق الجيد والبنية

هيكل الكود الخاص بك وكيفية تنسيقه يمكن أن يحدث فرقًا كبيرًا ويحسن بشكل كبير قابلية قراءة كودك. لتنسيق الكود بشكل صحيح، قم بما يلي:

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

// صعب القراءة
function add(x, y) {
  if(!isNaN(x) && !isNaN(y)) {
    return +x + +y;
  }
}

// أسهل قراءة
function add(x, y) {
  if (isNaN(x) && isNaN(y)) return;
  return +x + +y;
}

إعتنق مبدأ DRY

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

التعليقات: لماذا، وليس كيف

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

التعليقات تُستخدم لشرح “لماذا” وليس “كيف”. الكود نفسه جيد جدًا في التعبير عما يفعله.

إزالة التكرار

نظف كودك من أي زيادات غير ضرورية لا تضيف شيئًا سوى المزيد من الأحرف. مثل الفحوصات غير الضرورية (على سبيل المثال، isEven === true).

// سيء
function isEvent(number) {
  if (number % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

// أفضل
function isEvent(number) {
  return number % 2 === 0;
}

نصيحة إضافية: JavaScript الحديثة

استخدم JavaScript الحديثة لتحسين قابلية قراءة الكود باستخدام السكر النحوي. بعض الميزات التي قد تساعدك:

• التقييم القصير (&&، ||) للتنقل عبر الشروط بسهولة.
• السلسلة الاختيارية (مثل، user?.address?.city) للتخلص من فحوصات القيم غير المعرفة في الكائنات.
• الفواصل الرقمية (1_895_755 بدلاً من 1598755) لتحسين قابلية قراءة الأرقام الكبيرة.

الخاتمة

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