هل هناك أي حالات يتعين عليك فيها استخدام سمة حدث الربط المبكر/المضمّن في HTML/JavaScript

Question

في إجابتي على سؤال SO التالي: ماذا يعني ربط الحدث؟, ، لقد قدمت ملاحظة عابرة مفادها أن استخدام JavaScript/Early-Binding المضمن لربط أحداث JavaScript كان "مضللًا في كثير من الأحيان"

على سبيل المثال:

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

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

دون الانخراط في مناقشة حول المزايا النسبية لأي منهما، هل يمكن لأي شخص أن يفكر في أي ظروف تملي عليك استخدام (على سبيل المثال) onclick السمة على نهج ملزم في وقت متأخر.

تشكرات

Answer 1

أعتقد أن العديد من المطورين سيفعلون ذلك إما بسبب الجهل أو نقص المعرفة (وهو أمر شائع بالطبع) والمطورين الباقين سيفعلون ذلك لأنه ببساطة أكثر ملاءمة لاستخدام سمات HTML-JS من الربط المتأخر ، إذا أنت تعلم أنه يتم دائمًا تحميل كائنات ووظائف معينة في كل صفحة وستكون "موجودة" ببساطة.

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

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

يمكن القضاء على كل هذا باستخدام نوع من الربط الموجود في كل مكان والذي ينطبق على جميع العناصر الحالية و المستقبلية في الصفحة. في jQuery ، المكافئ هو live() . بدلاً من الكتابة: Genacodicetagpre

يمكنك كتابة: Genacodicetagpre

الآن ، ستنفذ جميع العناصر التي تحمل اسم الفئة "foo" الوظيفة عند النقر فوقها ، بما في ذلك العناصر غير الموجودة حاليًا . مفيد جدًا لواجهات AJAX الديناميكية.

ربما تعرف ذلك بالفعل ، لكنني أشير فقط إلى أن أي شيء يمكن لسمات JS أن تفعله ، يمكن لـ JS الخالصة أن تفعله بشكل أفضل ، وأنا أعتبر أفضل الممارسات.

Answer 2

وأكد المعلقون أن هناك مناسبات استدعت استخدامه

أعتقد أنني واحد من هؤلاء المعلقين.ما قلته في الواقع هو أن المستمعين المضمنين "هي خيار معقول في ظروف معينة".لا أعتقد أن هناك أي حالات يكون فيها ذلك "ضروريًا" (وهو ما أفهمه في هذا السياق على أنه مطلوب).

إن إضافة المستمعين المضمنين هو ببساطة تطبيق نفس المنطق على الخادم لإضافة المستمعين كما سيتم تطبيقه على العميل وله مزايا في ذلك:

1. يمكن إنشاء العلامات وتخزينها مؤقتًا أو استخدامها كصفحات ثابتة، ولا تتم إضافة المستمعين بواسطة كل عميل مرارًا وتكرارًا عند تنزيل الصفحات
2. تتم إزالة المشكلات المتعلقة بالتأخير بين العنصر المتاح والمستمع الذي تتم إضافته بواسطة DOMReady أو وظائف التحميل أو "البرامج النصية السفلية" بالكامل
3. تمت إزالة تقلبات وظائف DOMReady "عبر المستعرض" المختلفة مع التراجع عند التحميل - لا توجد فرصة لفشل هذه الوظائف في إضافة المستمعين إذا لم يتم استخدامها

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

إذا كنت تعتقد أن "الربط المبكر" للمستمعين أمر جيد، فقم بذلك في أقرب وقت ممكن - ضعهم في السطر.:-)

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

Answer 3

الأسباب onclick الصفات سيئة :

onclick="foo()"

• تمريرك في سلسلة من التعليمات البرمجية التي يتم تقييمها في وقت التشغيل عند النقر فوق العنصر.هذا غير فعال ويستخدم أهوال eval
• اضطررت لتخزين الوظيفة foo في النطاق العالمي وبالتالي تلويث النطاق العالمي بكل منطق التعامل مع الأحداث الخاصة بك.