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

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

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

ما هو الكود النظيف؟

يشير الكود النظيف بشكل أساسي إلى الكود الذي هو

1. سهل الفهم
2. سهل التصحيح
3. سهل الصيانة
4. التعليقات مكتوبة بشكل جيد وقصيرة ومفهومة
5. لا يوجد كود مكرر (زائد عن الحاجة) ويتبع قاعدة KISS (اجعل الأمر بسيطًا، أيها الغبي!)

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

ما أهمية الكود النظيف؟

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

1. سهولة القراءة والصيانة: من السهل قراءة الكود وفهمه عندما يكون مكتوبًا بشكل جيد ولديه تعليقات جيدة ويتبع أفضل الممارسات. بمجرد ظهور المشكلة أو الخطأ، فإنك تعرف بالضبط مكان العثور عليه.

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

3. تحسين الجودة والموثوقية: يتبع الكود النظيف أفضل الممارسات للغات معينة ويعطي الأولوية للتعليمات البرمجية جيدة التنظيم. يضيف الجودة ويحسن الموثوقية. لذلك فهو يزيل الأخطاء التي قد تأتي بسبب التعليمات البرمجية غير المنظمة والعربات التي تجرها الدواب.

الآن بعد أن فهمنا أهمية التعليمات البرمجية النظيفة، دعنا نتعمق في بعض أفضل الممارسات والمبادئ لمساعدتك في كتابة تعليمات برمجية نظيفة.

مبادئ الكود النظيف

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

دعونا نرى هذا بالتفصيل.

1. تجنب الأرقام المشفرة

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

مثال

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

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

كود محسّن:

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

في الكود أعلاه يصبح من السهل تغيير سلسلة التاريخ عند الحاجة. أنه يحسن الصيانة.

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

قواعد الأسماء

1. اختر أسماء وصفية لا لبس فيها.
2. صنع تمييزًا ذا معنى.
3. استخدم الأسماء القابلة للنطق.
4. استخدم أسماء قابلة للبحث.
5. استبدال الأرقام السحرية بالثوابت المسماة.
6. تجنب الترميزات. لا تقم بإلحاق البادئات أو كتابة المعلومات.

مثال

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

هنا الكود صحيح ولكن هناك بعض الغموض في الكود. دعونا نرى الرمز حيث يتم استخدام الأسماء الوصفية.

كود محسّن

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

هنا كل أسماء المتغيرات تشرح نفسها بنفسها. لذلك، من السهل فهم الكود وتحسين جودة الكود.

3. استخدم التعليق فقط عند الحاجة
لا تحتاج إلى كتابة التعليقات في كل مكان. ما عليك سوى الكتابة عند الحاجة إليها والكتابة باختصار وسهل الفهم. الكثير من التعليقات ستؤدي إلى الارتباك وقاعدة التعليمات البرمجية الفوضوية.

قواعد التعليقات

1. حاول دائمًا شرح نفسك بالشفرة.
2. لا تكن زائداً عن الحاجة.
3. لا تضيف ضوضاء واضحة.
4. لا تستخدم التعليقات المقوسة.
5. لا تقم بالتعليق على الكود. فقط قم بالإزالة.
6. استخدم كتفسير للنوايا.
7. استخدام لتوضيح الكود.
8. استخدام كتحذير من العواقب.

مثال

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

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

كود محسّن

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

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

4. كتابة الوظائف التي تفعل شيئًا واحدًا فقط
عندما تكتب وظائف، لا تضيف إليها الكثير من المسؤوليات. اتبع مبدأ المسؤولية الفردية (SRP). وهذا يجعل الوظيفة أسهل في الفهم ويبسط اختبارات وحدة الكتابة لها.

قواعد الوظائف

1. يبقيه صغيرًا.
2. تفعل شيئا واحدا.
3. استخدم أسماء وصفية.
4. يفضل عدد أقل من الوسائط.
5. تقسيم الطريقة إلى عدة طرق مستقلة يمكن استدعاؤها من العميل.

مثال

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

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

كود محسّن

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

في هذا المثال، تم فصل المسؤوليات: تتولى وظيفة fetchData استدعاء واجهة برمجة التطبيقات (API)، وتتولى وظيفة ProcessData معالجة البيانات. وهذا يجعل الكود أسهل في الفهم والصيانة والاختبار.

5. تجنب تكرار التعليمات البرمجية (اتبع مبدأ DRY - لا تكرر نفسك)

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

قواعد عامة أخرى لكتابة الكود النظيف

• اتبع الاصطلاحات القياسية (بالنسبة لـ JavaScript Camel Case).
• أبق الأمور بسيطة يا غبي. الأبسط هو الأفضل دائمًا. تقليل التعقيد قدر الإمكان.
• قاعدة الكشافة. اترك المخيم أنظف مما وجدته عليه.
• ابحث دائمًا عن السبب الجذري. ابحث دائمًا عن السبب الجذري للمشكلة.
• اكتب الكود الذي يسهل فهمه

قم بتنفيذ هذه الممارسات والمبادئ من اليوم لكتابة كود نظيف.