كما تعلم، JavaScript هي لغة البرمجة رقم واحد في العالم، إنها لغة الويب، إنها لغة التطبيقات الهجينة للهواتف المحمولة (مثل PhoneGap أو Appcelerator)، إنها لغة جانب الخادم (مثل NodeJS أو Wakanda). وهناك العديد من التطبيقات الأخرى. وفي الوقت نفسه، فهي أيضًا لغة تنويرية للعديد من المبتدئين، لأنها لا يمكنها فقط عرض رسالة تنبيه بسيطة على المتصفح، ولكن يمكن استخدامها أيضًا للتحكم في الروبوت (باستخدام Nodebot أو Nodruino). أصبح المطورون الذين يتقنون JavaScript ويمكنهم كتابة تعليمات برمجية منظمة وموحدة وفعالة مطلوبين في سوق المواهب.
تجدر الإشارة إلى أنه تم اختبار مقتطفات التعليمات البرمجية الواردة في هذه المقالة على أحدث إصدار من Google Chrome (الإصدار 30)، والذي يستخدم محرك V8 JavaScript (V8 3.20.17.15).
1 لا تنس استخدام الكلمة الأساسية var عند تعيين قيمة لمتغير لأول مرة
يؤدي تعيين قيمة لمتغير غير محدد إلى إنشاء متغير عام. تجنب المتغيرات العالمية.
2 استخدم === بدلاً من ==
يقوم عامل التشغيل == (أو !=) بإجراء تحويلات الكتابة تلقائيًا عند الحاجة. لا تؤدي العملية === (أو !==) إلى أي تحويل. يقوم بمقارنة القيم والأنواع ويعتبر أيضًا أسرع من ==.
انسخ رمز الكود كما يلي:
[10] === 10 // خطأ
[10] == 10 // صحيح
'10' == 10 // صحيح
'10' === 10 // خطأ
[] == 0 // صحيح
[] === 0 // خطأ
'' == خطأ // صحيح ولكن صحيح == "أ" خطأ
'' === خطأ // خطأ
3 استخدم عمليات الإغلاق لتنفيذ المتغيرات الخاصة
انسخ رمز الكود كما يلي:
وظيفة الشخص (الاسم والعمر) {
this.getName = function() { return name };
this.setName = function(newName) { name = newName };
this.getAge = function() { return age };
this.setAge = function(newAge) { age = newAge };
// لم تتم تهيئة الخصائص في المُنشئ
فار الاحتلال؛
this.getOccupation = function() { إرجاع المهنة };
this.setOccupation = function(newOcc) { الاحتلال =
newOcc;
}
4- استخدم الفاصلة المنقوطة في نهاية العبارة
من الممارسات الجيدة استخدام الفاصلة المنقوطة في نهاية العبارة. لن يتم تحذيرك إذا نسيت كتابتها، لأنه في معظم الحالات يقوم مترجم JavaScript بإضافة الفاصلة المنقوطة لك.
5 إنشاء منشئ الكائن
انسخ الرمز كما يلي: function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
6 استخدم typeof وinstanceof وconstructor بعناية
انسخ الكود كما يلي: var arr = ["a"، "b"، "c"];
نوع آر // إرجاع "الكائن"
مثيل arr للمصفوفة // صحيح
arr.constructor();
7 إنشاء وظيفة الاتصال الذاتي (وظيفة الاتصال الذاتي)
يُطلق على هذا غالبًا اسم دالة مجهولة يتم استدعاؤها ذاتيًا أو تعبير دالة يتم استدعاؤها على الفور IIFE. هذه دالة يتم تنفيذها تلقائيًا فور إنشائها، عادةً على النحو التالي:
انسخ رمز الكود كما يلي:
(وظيفة(){
// بعض التعليمات البرمجية الخاصة التي سيتم تنفيذها تلقائيًا
})();
(وظيفة (أ، ب) {
النتيجة فار = أ+ب؛
نتيجة الإرجاع؛
})(10,20)
8- الحصول على عنصر عشوائي من مصفوفة
رمز النسخ كما يلي: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var RandomItem = items[Math.floor(Math.random() * items.length)];[code]
9 الحصول على رقم عشوائي ضمن نطاق معين
يعد مقتطف الرمز هذا مفيدًا عندما تريد إنشاء بيانات اختبار، مثل قيمة راتب عشوائية بين الحد الأدنى والحد الأقصى للقيمة.
[code]var x = Math.floor(Math.random() * (max - min + 1)) + min;
10 قم بإنشاء مجموعة من الأرقام بين 0 والقيمة القصوى المحددة
انسخ الكود كما يلي: var numberArray = [], max = 100;
for( var i=1; NumbersArray.push(i++) < max;); // أرقام = [0,1,2,3 ... 100]
11 قم بإنشاء سلسلة أبجدية رقمية عشوائية
انسخ الكود كما يلي: function generatorRandomAlphaNum(len) {
فار rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
إرجاع rdmString.substr(0, len);
}
12 يتبارى مجموعة من الأرقام
رمز النسخ كما يلي: أرقام var = [5, 458, 120, -215, 228, 400, 122205, -85411];
أرقام = أرقام.فرز (وظيفة () {إرجاع الرياضيات. عشوائي () - 0.5})؛
/* أرقام المصفوفة ستكون مساوية على سبيل المثال لـ [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 وظيفة تقليم السلسلة
توجد وظيفة تقليم كلاسيكية في Java وC# وPHP والعديد من اللغات الأخرى، تُستخدم لإزالة المسافات في السلاسل، ولكنها غير موجودة في JavaScript، لذا نحتاج إلى إضافة هذه الوظيفة إلى كائن String.
انسخ رمز الكود كما يلي:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};// قم بإزالة المسافات البادئة والزائدة للسلسلة، باستثناء المسافات الداخلية للسلسلة خيط
14 إلحاق مصفوفة بمصفوفة أخرى
انسخ الكود كما يلي: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* المصفوفة 1 ستكون مساوية لـ [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
// في الواقع، يمكن لـ concat توصيل صفيفين مباشرة، لكن قيمة الإرجاع الخاصة به هي مصفوفة جديدة. هنا هو التغيير المباشر إلى array1
15 تحويل كائن الوسائط إلى صفيف
انسخ الكود كما يلي: var argArray = Array.prototype.slice.call(arguments);
كائن الوسيطات هو كائن يشبه المصفوفة، ولكنه ليس مصفوفة حقيقية
16 التحقق مما إذا كانت المعلمة رقم (رقم)
انسخ الكود كما يلي: function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 تحقق مما إذا كانت المعلمة عبارة عن مصفوفة
انسخ الكود كما يلي: function isArray(obj){
return Object.prototype.toString.call(obj) === '[مصفوفة الكائن]'؛
}
ملاحظة: إذا تم تجاوز طريقة toString()، فلن تحصل على النتائج المطلوبة باستخدام هذه التقنية. أو يمكنك استخدام:
انسخ رمز الكود كما يلي:
Array.isArray(obj); // هذه طريقة صفيف جديدة
إذا كنت لا تستخدم إطارات متعددة، فيمكنك أيضًا استخدام التابعinstanceof. ولكن إذا كان لديك سياقات متعددة، فسوف تحصل على نتائج خاطئة.
انسخ الكود كما يلي: var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10);
// مثيل لن يعمل بشكل صحيح، ويفقد myArray منشئه
// لا تتم مشاركة المُنشئ بين الإطارات
مثيل المصفوفة // خطأ
18 احصل على القيمة القصوى أو الدنيا في مجموعة من الأرقام
رمز النسخ كما يلي: أرقام var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, number);
var minInNumbers = Math.min.apply(Math, number);
// ملاحظة المترجم: يتم استخدام طريقة function.prototype.apply هنا لتمرير المعلمات.
19 مسح مصفوفة
انسخ الكود كما يلي: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray سيكون مساويًا لـ [].
20 لا تستخدم الحذف لإزالة العناصر من المصفوفة.
استخدم لصق بدلاً من الحذف لحذف عنصر من مصفوفة. يؤدي استخدام الحذف إلى استبدال العنصر الأصلي بعنصر غير محدد فقط، ولا يحذفه فعليًا من المصفوفة.
لا تستخدم هذا:
انسخ الكود كما يلي: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
العناصر.طول // العودة 11
حذف العناصر[3]؛
items.length؛ // إرجاع 11
/* العناصر ستكون مساوية لـ [12، 548، "a"، غير محدد × 1، 5478، "foo"، 8852، غير محدد × 1، "Doe"، 2154، 119] */
بدلا من ذلك استخدم:
انسخ الكود كما يلي: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
العناصر.طول // العودة 11
items.splice(3,1);
العناصر.طول // إرجاع 10
/* العناصر ستكون مساوية لـ [12، 548، "a"، 5478، "foo"، 8852، غير محدد × 1، "Doe"، 2154، 119] */
يجب استخدام طريقة الحذف لحذف خاصية كائن ما.
21 استخدم الطول لاقتطاع مصفوفة
على غرار طريقة مسح المصفوفة أعلاه، نستخدم خاصية الطول لاقتطاع مصفوفة.
انسخ الكود كما يلي: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray سيكون مساويًا لـ [12, 222, 1000, 124].
بالإضافة إلى ذلك، إذا قمت بتعيين طول المصفوفة على قيمة أكبر من القيمة الحالية، فسيتم تغيير طول المصفوفة وستتم إضافة عناصر جديدة غير محددة للتعويض عن ذلك. طول المصفوفة ليس خاصية للقراءة فقط.
انسخ الكود كما يلي: myArray.length = 10; // طول المصفوفة الجديدة هو 10
myArray[myArray.length - 1];
22 استخدم و/أو المنطقي لإصدار أحكام مشروطة
انسخ رمز الكود كما يلي:
فار فو = 10؛
foo == 10 && doSomething(); // يعادل if (foo == 10) doSomething();
foo == 5 ||.doSomething(); // يعادل if (foo != 5) doSomething();
ويمكن أيضًا استخدام AND المنطقية لتعيين القيم الافتراضية لمعلمات الوظيفة
انسخ رمز الكود كما يلي:
وظيفة افعل شيئا (arg1) {
Arg1 = arg1 ||.10; // إذا لم يتم تعيين arg1، فسيتم تعيين Arg1 على 10
}
23 استخدم طريقة الخريطة () للتكرار على العناصر الموجودة في المصفوفة
انسخ الكود كما يلي: var Squares = [1,2,3,4].map(function (val) {
العودة فال * فال؛
});
// المربعات ستكون مساوية لـ [1، 4، 9، 16]
24 تقريب رقم إلى عدد N من المنازل العشرية
انسخ الكود كما يلي: var num =2.443242342;
num = num.toFixed(4); // num يساوي 2.4432
25 مشكلة النقطة العائمة
انسخ الكود كما يلي: 0.1 + 0.2 === 0.3 // خطأ
9007199254740992 + 1 // يساوي 9007199254740992
9007199254740992 + 2 // يساوي 9007199254740994
لماذا يحدث هذا؟ 0.1+0.2 يساوي 0.3000000000000004. عليك أن تعرف أن جميع أرقام JavaScript يتم تمثيلها داخليًا كأرقام الفاصلة العائمة في نظام ثنائي 64 بت، بما يتوافق مع معيار IEEE 754. لمزيد من المقدمة، يمكنك قراءة منشور المدونة هذا. يمكنك حل هذه المشكلة باستخدام طريقتي toFixed() وtoPrecision().
26 عند استخدام for-in لاجتياز الخصائص الداخلية لكائن ما، انتبه للتحقق من الخصائص.
يتجنب مقتطف التعليمات البرمجية التالي الوصول إلى خصائص النموذج الأولي عند التكرار على خصائص الكائن:
انسخ رمز الكود كما يلي:
لـ (اسم فار في الكائن) {
إذا (object.hasOwnProperty(name)) {
// افعل شيئًا بالاسم
}
}
27 عامل فاصلة
انسخ رمز الكود كما يلي:
فار أ = 0;
فار ب = ( a++, 99 );
console.log(a); // a يساوي 1
console.log(b); // b يساوي 99
28 تخزين المتغيرات التي تتطلب الحساب أو الاستعلام
بالنسبة لمحددات jQuery، من الأفضل تخزين عناصر DOM هذه مؤقتًا.
انسخ الكود كما يلي: var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 التحقق من صحة المعلمات قبل استدعاء isFinite()
انسخ الكود كما يلي: isFinite(0/0); // false
isFinite("foo"); // خطأ
isFinite("10"); // صحيح
isFinite(10); // صحيح
isFinite(unified);
isFinite();
isFinite(null);
30 تجنب الفهارس السالبة في المصفوفات
انسخ الكود كما يلي: var numberArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo") ; // from يساوي -1
أرقام Array.splice (من، 2) // سيعود [5]؛
تأكد من أن المعلمة عند استدعاء IndexOf ليست سالبة.
31 التسلسل وإلغاء التسلسل القائم على JSON (التسلسل وإلغاء التسلسل)
انسخ الكود كالتالي: var person = {name :'Saad', age : 26, Department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson يساوي "{"name": "Saad"، "age": 26، "department": {"ID": 15، "name": "R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString يساوي كائن الشخص */
32 تجنب استخدام eval() ومنشئي الوظائف
يعد استخدام منشئي eval وFunction عمليات مكلفة للغاية لأنهم في كل مرة يستدعون محرك البرنامج النصي لتحويل الكود المصدري إلى كود قابل للتنفيذ.
انسخ الكود كما يلي: var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 تجنب الاستخدام مع ()
يؤدي استخدام with() إلى إدراج متغير عام. لذلك، سيتم استبدال قيم المتغيرات التي تحمل الاسم نفسه وتسبب مشاكل غير ضرورية.
34 تجنب استخدام for-in للتكرار على مصفوفة
تجنب استخدام طرق مثل هذه:
انسخ الكود كما يلي: var sum = 0;
لـ (var i في arrayNumbers) {
sum += arrayNumbers[i];
}
الطريقة الأفضل هي:
انسخ الكود كما يلي: var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
الفائدة الإضافية هي أن قيم المتغيرين i و len يتم تنفيذهما مرة واحدة فقط، وهو أكثر كفاءة من الطريقة التالية:
انسخ الكود كما يلي: for (var i = 0; i < arrayNumbers.length; i++)
لماذا؟ لأنه يتم حساب arrayNumbers.length في كل مرة يتكرر فيها.
35 قم بتمرير الوظائف بدلاً من السلاسل عند استدعاء setTimeout() وsetInterval().
إذا قمت بتمرير سلسلة إلى setTimeout() أو setInterval()، فسيتم تحليل السلسلة كما لو كنت تستخدم eval، وهو ما يستغرق وقتًا طويلاً للغاية.
لا تستخدم:
انسخ رمز الكود كما يلي:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
بدلا من ذلك استخدم:
انسخ رمز الكود كما يلي:
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 استخدم عبارات التبديل/الحالة بدلاً من عبارات if/else الطويلة
عند الحكم على أكثر من حالتين، يكون استخدام المفتاح/الحالة أكثر كفاءة وأكثر أناقة (أسهل في تنظيم التعليمات البرمجية). لكن لا تستخدم المفتاح/الحالة عندما يكون هناك أكثر من 10 حالات يجب الحكم عليها.
37 استخدم المفتاح/الحالة عند الحكم على النطاق الرقمي
في الحالة التالية، من المعقول استخدام المفتاح/الحالة لتحديد نطاق القيمة:
انسخ رمز الكود كما يلي:
وظيفة الحصول على الفئة (العمر) {
فئة فار = "";
التبديل (صحيح) {
الحالة هيNaN(العمر):
الفئة = "ليس عمرًا";
استراحة؛
الحالة (العمر >= 50):
الفئة = "قديم";
استراحة؛
الحالة (العمر <= 20):
فئة = "طفل";
استراحة؛
تقصير:
الفئة = "الشباب";
استراحة؛
};
فئة الإرجاع؛
}
getCategory(5); // سيرجع "الطفل"
// بشكل عام، للحكم على النطاق الرقمي، من الأفضل استخدام if/else. يعد التبديل/الحالة أكثر ملاءمة للحكم على قيم معينة
38 حدد كائن النموذج الأولي للكائن الذي تم إنشاؤه
من الممكن كتابة دالة تنشئ كائنًا بمعلمات محددة كنموذج أولي:
انسخ الكود كما يلي: function clone(object) {
وظيفة OneShotConstructor(){};
OneShotConstructor.prototype= object;
إرجاع OneShotConstructor() الجديد;
}
clone(Array).prototype;
39 وظيفة الهروب HTML
انسخ الكود كما يلي: function escapeHTML(text) {
بدائل var= {"<": "<", ">": ">"،&": "&", "/"": """};
إرجاع text.replace(/[<>&"]/g, function(character) {
استبدال الإرجاع[حرف]؛
});
}
40 تجنب استخدام محاولة الالتقاط أخيرًا داخل الحلقة
في وقت التشغيل، في كل مرة يتم فيها تنفيذ جملة الالتقاط، سيتم تعيين كائن الاستثناء الذي تم التقاطه إلى متغير، وفي بنية محاولة الالتقاط أخيرًا، سيتم إنشاء هذا المتغير في كل مرة.
تجنب الكتابة بهذه الطريقة:
انسخ الكود كما يلي: var object = ['foo', 'bar'], i;
لـ (i = 0, len = object.length; i <len; i++) {
يحاول {
// افعل شيئًا يؤدي إلى استثناء
}
قبض (ه) {
// التعامل مع الاستثناء
}
}
بدلا من ذلك استخدم:
انسخ الكود كما يلي: var object = ['foo', 'bar'], i;
يحاول {
لـ (i = 0, len = object.length; i <len; i++) {
// افعل شيئًا يؤدي إلى استثناء
}
}
قبض (ه) {
// التعامل مع الاستثناء
}
41 قم بتعيين المهلة لطلبات XMLHttp.
بعد أن يستغرق طلب XHR وقتًا طويلاً (على سبيل المثال، بسبب مشاكل في الشبكة)، قد تحتاج إلى إلغاء الطلب، ثم يمكنك استخدام setTimeout() مع استدعاء XHR.
انسخ الكود كما يلي: var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = الوظيفة () {
إذا (this.readyState == 4) {
ClearTimeout(timeout);
// افعل شيئًا ببيانات الاستجابة
}
}
فار مهلة = setTimeout( وظيفة () {
xhr.abort(); // رد اتصال خطأ
}, 60*1000 /* المهلة بعد دقيقة */ );
xhr.open('GET', url, true);
xhr.send();
بالإضافة إلى ذلك، بشكل عام، يجب عليك تجنب طلبات Ajax المتزامنة تمامًا.
42 التعامل مع مهلات WebSocket
عادةً، بعد إنشاء اتصال WebSocket، سينهي الخادم مهلة اتصالك بعد 30 ثانية إذا كنت غير نشط. يتم أيضًا قطع اتصال جدران الحماية بعد فترة من عدم النشاط.
لمنع مشاكل انتهاء المهلة، قد تحتاج إلى إرسال رسائل فارغة إلى الخادم بشكل متقطع. للقيام بذلك، يمكنك إضافة الوظيفتين التاليتين إلى التعليمات البرمجية الخاصة بك: واحدة للحفاظ على الاتصال وواحدة لإلغاء تعليق الاتصال. باستخدام هذه التقنية، يمكنك التحكم في مشكلة المهلة.
استخدم معرف المؤقت:
انسخ الكود كما يلي: var timerID = 0;
وظيفة إبقاء على قيد الحياة () {
فار المهلة = 15000؛
إذا (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
وظيفة إلغاءKeepAlive() {
إذا (معرف الموقت) {
CancelTimeout(timerId);
}
}
يجب إضافة طريقة keepAlive () في نهاية طريقة onOpen () لاتصال webSOcket، وإضافة CancelKeepAlive () في نهاية طريقة onClose ().
43 ضع في اعتبارك أن العوامل البدائية تكون دائمًا أكثر كفاءة من استدعاءات الوظائف. استخدم VanillaJS.
على سبيل المثال، لا تستخدم:
انسخ الكود كما يلي: var min = Math.min(a,b);
A.push(v);
بدلا من ذلك استخدم:
انسخ الكود كما يلي: var min = a < b ?
أ[أ. الطول] = ت؛
44 لا تنس استخدام أدوات ترتيب التعليمات البرمجية عند البرمجة . استخدم JSLint وأدوات ضغط التعليمات البرمجية (التصغير) (مثل JSMin) قبل الاتصال بالإنترنت. "أداة توفير الوقت: أداة تجميل وتنسيق التعليمات البرمجية"
45 جافا سكريبت أمر لا يصدق.
تلخيص
أعلم أن هناك العديد من النصائح والحيل وأفضل الممارسات الأخرى، لذا إذا كان لديك أي شيء آخر ترغب في إضافته أو الحصول على تعليقات أو تصحيحات لتلك التي قمت بمشاركتها، فيرجى إبلاغي بذلك في التعليقات.