7 نصائح جافا سكريبت كان يجب أن أعرفها

لقد كنت أكتب رمز JavaScript لفترة طويلة ولا أستطيع تذكر ما هي العصر الذي بدأته. أنا متحمس للغاية لإنجازات جافا سكريبت في السنوات الأخيرة ؛ أنا محظوظ جدًا لأن أكون المستفيد من هذه الإنجازات. لقد كتبت الكثير من المقالات والفصول وكتاب مخصص لها ، لكن لا يزال بإمكاني العثور على بعض المعرفة الجديدة حول هذه اللغة الآن. ما يلي يصف مهارات البرمجة التي جعلتني أتنهد "آه!" في الماضي. يجب أن تجرب هذه المهارات الآن ، بدلاً من الانتظار لاكتشافها عن طريق الخطأ في المستقبل.

كتابة موجزة

أحد الأشياء المفضلة لدي في JavaScript هو طريقة الاختصار لإنشاء الكائنات والصفائف. في الماضي ، إذا أردت إنشاء كائن ، فستحتاج إلى القيام بذلك:

 var car = new Object () ؛ car.colour = 'red' ؛ Car.Wheels = 4 ؛ car.hubcaps = 'spinning' ؛ car.age = 4 ؛

يمكن أن تحقق طريقة الكتابة التالية نفس التأثير:

 var car = {color: 'Red' ، Wheels: 4 ، hubcaps: 'spinning' ، العمر: 4}

إنه أبسط بكثير ، لست بحاجة إلى استخدام اسم هذا الكائن بشكل متكرر. بهذه الطريقة ، يتم تعريف السيارة. ربما ستواجه مشكلة InvaliduserInsession ، والتي تتم مواجهتها فقط عند استخدام IE. فقط تذكر شيئًا واحدًا ولا تكتب فواصل قبل الأقواس الختامية ، ولن تواجه أي مشكلة.

اختصار آخر مريح للغاية هو المصفوفات. الطريقة التقليدية لتحديد صفيف هي كما يلي:

 var moviesthatneedbetterwriters = صفيف جديد ('Transformers' ، 'Transformers2' ، 'Avatar' ، 'Indianajones 4') ؛

نسخة الاختصار مثل هذا:

 var moviestHatneedBetterwriters = ['Transformers' ، 'Transformers2' ، 'Avatar' ، 'Indianajones 4'] ؛

بالنسبة للصفائف ، هناك مشكلة هنا ، ولكن لا توجد في الواقع وظيفة مجموعة الرسم البياني. لكن ستجد غالبًا أن شخصًا ما يحدد السيارة أعلاه مثل هذا ، مثل هذا

 var car = new array () ؛ سيارة ["اللون"] = "أحمر" ؛ سيارة ["عجلات"] = 4 ؛ Car ['hubcaps'] = 'spinning' ؛ السيارة ["العمر"] = 4 ؛

المصفوفات ليست كليًا ؛ إذا تم كتابتها بشكل غير صحيح ، فسيكونون مربكين. مجموعات الرسوم البيانية هي في الواقع وظيفة الكائنات ، والأشخاص الذين خلطا هذين المفهومين.

طريقة أخرى رائعة للغاية للاختصار هي استخدام الرموز الشرطية الثلاثية. ليس عليك أن تكتبه على النحو التالي ...

 الاتجاه var ؛ if (x <200) {Direction = 1 ؛ } آخر {direction = -1 ؛ } ...

يمكنك تبسيطه مع تدوين مشروط ثلاثي:

Var Direction = X <200؟ 1: -1 ؛

عندما تكون الحالة صحيحة ، يتم أخذ القيمة بعد علامة الاستفهام ، وإلا فإن القيمة بعد أخذ القولون.

تخزين البيانات في JSON

