جاري التحميل...
جاري التحميل...
كيف تسمّي المتغيرات والدوال والملفات
التسمية الواضحة والمتسقة هي واحدة من أهم عناصر الكود النظيف. أنت تقرأ الكود أكثر مماكتبه، لذا الأسماء الجيدة توفر عليك الوقت والجهد وتجعل الكود سهل الصيانة والفهم.
في هذا الدرس، سنتعلم أفضل الممارسات لتسمية المتغيرات والدوال والثوابت والملفات، وسنرى كيف يمكن للأسماء السيئة تحويل كود بسيط إلى كابوس.
المتغيرات هي حاويات تخزين للبيانات. القاعدة الذهبية هي: سمّ متغيرك ليصف محتواه بدقة.
في JavaScript، نستخدم camelCase لأسماء المتغيرات: الكلمة الأولى بحرف صغير، والكلمات التالية تبدأ بحرف كبير.
استخدام حرف واحد مثل x أو y يجعل الكود صعب الفهم. استخدم أسماء وصفية حتى في الحلقات.
💡 استثناء: الحلقات:
استخدام i و j و k في الحلقات مقبول في JavaScript، لكن تأكد أن الحلحة لها معنى واضح من السياق المحيط.
الدوال تنفيذ إجراءات أو حسابات. القاعدة هنا: ابدأ اسم الدالة بفعل يصف ما تفعله.
أفعال مقترحة للدوال:
get / fetch / retrieve - للحصول على بياناتcreate / add / insert - لإنشاء عنصر جديدupdate / modify / change - لتعديل البياناتdelete / remove / destroy - لحذف عنصرvalidate / check / verify - للتحقق من شرطcalculate / compute - لتنفيذ الحساباتrender / display / show - لعرض واجهة مستخدمالفئات هي "قوالب" لإنشاء الأشياء. نستخدم PascalCase (الكلمة الأولى تبدأ بحرف كبير) والأسماء هي اسماء.
الثوابت هي قيم لا تتغير. نستخدم UPPER_SNAKE_CASE (أحرف كبيرة مع شرطات سفلية) للتميز بوضوح بينها وبين المتغيرات العادية.
استثناء: الثوابت المحلية داخل الدوال لا تحتاج إلى UPPER_CASE.
تسمية الملفات هي جزء أساسي من تنظيم المشروع. هناك نهجان رئيسيان مقبولان في مجتمع JavaScript:
💡 نصيحة مهمة:
اختر نمطاً واحداً والتزم به طوال مشروعك. معظم مكتبات JavaScript تستخدم kebab-case (مثل react-router-dom)، لذا هو الخيار الأ أكثر أماناً للمشاركب الكبيرة.
دعنا نرى بعض الأمثلة الواقعية للأسماء السيئة وكيفية تحسينها:
القواعد الذهبية للتسمية:
button وليس btn، user وليس usrfirst و second وليس f و suserData و productData وليس data1 و data2get و fetch و retrieve للمفهوم نفسهisValid وليس check أو flagأي من الأسماء التالية هو الاسم الصحيح لدالة تتحقق من البريد الإلكتروني؟
أعد كتابة الكود التالي بأسماء أفضل ووضوح أعلى. اجعل الكود مقروءاً وسهلاً للفهم.
الحل:
// ❌ Bad code
function fn(d, n) {
let r = d.filter(x => x.a > n);
let s = r.map(x => x.n);
return s;
}
// ✅ Improved solution
function getAdultNames(people, minAge) {
const adults = people.filter(
person => person.age > minAge
);
const names = adults.map(
person => person.name
);
return names;
}النمط لكل عنصر:
userName, isActive, maxRetryCount - المتغيرات: camelCasegetUserData(), calculateTotal() - الدوال: camelCase + فعلShoppingCart, PaymentProcessor - الفئات: PascalCaseMAX_RETRY_COUNT, API_URL - الثوابت: UPPER_SNAKE_CASEالقواعد الذهبية:
button وليس btn - لا تختصرget, create, validate - استخدم أفعالاً للدوالisValid وليس check - الأسماء تصف المحتوىما هو Clean Code؟
الإجابة:
كود واضح، سهل القراءة، وقابل للصيانة.
لماذا Clean Code مهم؟
الإجابة:
يقلل الأخطاء ويسهل التعاون ويوفر وقت التطوير.
اقرأ كود الآخرين
أفضل طريقة لتعلم Clean Code هي قراءة مشاريع مفتوحة المصدر