أفضل الممارسات لجافا سكربت

请避免全局变量、new、====、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

فوائد هذا الأسلوب تكمن في:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性
// 在顶部声明
var firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明
var i;
// 稍后使用
for (i = 0; i < 5; i++)  {

默认地，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。

�始化变量

تأكد من تحديد المتغيرات عند إعلانها هو عادة جيدة.

فوائد هذا الأسلوب تكمن في:

  • كود أكثر تنظيماً
  • قم بتحديد المتغيرات في مكان منفرد
  • تجنب القيم غير المحددة
// قم بالتعبير عن التسمية والتحديد الأولي في بداية الكود
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

يُمكن للتحديد الأولي للمتغيرات أن يساعدنا على فهم الاستخدام المتوقع ونوع البيانات المتوقع.

لا تدعل القيم العددية والنصية والبولية ككائنات

تأكد دائمًا من معالجة القيم العددية والنصية والبولية كقيم أصلية وليس ككائنات.

إذا تم تعريف هذه الأنواع ككائنات، فإنها قد تؤدي إلى بطء الأداء وتوليد تأثيرات مزعجة:

مثال

var x = "Bill";             
var y = new String("Bill");
(x === y) // النتيجة هي false، لأن x هو نص، بينما y هو كائن.

جربها بنفسك

أو حتى أسوأ:

مثال

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // النتيجة هي false، لأنك لا يمكنك مقارنة الكائنات.

جربها بنفسك

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

  • استخدم {} بدلاً من new Object()
  • استخدم "" بدلاً من new String()
  • استخدم 0 بدلاً من new Number()
  • استخدم false بدلاً من new Boolean()
  • استخدم [] بدلاً من new Array()
  • استخدم /()/ بدلاً من new RegExp()
  • استخدم function (){} بدلاً من new Function()

مثال

var x1 = {};           // كائن جديد
var x2 = "";           // قيمة نصية أصلية جديدة
var x3 = 0;            // قيمة عددية أصلية جديدة
var x4 = false;        // قيمة بولية أصلية جديدة
var x5 = [];           // كائن جديد للقائمة
var x6 = /()/;         // تعبير عادي جديد
var x7 = function(){}; // كائن جديد للوظيفة

جربها بنفسك

اعلم بتحويل النوع التلقائي

اعلم أن القيم العددية قد يتم تحويلها بشكل غير متوقع إلى نص أو NaN(ليس عددًا).

JavaScript ينتمي إلى نوع التشبع. يمكن للمتغيرات أن تحتوي على أنواع بيانات مختلفة، ويمكن للمتغيرات تغيير نوع بياناتها:

مثال

var x = "Hello";     // typeof x هو نص
x = 5;               // تغيير typeof x إلى عدد

جربها بنفسك

إذا كنت تقوم بإجراء عمليات رياضية، يمكن لـ JavaScript تحويل الأرقام إلى نصوص:

مثال

var x = 5 + 7;       // x.valueOf() هو 12، typeof x هو عدد
var x = 5 + "7";     // x.valueOf() هو 57، typeof x هو نص
var x = "5" + 7;     // x.valueOf() هو 57، typeof x هو نص
var x = 5 - 7;       // x.valueOf() هو -2، typeof x هو عدد
var x = 5 - "7";     // x.valueOf() هو -2، typeof x هو عدد
var x = "5" - 7;     // x.valueOf() هو -2، typeof x هو عدد
var x = 5 - "x";     // x.valueOf() هو NaN، typeof x هو عدد

جربها بنفسك

إذا قمت بطرح سلاسل من النصوص، فإنه لن يحدث خطأ وسيتم العودة NaN:(ليس عددًا)

مثال

"Hello" - "Dolly"    // عودة NaN

جربها بنفسك

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

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

==== سيقوم المصفوفة بإجباري مقارنة القيم والأنواع:

مثال

0 == "";        // صحيح
1 == "1";       // صحيح
1 == true;      // صحيح
0 === "";       // خطأ
1 === "1";      // خطأ
1 === true;     // خطأ

جربها بنفسك

استخدام Parameter Defaults

إذا كان يفتقر إلى معامل عند استدعاء الدالة، فإن قيمة المعامل المفقودة ستتم تعيينها undefined。

undefined القيم سيؤدي إلى تدمير كودك. إعداد القيم الافتراضية هو عادة جيدة.

مثال

دالة myFunction(x, y) {
    إذا (y === undefined) {
        y = 0;
    }
}

جربها بنفسك

يرجىمعلومات الدوالاقرأ المزيد عن معلومات الدوال في هذا الفصل.

لإنهاء switch باستخدام default

استخدم default لإنهاء switch الجملة. حتى لو كنت تعتقد أن هذا غير ضروري.

مثال

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 = "Unknown";
}

جربها بنفسك

تفادِد استخدام eval()

eval() يستخدم الدالة eval() لسماح النص ككود. في معظم الحالات، لا تحتاج إلى استخدامها.

بما أن السماح بتنفيذ أي كود يعني أيضًا مشاكل الأمان.