تجارب عملية في JavaScript

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

تجنب المتغيرات العالمية

حاول تقليل استخدام المتغيرات العالمية. هذا يشمل جميع أنواع البيانات، الأجسام والوظائف.

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

المتغيرات المحلية يجب أن تستخدمlet،constوvarكلمة مفتاحية، وإلا سيصبح المتغيرات متغيرات عالمية.

إعلان المتغيرات دائمًا

عند إعلان المتغيرات والقيم الدائمة، استخدمletوconstكلمة مفتاحية، وليسvar。

　　// توصية:
　　let myAge = 22;
　　const myName = "oldtoolbag.com";
　　
　　//　غير موصى به:
　　var myAge = 22;
　　var myName = "oldtoolbag.com";

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

وضع جميع الإعلانات في أعلى كل سكريبت أو دالة هو ممارسة برمجة جيدة.

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

　　// كتابة الإعلانات في البداية
　　let firstName, lastName, price, discount, fullPrice;
　　
　　// استخدام
　　firstName = "oldtoolbag.com";
　　lastName = "Choudhary";
　　
　　price = 26.90;
　　discount = 1.25;
　　
　　fullPrice = price * 100 / discount;

استخدام نطاق التوسع

لتحسين قراءة الكود بشكل كبير، نستخدم نطاق التوسع، لنقل كل سطر من سطر JavaScript إلى سطر جديد.

　　// توصية:
　　function myFunc() {
　　console.log("Parrot Tutorial");
　　}
　　
　　//　غير موصى به:
　　function myFunc() { console.log("Parrot Tutorial"); }

يجب أن تستخدم مسافات بين العمليات والمعاملات، والمعادلات، والمعاملات إلخ:}}

　　// قابلية القراءة أفضل
　　if(dayOfWeek === 7 && weather === "sunny") {
　　/* نص معين */
　　}
　　
　　// قابلية القراءة ضعيفة
　　if(dayOfWeek===7&&weather==="sunny"){
　　/* نص معين */
　　}

لا تدع الأرقام، النصوص أو القيم الحقيقية تكون كيانات

تأكد دائمًا من أن الأرقام، النصوص أو القيم الحقيقية تعتبر قيمًا أصلية. لا تعتبر كيانات.

إذا كانت هذه التوضيحات كيانات، فإن ذلك سيقلل من سرعة التنفيذ ويؤدي إلى نتائج غير متوقعة.

var str1 = "New Delhi";
var str2 = new String("New Delhi");
document.write(str1 === str2); // يعود إلى false لأن str1 و str2 لهما أنواع مختلفة

لا يمكن مقارنة الكيانات:

var str1 = new String("New Delhi");
var str2 = new String("New Delhi");
document.write(str1 == str2); // يعود إلى false لأن str1 و str2 هما كيانات مختلفة
document.write(str1 === str2); // يعود إلى false لأن str1 و str2 هما كيانات مختلفة

لا تستخدم new Object()

• استخدم {} بدلاً من new Object()

• استخدم "" بدلاً من new String()

• استخدم 0 بدلاً من new Number()

• استخدم false بدلاً من new Boolean()

• استخدم [] بدلاً من new Array()

• استخدم /()/ بدلاً من new RegExp()

• استخدم function (){} بدلاً من new Function()

let x1 = {};
let x2 = "";
let x3 = 0;
let x4 = false;
let x5 = [];
let x6 = /()/;
let x7 = function(){};

تكون حذرًا من التحويل التلقائي للنوع

JavaScript هو لغة مرنة أو لغة ديناميكية. لا تتصل المتغيرات في JavaScript مباشرة بأي نوع قيمة معين، ويمكن تخصيص (وإعادة تخصيص) جميع أنواع القيم للمتغيرات.

var x = 20; // x الآن هو عدد
x = ";oldtoolbag.com"; // x الآن هو نص
x　=　true;　　　//　x is now a　Boolean

عند إجراء العمليات الرياضية، يمكن للجافا سكربت تحويل الأرقام إلى نصوص:

num =　50　+　10;// يعود 60،نوع num هو number
num =　50　+　"10";　　// يعود "5010"،نوع num هو string
num = "50"　+　10;　　// يعود "5010"،نوع num هو string
num = "50" - 10;　　// يعود "40"،نوع num هو number

يرجى ملاحظة، قد يتم تحويل الأرقام بشكل غير متوقع إلىNaN(غير عددية):

num = 50 *　"Parrot";　　//　يعود "NaN"، نوع num هو number

استخدام المقارنة الصارمة

المقارنة == تقوم دائمًا بمقارنة التحويلات السابقة (لتطابق النوع).

المعادلة === تقوم بمقارنة القيمة والنوع.

　　1　==　"1";　　　//　true
　　1　==　true;　　//　true
　　
　　1　===　"1";　　//　false
　　1 ===　true;　　　// false

استخدام مقدار النمط

لإدراج القيمة في النص، استخدممقدار النمط（` `）。

　　// توصية:
　　let myName　=　'oldtoolbag.com';
　　console.log(`Hi!　I'm　${myName}!`);
　　
　　//　غير موصى به:
　　let myName　=　'oldtoolbag.com';
　　console.log('Hi!　I\'m'　+　myName　+　'!');

دائرة عامة

عند استخدامfor،for...inأوfor...ofدائرة، تأكد من تعريف التوليد بشكل صحيح، باستخدامletكلمة مفتاحية.

　　let fruits = ["Apple", "Mango", "Banana"];
　　
　　// توصية:
　　for(let i of fruits) {
　　　console.log(i);
　　}
　　
　　//　غير موصى به:
　　for(i of fruits) {
　　　console.log(i);
　　}

يرجى تذكر:

• لا يجب أن يكون هناك فراغ بين كلمة الدائرة و البارانthesesفراغ。

• يجب أن يكون هناك فراغ بين البارانtheses والcurly bracesفراغ。

إسم الدالة

لإسم الدالة، استخدم lowerCamelCasing، و استخدم أسماء واضحة ومبسطة في الأماكن المناسبة.

　　// توصية:
　　function sayHello() {
　　alert('Hello!');
　　}
　　
　　//　غير موصى به:
　　function　sayhello()　{
　　alert('Hello!');
　　}

استخدام القيمة الافتراضية لإنهاء switch

switchتأكد دائمًا من إضافة default: في النهاية. حتى لو لم تكن تعتقد أن ذلك ضروريًا.

var　day;
switch　(new　Date().getDay())　{
case　0:　day　=　"Sunday";
break;
case　1:　day　=　"Monday";
break;
case　2:　day　=　"Tuesday";
break;
case　3:　day　=　"Wednesday";
break;
case　4:　day　=　"Thursday";
break;
case　5:　day　=　"Friday";
break;
case　6:　day　=　"Saturday";
break;
default:　day　=　"Undefined　Day";
}

معالجة الأخطاء

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

لذلك، يجب عليك استخدامtry...catchالمستخدمة لالتقاط الأخطاء.

　　try　{
　　console.log(results);
　　}
　　catch(e)　{
　　console.error(e);
　　}