أفضل ممارسات JavaScript
تجنب المتغيرات العالمية ، تجنب new، تجنب ==، تجنبeval()
تجنب المتغيرات العالمية
قلل من استخدام المتغيرات العالمية.
يتضمن هذا جميع أنواع البيانات والكائنات والوظائف.
يمكن الكتابة فوق المتغيرات والوظائف العامة بواسطة نصوص أخرى.
استخدم المتغيرات المحلية بدلاً من ذلك ، وتعلم كيفية استخدام الإغلاق .
قم دائمًا بتعريف المتغيرات المحلية
يجب التصريح عن جميع المتغيرات المستخدمة في الوظيفة كمتغيرات محلية .
يجب الإعلان عن المتغيرات المحلية var
بالكلمة الرئيسية أو الكلمة letالرئيسية أو constالكلمة الرئيسية ، وإلا فإنها ستصبح متغيرات عالمية.
لا يسمح الوضع الصارم بالمتغيرات غير المعلنة.
الإعلانات على القمة
يُعد وضع جميع الإعلانات في أعلى كل نص أو وظيفة ممارسة ترميز جيدة.
هذا سوف:
- أعط كود أنظف
- قم بتوفير مكان واحد للبحث عن المتغيرات المحلية
- اجعل من السهل تجنب المتغيرات العامة (الضمنية) غير المرغوب فيها
- تقليل احتمالية إعادة الإقرارات غير المرغوب فيها
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
ينطبق هذا أيضًا على متغيرات الحلقة:
for (let i = 0; i < 5; i++)
{
تهيئة المتغيرات
إنها ممارسة ترميز جيدة لتهيئة المتغيرات عندما تقوم بتعريفها.
هذا سوف:
- أعط كود أنظف
- قم بتوفير مكان واحد لتهيئة المتغيرات
- تجنب القيم غير المحددة
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
توفر تهيئة المتغيرات فكرة عن الاستخدام المقصود (ونوع البيانات المقصود).
قم بتعريف الكائنات باستخدام const
الإعلان عن الكائنات باستخدام const سيمنع أي تغيير عرضي للنوع:
مثال
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
قم بتعريف المصفوفات باستخدام const
الإعلان عن المصفوفات باستخدام const سيمنع أي تغيير طارئ للنوع:
مثال
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
لا تستخدم كائن جديد ()
- استخدم
""بدلا منnew String() - استخدم
0بدلا منnew Number() - استخدم
falseبدلا منnew Boolean() - استخدم
{}بدلا منnew Object() - استخدم
[]بدلا منnew Array() - استخدم
/()/بدلا منnew RegExp() - استخدم
function (){}بدلا منnew Function()
مثال
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
احذر من نوع التحويلات التلقائية
جافا سكريبت مكتوبة بشكل فضفاض.
يمكن أن يحتوي المتغير على كافة أنواع البيانات.
يمكن للمتغير تغيير نوع بياناته:
مثال
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
احذر من أن الأرقام يمكن أن يتم تحويلها عن طريق الخطأ إلى سلاسل أو NaN(ليست رقمًا).
عند إجراء عمليات حسابية ، يمكن لـ JavaScript تحويل الأرقام إلى سلاسل:
مثال
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
لا يؤدي طرح سلسلة من سلسلة إلى حدوث خطأ ولكنه يُرجع NaN(ليس رقمًا):
مثال
"Hello" - "Dolly" // returns NaN
استخدم === المقارنة
يقوم ==عامل المقارنة دائمًا بالتحويل (إلى الأنواع المطابقة) قبل المقارنة.
يفرض المشغل ===مقارنة القيم والنوع:
مثال
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
استخدام افتراضيات المعلمات
إذا تم استدعاء دالة مع وسيطة مفقودة ، يتم تعيين قيمة الوسيطة المفقودة على
undefined.
يمكن للقيم غير المحددة كسر التعليمات البرمجية الخاصة بك. من الجيد تعيين قيم افتراضية للوسيطات.
مثال
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
يسمح ECMAScript 2015 بالمعلمات الافتراضية في تعريف الوظيفة:
function (a=1, b=1) { /*function code*/ }
اقرأ المزيد عن معلمات الدالة والوسيطات في Function Parameters
قم بإنهاء مفاتيح التبديل الخاصة بك بالافتراضيات
قم دائمًا بإنهاء بياناتك switchبامتداد default. حتى لو كنت تعتقد أنه ليست هناك حاجة لذلك.
مثال
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";
}
تجنب الرقم والسلسلة والمنطقية ككائنات
تعامل دائمًا مع الأرقام أو السلاسل أو القيم المنطقية على أنها قيم أولية. ليس ككائنات.
الإعلان عن هذه الأنواع ككائنات يؤدي إلى إبطاء سرعة التنفيذ وينتج عنه آثار جانبية سيئة:
مثال
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
أو حتى أسوأ:
مثال
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
تجنب استخدام EVAL ()
يتم eval()استخدام الوظيفة لتشغيل النص كرمز. في جميع الحالات تقريبًا ، لا ينبغي أن يكون من الضروري استخدامه.
نظرًا لأنه يسمح بتشغيل تعليمات برمجية عشوائية ، فإنه يمثل أيضًا مشكلة أمان.