شهدت الأشهر الأخيرة مناقشة كبيرة بشأن معالجة أحداث JavaScript الأمثل. لقد غذت هذا النقاش في مكتبة JSACTION من Google وطريقة ECMASCRIPT 7 Object.Observe (المدعومة بالفعل في Chrome 36 و Node.js Harmony). تستكشف هذه المقالة أنماط معالجة الأحداث المختلفة ، وتزن مزاياها وعيوبها.

نقاط المفاتيح:

• مكتبة JSACTION: تتخلص من مكتبة Google هذه المنطق من خلال إدارتها ، وتحويلها جزئيًا إلى HTML. يهدف هذا إلى تخفيف الأخطاء الخاصة بالمتصفح ، وتحسين الأداء عن طريق تقليل تلوث النطاق العالمي ، وتقليل تسرب الذاكرة.
• Object.Observe () الطريقة: جزء من ECMAScript 7 ، تتيح هذه الطريقة الملاحظة الأصلية لتغييرات الكائن ، وتبسيط نمط الناشر/المشترك الضروري للبرمجة التفاعلية.
• الأطر التعريفية (الزاوية ، رد فعل ، Raction): تنفذ هذه الأطر نمط MVC ، ودمج ربط البيانات ومعالجة الأحداث مباشرة داخل عناصر DOM لتحسين الصيانة والأداء.
• تطور معالجة الأحداث: تطورت معالجة الأحداث المضمّنة التقليدية نحو addeventListener لمعالجة تلوث النطاق العالمي ومواطن الضعف XSS. مكتبات مثل jQuery تبسيط ومقياس الحدث.
• الأداء وربط البيانات: Object.Observe () و DOMs الظاهرية (المستخدمة في رد الفعل والفعالة) تحسين الأداء بشكل كبير من خلال تحسين تحديثات ربط البيانات وواجهة المستخدم ، مما يقلل من معالجة DOM.

تحليل مفصل:

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

يتضمن الاتجاه المتزايد وضع المنطق مباشرة داخل عناصر DOM المتأثرة ، ليس فقط للأحداث ، ولكن أيضًا معالجة البيانات. أطر مثل Angular و Raction و React Enforce MVC ، مما يتيح ربط البيانات والبرمجة التفاعلية من خلال القوالب. هذا النهج ، على الرغم من احتمال تحسين القدرة على الصيانة في سياقات معينة ، يتطلب دراسة متأنية لتجنب عيوب العرض والمنطق المقترن بإحكام.

Object.Observe () ، على الرغم من أنه لم يعد جزءًا من ES6 ، يعد بتحسينات كبيرة في الأداء من خلال دعم الناشر/المشترك الذي يتجاوز معالجة الأحداث. تقوم الأطر التعريفية بالفعل بالاستفادة من منطق مماثل ، وسيعزز Object.Observe () كفاءتها.

تاريخياً ، كان معالجة الأحداث المضمنة ( onclick ) هي المعيار ، لكن حدوده (قابلية القراءة ، قابلية الصيغة ، تلوث النطاق العالمي ، نقاط الضعف XSS) أدت إلى اعتماد قامت مكتبات مثل jQuery بتبسيط هذه العملية ، وتحسين قابلية التوسع وتصحيح الأخطاء. ومع ذلك ، لا يزال بإمكان AddEventListener أن يؤدي إلى تسرب الذاكرة إذا لم يتم إدارة عمليات الإغلاق بعناية ، وخاصة في المتصفحات القديمة. توفر الأطر التعريفية بديلاً مقنعًا ، وإدارة تحديثات ربط البيانات وواجهة المستخدم بكفاءة من خلال تقنيات مثل DOMS الظاهرية (React ، Raction) أو كائنات الحاويات (Ember ، العمود الفقري ، Raction). غالبًا ما تدعم هذه الأطر ربط البيانات ثنائية الاتجاه ، وتبسيط التحديثات والحفاظ على الاتساق بين DOM ومنطق التطبيق. يتناقض هذا مع النهج الأكثر يدويًا والضروط الذي يتطلب معالجة DOM صريحة.

Object.Observe () آلية قوية لمراقبة تغييرات الكائن ، مما يتيح ربط بيانات أكثر كفاءة دون الاعتماد فقط على الأطر. على الرغم من أنه محدود حاليًا في دعم المتصفح ، فإنه يمثل تقدمًا كبيرًا في قدرات البرمجة التفاعلية.

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

1. دليل نمط Google JavaScript
2. إغلاق JavaScript
3. jsacte repo على github
4. الفرق بين Raction و Angular
5. الفرق بين Raction و React
6. الحاويات والاعتماد في ember.js
7. ثورات ربط البيانات مع Object.Observe () ، بقلم Addy Osmani

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

أنماط معالجة الأحداث:
• تقليدية ، مضمنة ، ومتقدمة (باستخدام المكتبات/الأطر).
انتشار الحدث:
• التقاط والفقاعات. stopPropagation () و PrevingDefault () .
التقاط مقابل الفقاعات:
• اتجاه تدفق الحدث في DOM.
منع الإجراءات الافتراضية:
• PrevingDefault () طريقة.
تفويض الحدث:
• معالجة الأحداث على عنصر الأصل.
تعبيرات منتظمة:
• نمط مطابق في الأوتار باستخدام regexp .
أنماط تصميم JavaScript:
• حلول قابلة لإعادة الاستخدام للمشاكل الشائعة (الوحدة النمطية ، النموذج الأولي ، المراقب ، إلخ).
معالجة الأخطاء:
• حاول ... catch ... أخيرًا بيان.
• == مقابل === : فضفاضة مقابل المساواة الصارمة.
تصحيح جافا سكريبت:
• console.log () ، أدوات مطور المتصفح.