كود نظيف في JavaScript: المبادئ والأمثلة للمبتدئين

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

كود نظيف في JavaScript: المبادئ والأمثلة للمبتدئين

\n\n

الكود النظيف (Clean Code) ليس مجرد مفهوم عصري، بل هو مهارة أساسية لأي مطور محترف. في عالم JavaScript (خاصة في بيئة Node.js)، يتم كتابة الكود بسرعة، لكن صيانته بدون مبادئ واضحة تصبح كابوسًا حقيقيًا. هذه المقالة موجهة للمبتدئين الذين يريدون كتابة كود ليس فقط يعمل، بل جميل، قابل للقراءة وقابل للتوسع.

\n\n

الكود النظيف هو كود يسهل قراءته، وتعديله، واختباره. لا يثير الرغبة في إعادة كتابته من الصفر. دعنا نستعرض المبادئ الأساسية مع أمثلة عملية.

\n\n

1. تسمية المتغيرات والدوال: قول الحقيقة

\n\n

أبسط قاعدة وأكثرها تعقيدًا في نفس الوقت — يجب أن يعكس الاسم الجوهر. لا تبخل بالحروف، بل وفر الوقت في الفهم.

\n\n

سيء (غير مفهوم):

\n
const d = new Date();\nconst arr = ['apple', 'banana', 'grape'];\nconst fn = (x) => x * 2;
\n\n

جيد (قابل للقراءة):

\n
const currentDate = new Date();\nconst fruitList = ['apple', 'banana', 'grape'];\nconst doubleValue = (value) => value * 2;
\n\n

قواعد التسمية:

\n
    \n
  • المتغيرات — أسماء (user, productList, errorMessage).
  • \n
  • الدوال — أفعال (getUser, calculateTotal, validateEmail).
  • \n
  • القيم المنطقية — ابدأ بـ is, has, should (isActive, hasPermission, shouldUpdate).
  • \n
  • تجنب الأرقام السحرية — ضعها في ثوابت.
  • \n
\n\n
// سيء\nconst t = 3600000; // ما هذا الرقم؟\n\n// جيد\nconst MILLISECONDS_IN_AN_HOUR = 3600000;\nconst timeout = MILLISECONDS_IN_AN_HOUR;
\n\n

2. الدوال: خطوة واحدة — إجراء واحد

\n\n

مبدأ المسؤولية الواحدة (Single Responsibility Principle) ينطبق أيضًا على الدوال. يجب أن تقوم الدالة بشيء واحد وتقوم به بشكل جيد.

\n\n

سيء (يفعل كل شيء مرة واحدة):

\n
function processUserData(user) {\n    const fullName = `${user.firstName} ${user.lastName}`;\n    const email = user.email.toLowerCase();\n    const isValid = email.includes('@');\n    \n    if (isValid) {\n        const result = { fullName, email };\n        saveToDatabase(result);\n        sendWelcomeEmail(email);\n        return result;\n    } else {\n        throw new Error('Invalid email');\n    }\n}
\n\n

جيد (مقسم إلى دوال صغيرة):

\n
function buildFullName(firstName, lastName) {\n    return `${firstName} ${lastName}`;\n}\n\nfunction normalizeEmail(email) {\n    return email.toLowerCase().trim();\n}\n\nfunction isValidEmail(email) {\n    return email.includes('@');\n}\n\nfunction processUserData(user) {\n    const fullName = buildFullName(user.firstName, user.lastName);\n    const email = normalizeEmail(user.email);\n    \n    if (!isValidEmail(email)) {\n        throw new Error('Invalid email');\n    }\n    \n    const result = { fullName, email };\n    saveToDatabase(result);\n    sendWelcomeEmail(email);\n    \n    return result;\n}
\n\n

هذا الكود سهل الاختبار، سهل التعديل، وسهل الفهم.

\n\n

3. إدارة التعقيد: تجنب التداخل العميق

\n\n

التداخل العميق لـ if و for هو عدو قابلية القراءة. استخدم الإرجاع المبكر (early return) و جمل الحماية (Guard Clauses).

\n\n

سيء (جحيم عميق):

\n
function processOrder(order) {\n    if (order) {\n        if (order.isPaid) {\n            if (order.items.length > 0) {\n                // ... 50 سطر من الكود\n            }\n        }\n    }\n}
\n\n

جيد (هيكل مسطح):

\n
function processOrder(order) {\n    if (!order) {\n        return;\n    }\n                

المدونات

توصيات الكتب