JavaScript هي لغة برمجة ذات مستوى عالمي يمكن استخدامها لتطوير الويب وتطوير تطبيقات الهاتف المحمول (PhoneGap و AppCelerator) وتطوير من جانب الخادم (Node.js و Wakanda) ، إلخ. يمكن استخدامه لعرض مربعات موجات بسيطة في المتصفح ، أو للتحكم في الروبوت من خلال Nodebot أو Noderuino. أصبح المطورون الذين يمكنهم كتابة رمز JavaScript جيدًا منظمًا وفعالًا هو أكثر الأشخاص المطلوبين في سوق التوظيف.
في هذه المقالة ، سأشارك بعض نصائح JavaScript والنصائح وأفضل الممارسات. باستثناء عدد قليل ، كلاهما محرك JavaScript للمتصفح ومترجم JavaScript من جانب الخادم.
اجتاز رمز العينة في هذه المقالة الاختبار على أحدث إصدار من Google Chrome 30 (V8 3.20.17.15).
1. تأكد من استخدام الكلمة الرئيسية VAR عند تعيين قيمة لمتغير لأول مرة.
إذا لم يتم الإعلان عن متغير وتم تعيينه مباشرة للقيمة ، فسيتم استخدامه كمتغير عالمي جديد افتراضيًا. حاول تجنب استخدام المتغيرات العالمية.
2. استخدم === استبدال ==
سيقوم المشغلون == و! = بتحويل نوع البيانات تلقائيًا إذا لزم الأمر. ولكن === و! == لن ، سوف يقارنون القيم وأنواع البيانات في نفس الوقت ، مما يجعلها أيضًا أسرع من == و! =.
نسخة الكود كما يلي:
[10] === 10 // كاذب
[10] == 10 // صحيح
'10' == 10 // صحيح
"10 '=== 10 // كاذبة
[] == 0 // صحيح
[] === 0 // كاذب
'' == false // صحيح ولكن صحيح == "a" كاذب
'' === false // كاذبة
3. النتائج المنطقية للسلاسل غير المقلية ، الخالية ، 0 ، كاذبة ، نان ، وخالثة كلها خاطئة
4. استخدم المنقصات في نهاية الخط
في الممارسة العملية ، من الأفضل استخدام فاصلة فاصلة. لا بأس أن ننسى أن تكتبهم. في معظم الحالات ، سيتم إضافة مترجم JavaScript تلقائيًا. لسبب رغبتك في استخدام فاصلة فاصلة ، يمكنك الرجوع إلى الحقيقة حول Semicolons في المقالة JavaScript.
5. استخدم مُنشئ الكائن
نسخة الكود كما يلي:
وظيفة الشخص (FirstName ، LastName) {
this.firstName = firstName ؛
this.lastname = lastName ؛
}
var saad = شخص جديد ("سعد" ، "mousliki") ؛
6.
Typeof: JavaScript Unary Shorpator ، يستخدم لإرجاع النوع الأصلي للمتغير في شكل سلسلة. لاحظ أن typeof null ستعيد أيضًا الكائن ، وسيقوم معظم أنواع الكائنات (الصفيف ، تاريخ الوقت ، وما إلى ذلك) بإرجاع الكائن.
مُنشئ: خصائص النموذج الأولي الداخلي ، والتي يمكن إعادة كتابتها من خلال الكود
مثيل: مشغل JavaScript ، سوف يبحث في المُنشئ في سلسلة النموذج الأولي ، وإرجاع صحيح إذا وجدت ، وإلا فإن العودة كاذبة إذا كان خطأ.
نسخة الكود كما يلي:
var arr = ["A" ، "B" ، "C"] ؛
نوع ARR ؛ // إرجاع "كائن"
arr extryof array // true
arr.constructor () ؛ // []
7. استخدم وظائف التمثيل الذاتي
يتم تنفيذ الوظائف تلقائيًا مباشرة بعد الإنشاء ، والتي تسمى عادةً وظيفة مجهولة المصدر ذاتيًا أو تعبيرات وظيفة المكالمات المباشرة (تعبير وظيفة تم استدعاؤها على الفور). التنسيق كما يلي:
نسخة الكود كما يلي:
(وظيفة(){
// سيتم تنفيذ الكود الموضوعة هنا تلقائيًا
}) () ؛
(وظيفة (أ ، ب) {
var result = a+b ؛
نتيجة العودة
}) (10،20)
8. احصل بشكل عشوائي على أعضاء من المصفوفة
نسخة الكود كما يلي:
var heads = [12 ، 548 ، 'a' ، 2 ، 5478 ، 'foo' ، 8852 ، 'doe' ، 2145 ، 119] ؛
var randomitem = العناصر [math.floor (math.random () * items.length)] ؛
9. احصل على أرقام عشوائية ضمن النطاق المحدد
هذه الوظيفة رقمية بشكل خاص عند إنشاء بيانات خاطئة للاختبار ، مثل عدد الأجور ضمن نطاق محدد.
نسخة الكود كما يلي:
var x = math.floor (math.random () * (max - min + 1)) + min ؛
10. قم بإنشاء مجموعة من الأرقام من 0 إلى قيم محددة
نسخة الكود كما يلي:
var numberarray = [] ، max = 100 ؛
لـ (var i = 1 ؛ numberArray.push (i ++) <max ؛) ؛ // الأرقام = [1،2،3 ... 100]
11. توليد سلاسل أبجدية رقمية عشوائية
نسخة الكود كما يلي:
وظيفة enderandomalphanum (len) {
var rdmsstring = "" ؛
لـ (؛ rdmstring.length <len ؛ rdmstring += math.random (). toString (36) .Substr (2)) ؛
return rdmsstring.substr (0 ، len) ؛
12. تعطل ترتيب صفائف الأرقام
نسخة الكود كما يلي:
VAR NUMBERS = [5 ، 458 ، 120 ، -215 ، 228 ، 400 ، 122205 ، -85411] ؛
الأرقام = الأرقام.
/ * سوف تكون صفيف الأرقام مشابهة لـ [120 ، 5 ، 228 ، -215 ، 400 ، 458 ، -85411 ، 122205] */
هنا نستخدم وظيفة فرز الصفيف المدمجة لجافا سكريبت. طريقة أفضل هي تنفيذها باستخدام رمز خاص (مثل خوارزمية Fisher-Yates). يمكنك الرجوع إلى هذه المناقشة على Stackoverflow.
13. قم بإزالة المساحات من السلاسل
تنفذ اللغات مثل Java و C# و PHP وظائف SPISTERS SPACE الخاصة ، ولكن لا يوجد شيء مثل JavaScript. يمكنك استخدام الكود التالي لعمل وظيفة تقليم لوظيفة كائن السلسلة:
نسخة الكود كما يلي:
string.prototype.trim = function () {return this.replace (/^/s+|/s+$/g ، "") ؛} ؛
يحتوي محرك JavaScript الجديد بالفعل على تنفيذ أصلي لـ TRIM ().
14. إضافة بين المصفوفات
نسخة الكود كما يلي:
var array1 = [12 ، "foo" ، {name "Joe"} ، -2458] ؛
var array2 = ["doe" ، 555 ، 100] ؛
Array.Prototype.push.apply (Array1 ، Array2) ؛
/ * قيمة Array1 هي [12 ، "Foo" ، {name "Joe"} ، -2458 ، "Doe" ، 555 ، 100] */
15. تحويل الكائنات إلى صفائف
نسخة الكود كما يلي:
var argarray = array.prototype.slice.call (وسيطات) ؛
16. تحقق مما إذا كان رقمًا
نسخة الكود كما يلي:
وظيفة isnumber (n) {
العودة! isnan (parsefloat (n)) && isfinite (n) ؛
}
17. تحقق مما إذا كانت صفيف
نسخة الكود كما يلي:
وظيفة isarray (obj) {
return object.prototype.toString.call (obj) === '[abours array]' ؛
}
ولكن إذا تم إعادة كتابة طريقة ToString () ، فلن تعمل. يمكنك أيضًا استخدام الطريقة التالية:
نسخة الكود كما يلي:
Array.Isarray (OBJ) ؛ // إنها طريقة صفيف جديدة
إذا لم تستخدم الإطار في متصفحك ، فيمكنك أيضًا استخدام مثيل ، ولكن إذا كان السياق معقدًا للغاية ، فيمكنك أيضًا ارتكاب خطأ.
نسخة الكود كما يلي:
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) ؛ // [A ، B ، 10]
// فقد مُنشئ MyArray ، ونتيجة لمثلة OF غير طبيعية
// لا يمكن مشاركة البنائين عبر الإطارات
ARR مثيل Array ؛ // خطأ شنيع
18. احصل على الحد الأقصى والحد الأدنى للقيم في الصفيف
نسخة الكود كما يلي:
VAR NUMBERS = [5 ، 458 ، 120 ، -215 ، 228 ، 400 ، 122205 ، -85411] ؛
var maxinnumbers = math.max.apply (الرياضيات ، الأرقام) ؛
var mininnumbers = math.min.apply (الرياضيات ، الأرقام) ؛
19. مسح المصفوفة
نسخة الكود كما يلي:
var myarray = [12 ، 222 ، 1000] ؛
myarray.length = 0 ؛ // سوف يكون Myarray مساوياً لـ [].
20. لا تحذف أو إزالة العناصر مباشرة من الصفيف
إذا كنت تستخدم Delete مباشرة على عناصر الصفيف ، فلن يتم حذفه بالفعل ، ولكن فقط قم بتعيين العنصر على أنه غير محدد. يجب استخدام لصق لحذف عنصر الصفيف.
لا:
نسخة الكود كما يلي:
VAR heads = [12 ، 548 ، 'A' ، 2 ، 5478 ، 'Foo' ، 8852 ، 'Doe' ، 2154 ، 119] ؛
items.length ؛ // العودة 11
حذف العناصر [3] ؛ // إرجاع صحيح
items.length ؛ // العودة 11
/ * العناصر النتيجة هي [12 ، 548 ، "A" ، غير محدد × 1 ، 5478 ، "فو" ، 8852 ، غير محدد × 1 ، "Doe" ، 2154 ، 119] */
أما بالنسبة ل:
نسخة الكود كما يلي:
VAR heads = [12 ، 548 ، 'A' ، 2 ، 5478 ، 'Foo' ، 8852 ، 'Doe' ، 2154 ، 119] ؛
items.length ؛ // العودة 11
items.splice (3،1) ؛
items.length ؛ // العودة 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. استخدم المنطق و / أو في الظروف
نسخة الكود كما يلي:
var foo = 10 ؛
foo == 10 && dosomething () ؛ // هو نفس الشيء كما لو (foo == 10) dosomething () ؛
foo == 5 || dosomething () ؛ // هو نفس الشيء كما لو (foo! = 5) dosomething () ؛
المنطقي أو يمكن أيضًا استخدامه لتعيين القيم الافتراضية ، مثل القيم الافتراضية لمعلمات الوظيفة.
نسخة الكود كما يلي:
وظيفة dosomething (Arg1) {
arg1 = arg1 || 10 ؛ // سيكون لدى Arg1 10 كقيمة افتراضية إذا لم يتم تعيينها بالفعل
}
23. اجعل طريقة وظيفة الخريطة () حلقة البيانات
نسخة الكود كما يلي:
مربعات var = [1،2،3،4] .map (وظيفة (val) {
إرجاع فال * فال ؛
}) ؛
// ستكون المربعات مساوية لـ [1 ، 4 ، 9 ، 16]
24. احتفظ بالعدد المحدد للأماكن العشرية
نسخة الكود كما يلي:
var num = 2.443242342 ؛
num = num.tofixed (4) ؛ // num سوف تساوي 2.4432
لاحظ أن Tofixec () إرجاع سلسلة ، وليس رقمًا.
25. مشاكل حساب النقطة العائمة
نسخة الكود كما يلي:
0.1 + 0.2 === 0.3 // كاذبة
9007199254740992 + 1 // يساوي 9007199254740992
9007199254740992 + 2 // يساوي 9007199254740994
لماذا؟ لأن 0.1+0.2 يساوي 0.3000000000000000000004. يتم إنشاء أرقام JavaScript وفقًا لمعايير IEEE 754 ويتم تمثيلها داخليًا من خلال العشرية العائمة 64 بت. للحصول على التفاصيل ، يرجى الرجوع إلى كيفية ترميز الأرقام في JavaScript.
يمكن حل هذه المشكلة باستخدام Tofixed () و TopRecision ().
26. تحقق من خصائص الكائن من خلال الحلقة
يمكن للاستخدام التالي منعه من إدخال خصائص النموذج الأولي للكائن أثناء التكرار.
نسخة الكود كما يلي:
لـ (اسم var في الكائن) {
if (object.hasownproperty (name)) {
// افعل شيئًا بالاسم
}
}
27. مشغل الفاصلة
نسخة الكود كما يلي:
var a = 0 ؛
var b = (a ++ ، 99) ؛
console.log (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) ؛ // خطأ شنيع
isfinite ("foo") ؛ // خطأ شنيع
isfinite ("10") ؛ // حقيقي
isfinite (10) ؛ // حقيقي
isfinite (غير محدد) ؛ // خطأ شنيع
isfinite () ؛ // خطأ شنيع
isfinite (خالية) ؛ // صحيح ، إيلاء اهتمام خاص لهذا
30. تجنب استخدام الأرقام السلبية كفهرسة في المصفوفات
نسخة الكود كما يلي:
var numberarray = [1،2،3،4،5] ؛
var from = numberArray.indexof ("foo") ؛ // من يساوي -1
numberArray.splice (من ، 2) ؛ // سيعود [5]
لاحظ أن معلمة الفهرس التي تم تمريرها إلى لصق ليست رقم سالب. عندما يكون رقمًا سالبًا ، سيتم حذف العنصر من نهاية الصفيف.
31. استخدم JSON لتسلسله وتهرب
نسخة الكود كما يلي:
var person = {name: 'Saad' ، العمر: 26 ، القسم: {id: 15 ، الاسم: "R & D"}} ؛
var stringfromserson = json.stringify (person) ؛
/ * Stringfromserson نتيجة "{" name ":" Saad "،" Age ": 26 ،" Department ": {" id ": 15 ،" name ":" r & d "}}" */
var personfromString = json.parse (StringFromerson) ؛
/* قيمة profermstring هي نفس قيمة الكائن الشخص*/
32. لا تستخدم eval () أو منشئ الوظائف
النفقات العامة من eval () ومقدمات الوظائف عالية. في كل مرة يتم استدعاؤها ، يحتاج محرك JavaScript إلى تحويل الكود المصدر إلى رمز قابل للتنفيذ.
نسخة الكود كما يلي:
var func1 = دالة جديدة (dunctionCode) ؛
var func2 = eval (functionCode) ؛
33. تجنب استخدام مع ()
استخدم مع () لإضافة متغيرات إلى النطاق العالمي. لذلك ، إذا كانت هناك متغيرات أخرى تحمل نفس الاسم ، فمن السهل الخلط بينها ، وسيتم كتابة القيمة أيضًا.
34. لا تستخدم من أجل الصفيفات
يتجنب:
نسخة الكود كما يلي:
var sum = 0 ؛
لـ (var i in arraynumbers) {
sum += arraynumbers [i] ؛
}
بدلاً من:
نسخة الكود كما يلي:
var sum = 0 ؛
لـ (var i = 0 ، len = arraynumbers.length ؛ i <len ؛ i ++) {
sum += arraynumbers [i] ؛
}
ميزة أخرى هي أن المتغيرين I و Len في الإعلان الأول للحلقة For ، وسيتم تهيئتهما مرة واحدة فقط ، وهو أسرع من طريقة الكتابة التالية:
نسخة الكود كما يلي:
لـ (var i = 0 ؛ i <arraynumbers.length ؛ i ++)
35. استخدم الوظائف بدلاً من السلاسل عند المرور إلى setInterval () و setTimeOut ()
إذا قمت بتمرير سلسلة إلى setTimeOut () و setInterval () ، فسيتم تحويلها بطريقة مماثلة إلى Eval ، والتي ستكون بالتأكيد أبطأ ، لذلك لا تستخدم:
نسخة الكود كما يلي:
setInterval ('dosomethingperiodally ()' ، 1000) ؛
setTimeout ('dosomethingAfterFiveSeconds ()' ، 5000) ؛
بدلاً من ذلك ، استخدم:
نسخة الكود كما يلي:
setInterval (dosomethingperiodicaly ، 1000) ؛
setTimeout (dosomethingAfterFiveSeconds ، 5000) ؛
36. استخدم التبديل/العلبة بدلاً من كومة كبيرة من إذا/آخر
عند الحكم على وجود أكثر من فرعين ، استخدم التبديل/الحالة لتكون أسرع وأكثر أناقة وأكثر مواتية لتنظيم الكود. بالطبع ، إذا كان هناك أكثر من 10 فروع ، فلا تستخدم التبديل/الحالة.
37. استخدم الفواصل الرقمية في التبديل/الحالة
في الواقع ، يمكن أيضًا كتابة شروط الحالة في التبديل/الحالة على هذا النحو:
نسخة الكود كما يلي:
وظيفة getCategory (العمر) {
var category = "" ؛
التبديل (صحيح) {
القضية isnan (العمر):
الفئة = "ليس عمرًا" ؛
استراحة؛
الحالة (العمر> = 50):
الفئة = "القديم" ؛
استراحة؛
الحالة (العمر <= 20):
الفئة = "الطفل" ؛
استراحة؛
تقصير:
الفئة = "يونغ" ؛
استراحة؛
} ؛
فئة العودة ؛
}
GetCategory (5) ؛ // سيعود "حبيبي"
38. استخدم الكائنات كنماذج أولية
وبهذه الطريقة ، يمكنك إنشاء كائن جديد بناءً على هذا كمعلمة:
نسخة الكود كما يلي:
وظيفة استنساخ (كائن) {
وظيفة oneshotconstructor () {} ؛
oneshotconstructor.prototype = كائن ؛
إرجاع oneshotconstructor () ؛
}
استنساخ (صفيف). النموذج ؛ // []
39. وظيفة تحويل حقل HTML
نسخة الكود كما يلي:
وظيفة excarthtml (نص) {
var replacements = {"<": "<" ، ">": ">" ، "&": "&" ، ":" ""} ؛
إرجاع text.replace (/[<> & "]/g ، وظيفة (حرف) {
إرجاع بدائل [حرف] ؛
}) ؛
}
40. لا تستخدم المحاولة-داخل الحلقة
سيقوم جزء catch في Try-Catch-Finally بتعيين استثناءات لمتغير عند تنفيذها ، وسيتم إنشاء هذا المتغير في متغير جديد داخل نطاق وقت التشغيل.
لا:
نسخة الكود كما يلي:
var object = ['foo' ، 'bar'] ، i ؛
لـ (i = 0 ، len = object.length ؛ i <len ؛ i ++) {
يحاول {
// افعل شيئًا يلقي استثناء
}
catch (e) {
// التعامل مع الاستثناء
}
}
بدلاً من:
نسخة الكود كما يلي:
var object = ['foo' ، 'bar'] ، i ؛
يحاول {
لـ (i = 0 ، len = object.length ؛ i <len ؛ i ++) {
// افعل شيئًا يلقي استثناء
}
}
catch (e) {
// التعامل مع الاستثناء
}
41. انتبه إلى تحديد المهلة عند استخدام XMLHTTPrequests
عند تنفيذ XMLHTTPrequests ، عندما لا يكون هناك استجابة لفترة طويلة (مثل مشاكل الشبكة ، إلخ) ، يجب إحباط الاتصال. يمكن القيام بهذا العمل بواسطة setTimeOut ():
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.OnReadyStateChange = function () {
إذا (this.readyState == 4) {
ClearTimeout (مهلة) ؛
// افعل شيئًا مع بيانات الاستجابة
}
}
var timeout = setTimeOut (function () {
XHR.Abort () ؛ // Call Error Callback
} ، 60*1000 /*timeout بعد دقيقة* /) ؛
XHR.Open ('get' ، url ، true) ؛
xhr.send () ؛
في الوقت نفسه ، تجدر الإشارة إلى أنه لا ينبغي بدء طلبات XMLHTTPrequests المتعددة في نفس الوقت.
42. التعامل مع مهلة WebSocket
بشكل عام ، بعد إنشاء اتصال WebSocket ، إذا لم يكن هناك أي نشاط في غضون 30 ثانية ، فإن الخادم سيقوم بوقت التوصيل ، ويمكن لجدار الحماية أيضًا وقت التوصيل غير النشط في دورة الوحدة.
لمنع حدوث ذلك ، يمكن إرسال رسالة فارغة إلى الخادم في كل وقت معين. يمكن تحقيق هذا المطلب من خلال وظيفتين التاليتين ، واحدة للحفاظ على اتصال نشط والآخر خصيصًا لإنهاء هذه الحالة.
نسخة الكود كما يلي:
var timerid = 0 ؛
وظيفة keepalive () {
var timeout = 15000 ؛
if (websocket.readyState == WebSocket.open) {
WebSocket.send ('') ؛
}
timerid = setTimeOut (keepalive ، timeout) ؛
}
وظيفة إلغاء MESSINGEALIVE () {
إذا (timerid) {
canceltimeout (timerid) ؛
}
}
يمكن وضع وظيفة KeepAlive () في نهاية طريقة OnoPen () لاتصال WebSocket ، ويمكن وضع CancelKeepalive () في نهاية طريقة OnClose ().
43. انتبه إلى الوقت والمشغل الأصلي أسرع من استدعاء الوظيفة. استخدام الفانيليا
على سبيل المثال ، بشكل عام ليس مثل هذا:
نسخة الكود كما يلي:
var min = math.min (a ، b) ؛
A.Push (V) ؛
يمكن استخدام هذا بدلاً من ذلك:
نسخة الكود كما يلي:
var min = a <b؟ ج: ب ؛
A [A.Length] = V ؛
44. انتبه إلى بنية الكود أثناء التطوير والتحقق وضغط رمز JavaScript قبل الاتصال بالإنترنت
يمكنك استخدام أدوات مثل JSLINT أو JSMIN للتحقق من الرمز وضغطه.