تصف هذه المقالة 14 قاعدة يجب اتباعها عند كتابة رمز JavaScript. شاركه للرجوع إليه ، على النحو التالي:
1. دائما استخدم "فار"
في JavaScript ، تكون المتغيرات إما عالميًا أو على مستوى الوظيفة. سيكون استخدام الكلمة الرئيسية "VAR" المفتاح للحفاظ على المتغيرات موجزة وواضحة. عند الإعلان عن متغير إما عالمي أو مستوى الوظيفة ، يجب أن تسبق دائمًا الكلمة الرئيسية "VAR". المثال التالي سيؤكد على المشكلة المحتملة لعدم القيام بذلك.
المشاكل الناجمة عن عدم استخدام var
var i = 0 ؛ // هذا أمر جيد - ينشئ اختبار دالة متغير عالمي () {for (i = 0 ؛ i <10 ؛ i ++) {Alert ("Hello World!") ؛}} test () ؛ Alert (i) ؛ // المتغير العالمي أنا الآن 10!نظرًا لأن المتغير I في الوظيفة المتغيرة لا يستخدم VAR لجعله متغيرًا على مستوى الوظيفة ، فإنه يشير في هذا المثال إلى متغير عالمي. يعد استخدام VAR دائمًا لإعلان المتغيرات العالمية الكثير من الممارسة ، ولكن من الأهمية بمكان استخدام VAR لتحديد متغير على نطاق الوظيفة. الطريقتين التاليتين هما نفس الشيء:
الوظيفة الصحيحة
وظيفة اختبار () {var i = 0 ؛ for (i = 0 ؛ i <10 ؛ i ++) {Alert ("Hello World!") ؛}}الوظيفة الصحيحة
اختبار الوظيفة () {for (var i = 0 ؛ i <10 ؛ i ++) {Alert ("Hello World!") ؛}}2. اكتشاف الميزات بدلاً من اكتشاف المتصفح
تتم كتابة بعض التعليمات البرمجية لاكتشاف إصدار المتصفح وأداء سلوكيات مختلفة عليها بناءً على العميل الذي يستخدمه المستخدم. هذا ، بشكل عام ، هو ممارسة سيئة للغاية. تتمثل الطريقة الأفضل في استخدام اكتشاف الميزات ، واكتشف أولاً (المتصفح) ما إذا كانت هناك هذه الميزة أو الميزة قبل استخدام ميزة متقدمة قد لا يدعمها المتصفح القديم ، ثم استخدامها. هذا يكتشف بشكل فردي إصدار المتصفح يأتي أفضل ، حتى لو كنت تعرف أدائها. يمكنك العثور على مقال يناقش هذه المشكلة بعمق في http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
مثال:
if (document.getElementById) {var element = document.getElementById ('myid') ؛} ell {Alert ('يفتقر متصفحك إلى القدرات المطلوبة لتشغيل هذا البرنامج النصي!) ؛}3. استخدم تدوين قوس مربع
عند تحديد الوصول عن طريق التنفيذ أو يتضمن خصائص كائن لا يمكن الوصول إليها مع "." علامة ، يتم استخدام تدوين قوس مربع. إذا لم تكن مبرمجًا من ذوي الخبرة في JavaScript ، فإن استخدام الأقواس المربعة دائمًا طريقة جيدة للقيام بذلك
يتم الوصول إلى خصائص كائن ما بواسطة طريقتين ثابتتين: ".
"." طريقة التدوين:
myobject.property
"[]" تدوين قوس مربع:
MyObject ["Property"]
استخدم "." علامة ، اسم السمة هو رمز صلب ولا يمكن تغييره أثناء التنفيذ. باستخدام الأقواس المربعة "[]" ، فإن اسم السمة عبارة عن سلسلة تأتي من حساب اسم السمة. يجب أن تكون السلسلة رمزًا صلبًا ، أو متغيرًا ، أو حتى وظيفة تعيد قيمة السلسلة مرة أخرى. إذا تم إنشاء اسم سمة أثناء التنفيذ ، فستكون هناك حاجة إلى قوسين مربع. إذا كان لديك خصائص مثل "value1" و "value2" و "value3" ، وتريد استخدام المتغير i = 2 للوصول إليه
هذا يمكن أن يعمل:
myobject ["القيمة"+أنا]
هذا لا يمكن أن يكون:
myobject.value+i
وفي بعض البيئات من جانب الخادم (PHP ، الدعامات ، وما إلى ذلك) ، يتم إرفاق نماذج النماذج بأرقام [] للإشارة إلى أن نماذج النماذج يجب أن تعامل كصفائف على جانب الخادم. بهذه الطريقة ، باستخدام "." علامة للإشارة إلى حقل يحتوي على علامة [] لن يتم تنفيذها لأن [] هو بناء الجملة للإشارة إلى صفيف JavaScript. لذلك ، [] التدوين ضروري:
هذا يمكن أن يعمل:
FormRef.Elements ["name []"]
هذا لا يمكن أن يكون:
formref.elements.name []
يعني الاستخدام الموصى به لتدوين "[]" قوس المربع أنه يتم استخدامه دائمًا عندما يحتاج إليه (من الواضح). إنه تفضيل خاص وعادة عندما لا يكون من الضروري تمامًا استخدامه. مبدأ تجريبي جيد هو استخدام "." تدوين للوصول إلى خصائص الكائن القياسية واستخدام تدوين "[]" Square Bracket للوصول إلى خصائص الكائن المحددة بواسطة الصفحة. وبهذه الطريقة ، فإن المستند ["getElementById"] () هو استخدام تدوين قوس مربع مجهول تمامًا "[] ، لكن المستند. امزج هذين التدوينين لصنعه وهو سمة كائن قياسية وأي اسم السمة يتم تعريفه بواسطة السياق يجعله واضحًا في الكود:
document.forms ["myFormName"]. عناصر ["myinput"]. القيمة
هنا ، النماذج هي خاصية قياسية للوثيقة ، ويتم تعريف اسم myFormName بواسطة الصفحة. في الوقت نفسه ، فإن العناصر وسمات القيمة هي سمات قياسية محددة بواسطة المواصفات. يتم تعريف myinput بواسطة الصفحة. هذه الصفحة هي بناء جملة تجعل الأشخاص سهلين للغاية لفهمه (محتوى الكود) ، وهو تعبير موصى به ، ولكن ليس مبدأ صارم.
4. تجنب "التقييم"
في JavaScript ، وظيفة eval () هي طريقة لتنفيذ التعليمات البرمجية التعسفية أثناء التنفيذ. في جميع الحالات تقريبًا ، لا ينبغي استخدام eval. إذا ظهر في صفحتك ، فهذا يعني أن هناك طريقة أفضل لما تفعله. على سبيل المثال ، يتم استخدام Eval عادةً من قبل المبرمجين الذين لا يعرفون استخدام تدوين قوسين مربع.
من حيث المبدأ ، "eval is Evil (eval هو الشيطان). لا تستخدمه إلا إذا كنت مطورًا متمرسًا وتعرف أن وضعك هو استثناء.
5. المراجع الصحيحة إلى عناصر النموذج والشكل
يجب أن تحتوي جميع نماذج HTML على سمة الاسم. بالنسبة لمستندات XHTML ، فإن سمة الاسم غير مطلوبة ، ولكن يجب أن تحتوي علامة النموذج على سمة المعرف المقابل ويجب الرجوع إليها باستخدام document.getElementById (). يعد استخدام طرق الفهرسة مثل المستند. تعامل بعض المتصفحات عناصرها المسمى في المستندات باستخدام النموذج كسمة نموذج متوفرة. هذا غير موثوق ولا ينبغي استخدامه.
يوضح المثال التالي كيفية منع مرجع غير صحيح لإدخال النموذج باستخدام أقواس مربعة وطريقة مرجع الكائن الصحيحة:
إدخال النموذج المرجعي الصحيح:
document.forms ["formname"]. عناصر ["inputName"]
النهج السيئ:
document.formname.inputName
إذا كنت ترغب في الرجوع إلى عنصرين نموذجين في دالة ، فمن الأفضل الإشارة إلى كائن النموذج أولاً وتخزينه في متغير. هذا يتجنب الاستفسارات المكررة لحل مراجع النموذج:
var formelements = document.forms ["mainform"]. Enements ؛ formelements ["input1"]. value = "a" ؛ formelements ["" input2 "]. value =" b "؛
عند استخدام OnChange أو غيرها من طرق معالجة الأحداث المماثلة ، فإن النهج الجيد هو الرجوع دائمًا إلى عنصر الإدخال نفسه في الوظيفة من خلال الإدخالات. تحمل جميع عناصر الإدخال إشارة إلى النموذج الذي يحتوي عليه:
<type type = "text" name = "address" onChange = "Validate (this)">
وظيفة التحقق من صحة (input_obj) {// formvar formvar theform تحتوي على هذا العنصر = input_obj.form ؛ // الآن يمكنك الرجوع إلى النموذج نفسه دون استخدام رمز صلب إذا (theform.elements ["City"]. value == "") {Alert ("error") ؛}}من خلال الوصول إلى خصائص النموذج من خلال الرجوع إلى عنصر النموذج ، يمكنك كتابة وظيفة لا تحتوي على رمز صلب للإشارة إلى أي نموذج على هذه الصفحة باسم محدد. هذه ممارسة جيدة جدًا لأن الوظائف تصبح قابلة لإعادة الاستخدام.
تجنب "مع"
مع الإعلان في JavaScript يدرج كائن على الطرف الأمامي من النطاق ، لذلك سيتم حل أي إشارة إلى السمات/المتغيرات أولاً بناءً على الكائن. غالبًا ما يستخدم هذا كاختصار لتجنب المراجع المكررة:
مثال على الاستخدام مع:
مع (document.forms ["mainform"]. العناصر) {input1.value = "Junk" ؛ input2.value = "Junk" ؛}ولكن المشكلة هي أن المبرمجين ليس لديهم وسيلة للتحقق من أن input1 أو input2 قد تم حلها بالفعل كخصائص من صفائف عناصر النماذج. يكتشف أولاً السمة بقيم الأسماء هذه ، وإذا لم يكن من الممكن العثور عليها ، فسيستمر في اكتشاف هذا النطاق (إلى أسفل). أخيرًا ، يحاول علاج input1 و input2 ككائن عالمي ، وهذا ينتهي بخطأ.
يتمثل الحل البديل في إنشاء كائن يقلل من المراجع واستخدامه لحل هذه المراجع.
استخدم مرجعًا:
var elements = document.forms ["mainform"]. Elements ؛ elements.input1.value = "Junk" ؛ elements.input2.value = "Junk" ؛
7. استخدم "Onclick" في المرساة بدلاً من "JavaScript: Pseudo-Protocol"
إذا كنت ترغب في تشغيل رمز JavaScript في علامة <a> ، فاختر Onclick بدلاً من JavaScript: Pseudo-Protocol ؛ يجب أن يعيد رمز JavaScript الذي يعمل باستخدام OnClick Ture أو خطأ (أو تعبير بدلاً من التقييمات إلى True أو False [كيفية ترجمة هذه الجملة؟ أفهم بهذه الطريقة: تعبير بأولوية أعلاه أو خطأ]) لإرجاع العلامة نفسها: إذا كان هذا صحيحًا ، فسيتم التعامل مع HREF من المرساة كرابط عام ؛ إذا كان خطأ ، سيتم تجاهل HREF. لهذا السبب "العودة كاذبة" ؛ غالبًا ما يتم تضمينه في نهاية الكود الذي تمت معالجته بواسطة OnClick.
بناء الجملة الصحيح:
انسخ الرمز كما يلي: <a href = "// www.vevb.com" onClick = "dosomething () ؛ return false ؛"> go </a>
في هذه الحالة ، سيتم استدعاء وظيفة "dosomething ()" (المحددة في زاوية الصفحة) عند النقر عليها. لن يتم الوصول إلى HREF من قبل متصفح يدعم JavaScript. سيتم تحميل المستند javaScript_Required.html في متصفح حيث يمكنك تذكير JavaScript الضروري وعدم تمكينه من قبل المستخدم. عادةً ، عندما تتأكد من أن المستخدم سيمكّن دعم JavaScript ، إلى أقصى حد ممكن ، سيتضمن الرابط HREF = "#". وهذا النهج لا يتم تشجيعه. عادة ما يكون هناك نهج جيد: يمكن أن يوفر صفحة تعود إلى المنطقة المحلية دون استخدام JavaScript.
في بعض الأحيان ، يرغب الكثير من الناس في زيارة رابط وفقًا للمواقف. على سبيل المثال ، عندما يريد المستخدم ترك إحدى صفحات النموذج الخاصة بك ويريد التحقق أولاً للتأكد من عدم تغيير أي شيء. في هذه الحالة ، سيصل onclick الخاص بك إلى وظيفة تُرجع استعلامًا ما إذا كان ينبغي اتباع الرابط:
وصول الارتباط الشرطي:
<a href = "/" onclick = "return validate () ؛"> home </a>
وظيفة التحقق () {عودة موجه ("هل أنت متأكد أنك تريد الخروج من هذه الصفحة؟") ؛}في هذه الحالة ، يجب أن تعود وظيفة التحقق من صحة () فقط أو خاطئة. عندما يكون المستخدم في Ture ، سيتم السماح للمستخدم بإصدار الصفحة الرئيسية ، أو عندما لا يتم الوصول إلى الرابط. يطالب هذا المثال بالتأكيد (سلوكه) على الوصول إلى ture أو false ، والذي يتم تحديده بالكامل من قبل المستخدم الذي ينقر "حقيقي" أو "إلغاء".
فيما يلي بعض الأمثلة على "لا ينبغي أن تكون". إذا رأيت الرمز التالي في صفحتك ، فهذا غير صحيح ويجب تعديله:
ما لا ينبغي القيام به:
<a href = "javaScript: dosomething ()"> الارتباط </a> <a href = "// www.vevb.com/#" onClick = "dosomething ()> link </a> <a href =" // www.vevb.com/# "onClick =" javaScript: href = "// www.vevb.com/#" onClick = "javaScript: dosomething () ؛ return false ؛"> link </a>
8. استخدم مشغل Unary '+"لتحويل النوع إلى الرقم
في JavaScript ، يعمل مشغل علامة "+" كعلامة رياضية بالإضافة إلى موصل. يمكن أن يسبب ذلك مشاكل عند إضافة قيم الحقل للنموذج معًا. على سبيل المثال ، نظرًا لأن JavaScript هي لغة ضعيفة من النوع ، فإن قيمة حقل النموذج ستتم معالجتها كصفيف ، وعندما تأخذها معًا ، سيتم التعامل مع "+" كموصل ، وليس علامة رياضية إضافية.
أمثلة على المشاكل:
<form name = "myform" Action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"
الدالة total () {var theform = document.forms ["myform"] ؛ var total = theform.Elements ["val1"]. value + theform.Elements ["Val2"]. value ؛ Alert (total) ؛ // سيظهر هذا "12" ، لكن ما تريده هو 3!}لحل هذه المشكلة ، يحتاج JavaScript إلى موجه لجعلها تقوم بمعالجة هذه القيم كأرقام. يمكنك استخدام علامة "+" لتحويل صفيف إلى رقم. سيؤدي تقديم متغير أو تعبير مع علامة "+" إلى إجباره على معالجته كرقم ، وهذا سيمكن أيضًا من تطبيق Math "+" من تطبيقه بنجاح.
الكود المعدل:
الدالة total () {var theform = document.forms ["myform"] ؛ var total = (+theform.elements ["val1"]. value)+(+theform.Elements ["Val2"]. value) ؛ ALERT (TOTAL) ؛ // هذا سوف ينبه 3}9. تجنب المستند
تم تقديم Document.all بواسطة Microsoft's IE وليست ميزة JavaScript DOM قياسية. على الرغم من أن معظم المتصفحات الجديدة تدعمها لدعم التعليمات البرمجية السيئة التي تعتمد عليها ، (و) هناك العديد من المتصفحات التي لا تدعمها.
لا يوجد سبب لا ينطبق طرق أخرى ، ويحتاج متصفح IE القديم (<5.0) إلى الدعم ، ويتم استخدام جميع المستند. لا تحتاج إلى استخدام المستند. كل ذلك لاكتشاف ما إذا كان متصفح IE ، لأن المتصفحات الأخرى تدعمه الآن بشكل عام.
الوثيقة فقط. كل الخيار الأخير:
if (document.getElementById) {var obj = document.getElementById ("myid") ؛} آخر إذا (document.all) {var obj = document.all ("myid") ؛}بعض مبادئ استخدام المستند.
جرب طرق أخرى
عندما يكون الخيار الأخير
عندما يكون هناك حاجة لدعم متصفحات IE أدناه الإصدار 5.0
استخدم دائمًا "if (document.all) {}" لمعرفة ما إذا كان مدعومًا.
10. لا تستخدم تعليقات HTML في كتل رمز البرنامج النصي
في الأيام الخوالي من JavaScript (1995) ، لم تدعم بعض المتصفحات مثل Netscape 1.0 العلامة <script>. لذلك ، عندما تم إصدار JavaScript لأول مرة ، كانت هناك تقنية من شأنها أن تمنع الكود الفعلي من عرض المتصفحات القديمة كنص. هناك "اختراق" يستخدم تعليقات HTML في الكود لإخفاء هذه الرموز.
جعل تعليقات HTML غير جيدة:
<script language = "javaScript"> <!-// code هنا //-> </script>
اليوم ، لا يتجاهل أي متصفح شائع الاستخدام علامة <script>. لذلك ، ليست هناك حاجة لإخفاء رمز مصدر JavaScript بعد الآن. في الواقع ، يمكن اعتباره أيضًا غير مفيد للأسباب التالية:
في وثائق XHTML ، سيتم إخفاء رمز المصدر من جميع المتصفحات ويتم تقديمه إلى عديمة الفائدة (محتوى) ؛
لا يُسمح بتعليقات HTML ، وهذا سيؤدي إلى إبطال أي عملية انخفاض.
11. تجنب استخدام مساحات الأسماء العالمية بشكل عشوائي
بشكل عام ، نادراً ما تكون هناك حاجة إلى جميع المتغيرات والوظائف. قد يتسبب الاستخدام العالمي في تعارض مستندات ملف JavaScript ، وإجهاض الكود. لذلك ، فإن النهج الجيد هو تبني التغليف الوظيفي داخل مساحة الاسم العالمية. هناك طرق متعددة لإكمال هذه المهمة ، وهي معقدة نسبيًا. أسهل طريقة هي إنشاء كائن عالمي وتعيين خصائص وطرق لهذا الكائن:
قم بإنشاء مساحة اسم:
var mylib = {} ؛ // الكائن العالمي يحتوي على intermylib.value = 1 ؛ mylib.increment = function () {mylib.value ++ ؛} mylib.show = function () {Alert (mylib.value) ؛} mylib.value = 6 ؛ mylib.increment () ؛ mylib.show () ؛ // التنبيهات 7يمكن أيضًا إنشاء مساحات الأسماء باستخدام عمليات الإغلاق ، ويمكن أيضًا إخفاء متغيرات الأعضاء الخاص في JavaScript.
12. تجنب مكالمات "Ajax" المتزامنة
عند استخدام طلب "ajax" ، يمكنك إما تحديد الوضع غير المتزامن أو استخدام وضع متزامن. عندما يمكن تنفيذ سلوك المتصفح ، يضع الوضع غير المتزامن الطلب في الخلفية وسيتم انتظار الوضع المتزامن حتى يتم إكمال الطلب قبل المتابعة.
يجب تجنب الطلبات المقدمة في وضع التزامن. ستقوم هذه الطلبات بتعطيل المتصفح إلى المستخدم حتى يتم إرجاع الطلب. بمجرد أن يكون الخادم مشغولاً ويستغرق بعض الوقت لإكمال الطلب ، لن يتمكن متصفح المستخدم (أو نظام التشغيل) من فعل أي شيء آخر حتى يتم توقيت الطلب.
إذا شعرت أن وضعك يتطلب وضع المزامنة ، فإن أكبر احتمال هو أنك تحتاج إلى وقت لإعادة التفكير في التصميم الخاص بك. نادراً ما تكون طلبات AJAX في الوضع المتزامن مطلوبًا فعليًا.
13. باستخدام JSON
عندما يكون من الضروري تخزين بنية البيانات في نص عادي ، أو إرسال/استرداد بنية البيانات عبر AJAX ، استخدم JSON بدلاً من XML قدر الإمكان. JSON (تدوين كائن JavaScript) هو تنسيق تخزين بيانات أكثر إيجازًا وفعالية ولا يعتمد على أي لغة (وهو محايد للغة).
14. استخدم علامة <script> الصحيحة
لا يُفضل استخدام خاصية اللغة في <script>. الطريقة المناسبة هي إنشاء كتلة رمز JavaScript التالية:
<script type = "text/javaScript"> // code هنا </script>
ملاحظة: لم يتم تنسيق الكود أعلاه ، وسيكون الكود المنسق عادة ما يكون أسهل في القراءة والفهم. فيما يلي بعض أدوات التنسيق والضغط عبر الإنترنت لاستخدامها في التطوير المستقبلي:
أدوات تجميل وتنسيق كود JavaScript عبر الإنترنت:
http://tools.vevb.com/code/js
أدوات تجميل/ضغط/تنسيق/تشفير رمز JavaScript:
http://tools.vevb.com/code/jscompress
أداة ضغط JSMin Online JS:
http://tools.vevb.com/code/jsmincompress
رمز JSON عبر الإنترنت تنسيق/تجميل/ضغط/تحرير/تحويل أدوات:
http://tools.vevb.com/code/jsoncodeformat
لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.