قبل أن أكتشف JSON ، استخدمت العديد من الأساليب المجنونة لتخزين البيانات في أنواع البيانات المتأصلة في JavaScript ، مثل المصفوفات والسلاسل والكراب الذي يسهل تقسيمه وغيرها من الأشياء المزعجة. بعد أن اخترع دوغلاس كروكفورد JSON ، تغير كل شيء. باستخدام JSON ، يمكنك استخدام وظائف JavaScript الخاصة بتخزين البيانات في تنسيقات معقدة ، وليس هناك حاجة لإجراء تحويلات إضافية أخرى ، ويمكنك الوصول إليها مباشرة. JSON هو اختصار "تدوين كائن JavaScript" ، والذي يستخدم طريقتي الاختصار المذكورة أعلاه. لذا ، إذا كنت تريد وصف فرقة ، فقد تكتب مثل هذا:

 var band = {"name": "The Red Hot Chili Peppers" ، "Member": [{"name": "Anthony Kiedis" ، "Come": "Lead Congals"} ، {"name": {"الاسم": "John Frusciante" ، "الدور": "الرصاص الجيتار"}] ، "السنة": "2009"}

يمكنك استخدام JSON مباشرة في JavaScript ، أو تغليفه في وظائف ، أو حتى استخدامه كإقامة قيمة إرجاع من واجهة برمجة التطبيقات. نسمي هذا JSON-P ، والعديد من واجهات برمجة التطبيقات تستخدم هذا النموذج.

يمكنك استدعاء مصدر إمداد البيانات وإرجاع بيانات JSON-P مباشرة في رمز البرنامج النصي:

 <div id = "delicious"> </viv> <script> دالة لذيذة (o) {var out = '<ul>' ؛ لـ (var i = 0 ؛ i <o.length ؛ i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>' ؛ } out += '</ul>' ؛ document.getElementById ('اللذيذ'). innerhtml = out ؛ } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javaScript؟count=15&callback=delicious"> </script>

هذا يتصل بميزة خدمة الويب التي يوفرها موقع الويب اللذيذ للحصول على أحدث قائمة مرجعية غير مرتبة بتنسيق JSON.

في الأساس ، تعتبر JSON أخف طريقة لوصف هياكل البيانات المعقدة ، ويمكن أن تعمل في المتصفح. يمكنك حتى تشغيله في PHP مع وظيفة JSON_DECODE (). أحد الأشياء التي فاجأتني حول وظائف JavaScript الخاصة (الرياضيات ، المصفوفة والسلسلة) هو أنه بعد دراستي لوظائف الرياضيات والسلسلة في JavaScript ، وجدت أنه يمكنهم تبسيط أعمال البرمجة الخاصة بي إلى حد كبير. باستخدامها ، يمكنك حفظ معالجة الحلقة المعقدة والأحكام الشرطية. على سبيل المثال ، عندما أحتاج إلى تنفيذ وظيفة للعثور على أكبر رقم في صفيف الأرقام ، اعتدت على كتابة هذه الحلقة مثل هذه:

 أرقام VAR = [3،342،23،22،124] ؛ var max = 0 ؛ لـ (var i = 0 ؛ i <number.length ؛ i ++) {if (number [i]> max) {max = number [i] ؛ }} ALERT (MAX) ؛

يمكننا أن نفعل ذلك دون حلقات:

 أرقام VAR = [3،342،23،22،124] ؛ number.sort (function (a ، b) {return b - a}) ؛ تنبيه (الأرقام [0]) ؛

تجدر الإشارة إلى أنه لا يمكنك فرز () مجموعة من الأحرف الرقمية ، لأنه في هذه الحالة لن يتم فرزه بالترتيب الأبجدي إلا. إذا كنت تريد معرفة المزيد عن الاستخدام ، فيمكنك قراءة هذه المقالة الجيدة حول SORT ().

وظيفة أخرى مثيرة للاهتمام هي Math.Max ​​(). تقوم هذه الوظيفة بإرجاع أكبر رقم في المعلمة:

Math.Max ​​(12،123،3،2،433،4) ؛ // إرجاع 433

نظرًا لأن هذه الوظيفة يمكن أن تتحقق من الأرقام وإرجاعها الأكبر ، يمكنك استخدامها لاختبار دعم المتصفح لميزة ما:

 var scrolltop = math.max (doc.documentElement.scrolltop ، doc.body.scrolltop) ؛

يستخدم هذا لحل مشاكل أي. يمكنك الحصول على قيمة scrolltop للصفحة الحالية ، ولكن بناءً على Doctype على الصفحة ، ستخزن واحدة فقط من الخصائص المذكورة أعلاه هذه القيمة ، وستكون الخاصية الأخرى غير محددة ، حتى تتمكن من الحصول على هذا الرقم باستخدام Math.Max ​​(). اقرأ هذه المقالة وستحصل على المزيد من المعرفة حول استخدام الوظائف الرياضية لتبسيط JavaScript.

هناك أيضًا زوج من الوظائف المفيدة للغاية التي تعمل على تشغيل السلاسل هي تقسيم () والانضمام (). أعتقد أن المثال الأكثر تمثيلا هو كتابة وظيفة لإرفاق نمط CSS بعناصر الصفحة.

إنه مثل هذا. عندما تقوم بإلحاق فئة CSS بعنصر الصفحة ، إما فئة CSS الأولى لهذا العنصر ، أو لديها بالفعل بعض الفئات. تحتاج إلى إضافة مساحة بعد الفصل الحالي ثم اتبع الفصل. وعندما ترغب في إزالة هذه الفئة ، تحتاج أيضًا إلى إزالة المساحات أمام هذه الفئة (كان هذا مهمًا جدًا في الماضي لأن بعض المتصفحات القديمة لم تتعرف على الفئة التي تليها المساحات).

لذا ، فإن الكتابة الأصلية ستبدو هكذا:

 وظيفة addClass (elm ، newClass) {var c = elm.className ؛ elm.classname = (c === '')؟ NewClass: C+''+NewClass ؛ }

يمكنك استخدام وظائف split () والانضمام إلى () لإكمال هذه المهمة تلقائيًا:

 وظيفة addClass (elm ، newClass) {var classes = elm.classname.split ('') ؛ classes.push (NewClass) ؛ elmmclassName = classes.join ('') ؛ }

سيضمن ذلك فصل جميع الفئات عن طريق المسافات وأن الفئة التي تريد إلحاقها يتم وضعها في آخرها بالضبط.

وفد الحدث

تطبيقات الويب كلها مدفوعة بالحدث. أحب التعامل مع الأحداث ، خاصةً أحب تحديد الأحداث بنفسي. يجعل منتجك قابلاً للتطوير دون تغيير الرمز الأساسي. هناك مشكلة كبيرة (أيضًا مظهر قوي) حول إزالة الأحداث على الصفحة. يمكنك تثبيت مستمع حدث على عنصر ويبدأ مستمع الحدث في العمل. ولكن لا يوجد أي مؤشر على الصفحة على وجود مستمع. بسبب هذه المشكلة التي لا يمكن التنبؤ بها (والتي هي مزعجة بشكل خاص لبعض المبتدئين) ، ومشاكل الذاكرة المختلفة التي "تستخدم المتصفحات" مثل IE6 الكثير من الاستماع إلى الأحداث ، عليك أن تعترف أنه من الحكمة محاولة استخدام برمجة الأحداث بأقل قدر ممكن.

لذلك وقعت لجنة الحادث.

عندما يتم تشغيل حدث على عنصر على الصفحة ، وفي علاقة ميراث DOM ، يمكن لجميع أطفال هذا العنصر أيضًا الحصول على هذا الحدث. في هذا الوقت ، يمكنك استخدام معالج الأحداث على العنصر الأصل للتعامل معه ، بدلاً من استخدام مستمعي الأحداث على مجموعة من عناصر الأطفال للتعامل معه. ماذا يعني بالضبط؟ دعنا نضعها على هذا النحو ، هناك العديد من الارتباطات التشعبية على الصفحة. أنت لا تريد استخدام هذه الروابط مباشرة. تريد استدعاء هذا الرابط من خلال وظيفة. رمز HTML مثل هذا:

 <h2> موارد الويب الرائعة </h2> <ul id = "resources"> <li> <a href = "http://opera.com/wsc" href = "http://alistapart.com"> قائمة بعيدة </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> href = "http://oddlyspecific.com"> محددة بشكل غريب </a> </li> </ul>

إنها ممارسة شائعة أن تحلق هذه الروابط وإرفاق معالج حدث بكل رابط:

 // مثال معالجة الأحداث النموذجي (function () {var resources = document.getElementById ('Resources') ؛ var links = resources.getElementsByTagName ('a') ؛ var all = links.length ؛ for (var i = 0 ؛ i <all ؛ i ++) {// includer a ankener conks [i] var x = e.target ؛

يمكننا أيضًا إنجاز هذه المهمة من خلال معالج الأحداث:

 (function () {var resources = document.getElementById ('Resources') ؛ Resources.AdDeventListener ('Click' ، Handler ، false) ؛ false) ؛ معالج الوظائف (e) {var x = e.target ؛ // الحصول على الرابط tha tha if (x.nodename.tolowercase () === 'a') }) () ؛

نظرًا لأن حدث النقر يحدث في عناصر الصفحة هذه ، كل ما عليك فعله هو مقارنة أسماء الإيماءات الخاصة بهم ومعرفة العنصر الذي يجب أن يستجيب للحدث.

إخلاء المسئولية: يمكن أن يعمل مثالان حول الأحداث المذكورة أعلاه في جميع المتصفحات. باستثناء IE6 ، تحتاج إلى استخدام نموذج الحدث على IE6 ، بدلاً من التنفيذ القياسي لـ W3C. هذا هو السبب في أننا نوصي باستخدام بعض مجموعات الأدوات.

لا تقتصر فائدة هذا النهج على تقليل معالجات الأحداث المتعددة إلى واحد. فكر في الأمر ، على سبيل المثال ، تحتاج إلى إضافة المزيد من الروابط إلى جدول الرابط هذا. بعد استخدام تفويض الأحداث ، لا تحتاج إلى إجراء أي تغييرات أخرى ؛ خلاف ذلك ، تحتاج إلى إعادة حلمة جدول الرابط وتثبيت معالج الحدث لكل رابط مرة أخرى.

وظائف مجهولة ونموذجية

الشيء الأكثر إزعاجًا في JavaScript هو أن المتغيرات ليس لديها مجال للاستخدام. أي متغير ، وظيفة ، صفيف ، كائن ، طالما أنه ليس داخل الوظيفة ، يعتبر عالميًا ، مما يعني أن البرامج النصية الأخرى في هذه الصفحة يمكنها أيضًا الوصول إليها وتجاوزها.

الحل هو وضع متغيرك داخل وظيفة مجهولة والاتصال بها فور تعريفها. على سبيل المثال ، ستنتج طريقة الكتابة التالية ثلاثة متغيرات عالمية ووظيفة عالمية:

 var name = 'Chris' ؛ var age = '34' ؛ var status = 'Single' ؛ وظيفة CreateMember () {// [...]} وظيفة getMemberDetails () {// [...]}

إذا كان هناك متغير يسمى الحالة في البرامج النصية الأخرى في هذه الصفحة ، فسيحدث المتاعب. إذا قمنا بتغليفها في myapplication ، فسيتم حل هذه المشكلة:

 var myapplication = function () {var name = 'chris' ؛ var age = '34' ؛ var status = 'Single' ؛ وظيفة createMember () {// [...]} وظيفة getMemberDetails () {// [...]}} () ؛

ومع ذلك ، بهذه الطريقة ، لا توجد وظيفة خارج الوظيفة. إذا كان هذا هو ما تحتاجه ، فلا بأس بذلك. يمكنك أيضًا حذف اسم الوظيفة:

 (function () {var name = 'chris' ؛ var age = '34' ؛ var status = 'single' ؛ function createMember () {// [...]} وظيفة getMemberDetails () {// [...]}}) () ؛

إذا كنت ترغب في استخدام الجزء الداخلي من الوظيفة ، فأنت بحاجة إلى إجراء بعض التعديلات. من أجل الوصول إلى Createmsmed () أو getMemberDetails () ، تحتاج إلى تحويلها إلى خصائص myapplication لتعريضها للعالم الخارجي:

 var myapplication = function () {var name = 'chris' ؛ var age = '34' ؛ var status = 'Single' ؛ return {createMember: function () {// [...]} ، getMemberDetails: function () {// [...]}}} () ؛ //myapplication.createmember () و //myapplication.getMemberDetails () يمكن استخدامها.

وهذا ما يسمى وضع الوحدة النمطية أو المفرد. تحدث دوغلاس كروكفورد عن هذا عدة مرات ، ويستخدم على نطاق واسع في مكتبة واجهة مستخدم Yahoo Yui. ولكن ما يجعلني غير مريح هو أنني بحاجة إلى تغيير بنية الجملة بحيث يمكن الوصول إلى الوظائف والمتغيرات من قبل العالم الخارجي. ما هو أكثر من ذلك ، أحتاج إلى إضافة بادئة myapplication عند الاتصال. لذا ، لا أحب القيام بذلك ، فأنا أفضل ببساطة تصدير المؤشرات إلى عناصر تحتاج إلى الوصول إليها من قبل العالم الخارجي. بعد القيام بذلك ، يتم تبسيط كتابة المكالمات الخارجية:

 var myapplication = function () {var name = 'chris' ؛ var age = '34' ؛ var status = 'Single' ؛ الدالة createMember () {// [...]} وظيفة getMemberDetails () {// [...]} return {create: creatember ، get: getMemberDetails}}} () ؛ // الآن اكتبها على أنها myapplication.get () و myapplication.create ().

أسمي هذا "الكشف عن نمط الوحدة النمطية".

قابل للتكوين

بمجرد نشر رمز JavaScript الذي كتبته إلى هذا العالم ، أراد شخص ما تغييره ، وعادةً ما يرغب الأشخاص في إكمال المهام التي لا يمكنها إكمالها - ولكن عادةً ما لم يكن البرنامج الذي كتبته مرنًا بما فيه الكفاية ولم يقدم وظائف محددة من قبل المستخدم. الحل هو إضافة كائن عنصر التكوين إلى البرنامج النصي الخاص بك. كتبت مرة واحدة مقالة تقدم كائنات عنصر تكوين JavaScript بعمق. فيما يلي النقاط الرئيسية:

---- في البرنامج النصي الخاص بك ، أضف كائنًا يسمى التكوين.

---- هذا الكائن يخزن كل الأشياء التي يحتاجها الناس إلى التغيير عند استخدام هذا البرنامج النصي:

** معرف CSS واسم الفصل ؛

** اسم الزر ، علامة التسمية ، إلخ. ؛

** قيم مثل "عدد الصور المعروضة لكل صفحة" و "حجم الصور المعروض" ؛

** الموقع والموقع وإعدادات اللغة.

--- إرجاع هذا الكائن إلى المستخدم كخاصية مشتركة حتى يتمكن المستخدم من تعديله والكتابة فوقه.

هذا هو عادة ما تحتاج إلى القيام به في الخطوة الأخيرة في عملية البرمجة الخاصة بك. ركزت هذه في مثال واحد: "خمسة أشياء يجب القيام بها في البرنامج النصي قبل تسليمها إلى المطور التالي."

في الواقع ، تريد أيضًا استخدام الكود الخاص بك بطريقة جيدة للغاية وإجراء بعض التغييرات وفقًا لاحتياجاتهم. إذا قمت بتطبيق هذه الميزة ، فستتلقى رسائل بريد إلكتروني أقل إرباكًا من الأشخاص الذين يشكون من البرنامج النصي الخاص بك ، والذي سيخبرك أن شخصًا ما قام بتعديل البرنامج النصي الخاص بك وأنه مفيد للغاية.

تتفاعل مع الخلفية

أحد الأشياء المهمة التي تعلمتها في سنوات عديدة من تجربة البرمجة هي أن JavaScript هي لغة ممتازة لتطوير تفاعل الواجهة ، ولكن إذا تم استخدامها لمعالجة الأرقام أو الوصول إلى مصادر البيانات ، فهي غير مرضية بعض الشيء.

في البداية ، تعلمت JavaScript لاستبدال Perl لأنني أكره الاضطرار إلى نسخ الكود إلى مجلد CGI-Bin لجعل Perl تشغيل. في وقت لاحق ، أدركت أنه يجب علي استخدام لغة عمل خلفية لمعالجة البيانات الرئيسية ، ولا يمكنني السماح لـ JavaScript بفعل كل شيء. الأهم من ذلك ، نحن بحاجة إلى النظر في خصائص الأمن واللغة.

إذا قمت بالوصول إلى خدمة ويب ، فيمكنني الحصول على البيانات بتنسيق JSON-P. في متصفح العميل ، أقوم بتحويل البيانات المختلفة ، لكن عندما يكون لدي خادم ، لدي المزيد من الطرق لتحويل البيانات. يمكنني إنشاء بيانات تنسيق JSON أو HTML على جانب الخادم وإعادتها إلى العميل ، بالإضافة إلى بيانات ذاكرة التخزين المؤقت ، وما إلى ذلك. إذا فهمتها مسبقًا ، فسوف تحقق مكاسب طويلة الأجل وتوفير الكثير من الصداع. برامج الكتابة المناسبة للمتصفحات المختلفة هي مضيعة للوقت ، استخدم مجموعة الأدوات!

عندما بدأت تطوير الويب لأول مرة ، ناضلت بشدة لفترة طويلة على استخدام المستند. جميع المستندات أو المستندات عند الوصول إلى الصفحة. لقد اخترت document.layers لأنني أحب فكرة أن أي طبقة هي وثيقة خاصة بها (وكتبت الكثير من المستندات. اكتب لإنشاء عناصر). فشل نمط الطبقة في النهاية ، لذلك بدأت في استخدام Document.all. كنت سعيدًا جدًا عندما أعلنت Netscape 6 أنها تدعم نماذج W3C DOM فقط ، ولكن في الواقع لم يهتم المستخدمون بهذا. يرى المستخدمون فقط أن هذه المتصفحات لا يمكنها عرض الأشياء التي يمكن لمعظم المتصفحات عرضها بشكل طبيعي - هذه مشكلة في ترميزنا. لقد كتبنا رمزًا قصير النظر الذي لا يمكن تشغيله إلا في البيئة الحالية ، ولكن لسوء الحظ ، فإن بيئة التشغيل لدينا تتغير باستمرار.

لقد أضيع الكثير من الوقت في التعامل مع التوافق مع المتصفحات المختلفة والإصدارات المختلفة. أن أكون جيدًا في التعامل مع هذا النوع من المشكلات يوفر لي فرصة عمل جيدة. لكن الآن ليس علينا أن نتحمل هذا الألم.

يمكن أن تساعدنا بعض مجموعات الأدوات ، مثل Yui و JQuery و Dojo ، في التعامل مع هذا النوع من المشكلات. إنهم يحلون العديد من مشاكل المتصفح من خلال استخلاص تطبيقات الواجهة المختلفة ، مثل عدم توافق الإصدار ، وتصميم عيوب ، وما إلى ذلك ، مما ينقذنا من آلامنا. ما لم تكن ترغب في اختبار متصفح بيتا معين ، لا تضيف رمزًا إلى برنامجك الخاص لتصحيح عيوب المتصفح ، لأنك من المحتمل أن تنسى حذف الكود الخاص بك عندما يعدل المتصفح هذه المشكلة.

من ناحية أخرى ، فإن الاعتماد بالكامل على مجموعات الأدوات هو أيضًا سلوك قصير النظر. يمكن أن تساعدك مجموعات الأدوات على التطوير بسرعة ، ولكن إذا لم يكن لديك فهم عميق لـ JavaScript ، فستفعل أيضًا خطأ.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.