مسج:لماذا وظيفة JavaScript / Document Ready غير المزعجة بدلاً من حدث OnClick؟

Question

لقد بدأت للتو في النظر إلى JQuery.ليس لدي أي AJAX في تطبيق الويب الخاص بي في الوقت الحالي.

يبدو JavaScript الحالي في HTML الخاص بي كما يلي:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

يؤدي هذا إلى عرض أزرار [إضافة] و[بحث].بالنسبة للبحث، من الضروري إرسال النموذج، وأنا أستخدم MyFormSubmit() الذي يتحقق من صحة البيانات، ويضيف تأثيرًا مرئيًا إلى الصفحة، ثم ينشر البيانات.

يمكنني إضافة فئة أو معرف إلى زر البحث وفي JQuery يمكنني كتابة شيء مثل:

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

في مرحلة "المبتدئ" من الفهم مع JQuery لا أفعل ذلك يحصل لماذا سأفعل ذلك بهذه الطريقة

تحدد طريقتي القديمة الطريقة بالقرب من الكائن.قد يكون هناك خطر عدم تحميل JS قبل أن يضغط المستخدم على الزر (هل يوجد؟يوجد التحميل لـ JS في أعلى الصفحة مباشرة).

لن يتم تنشيط طريقة JQuery Document Ready حتى يتم تحميل المستند (وهو ما أفترض أنه يضمن أن JS موجود بالكامل وجاهز للتشغيل؟)، ولكنه ينقل الكود إلى جزء منفصل من ملف HTML الخاص بي - لذلك عندما أرى MyButtonArray DIV في مصدر HTML، وليس من الواضح بالنسبة لي ما هي الكائنات التي لها طرق، والتي لا تحتوي عليها.

هل يمكنك مساعدتي في فهم الخيارات المتاحة لي والفوائد/المشاكل التي يجب أن أبحث عنها؟

يحرر:أنا مرتاح لأن معالجة DOM - مثل LightBox الذي يمكن أن يظهر عند النقر على أي صورة مصغرة بالفئة "LightBoxThumb" - ستستخدم جافا سكريبت غير مزعجة.

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

EDIT2 - إجابة مقبولة

لقد حصلت على إجابة Russ Cams.فهو يصف جافا سكريبت غير المزعجة بطريقة ساعدتني في فهم المزيد حول كيفية وتوقيت استخدامها.

في الوقت الحالي (قد يتغير عندما يكون لدي المزيد من الخبرة!) سألتزم بحدث OnClick لإجراء واحد غير متغير على كائن ما لأنني أشعر أنه سيكون من الأسهل بالنسبة لي تصحيح الأخطاء - وتشخيص حدوث مشكلات .بالنسبة إلى ZebraStripes على جدول يسمح بالنقر على عمود العنوان للفرز (والمواقف من هذا النوع) يمكنني رؤية فوائد أسلوب Javascript غير المزعج

كان تعليق روس الأخير مفيدًا بشكل خاص، وقد تكرر هنا:

"@Kristen - You're right, like a lot of programming topics, there is more than one approach and people will vehemently stand by their beliefs! If we're talking about a single method for a single button, I totally understand where you're coming from...

If we're talking about lots of JavaScript, with same function calls for more than one element, different function calls for different methods, etc. I think that it would be more difficult for oneself to mix inline and unobtrusive approaches, and it would be better to adopt one or the other approach"

Answer 1

جافا سكريبت غير مزعجة هو المحرك الرئيسي لفصل كود JS عن العلامات

• فصل الوظائف ("طبقة السلوك") عن وظائف صفحة الويب
  هيكل/المحتوى والعرض التقديمي
• Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
• التحسين التدريجي لدعم وكلاء المستخدم الذين قد لا يدعمون
  وظائف جافا سكريبت المتقدمة

باستخدام الكود الموجود في document.ready، لن يتم تنفيذه حتى يتم تحميل DOM وقبل تحميل محتويات الصفحة

من تعلم مسج

باستخدام $(document).ready()، يمكنك تحميل الأحداث الخاصة بك أو إطلاقها أو القيام بأي شيء تريد منهم القيام به قبل تحميل النافذة.

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

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

يحرر:

بعض الأفكار التي قد تقنعك لماذا يمكن أن تكون جافا سكريبت غير المزعجة فكرة جيدة.

تخيل أن لديك وظيفة مرتبطة كمعالج حدث لنفس الحدث المرفوع على كل عدد من العناصر -

• Would it be easier to find out which elements call that function to handle an event when the declaration is inline in each element, or the declaration is in one place, outside of the markup?

• ماذا لو كنت تريد إضافة إلى العناصر التي تسمي هذه الوظيفة عندما يتم رفع الحدث على كل منها؟

Answer 2

يقع حدث جاهز للمستند قبل حدث تحميل المستند بوقت طويل.يتم إعداد المستند بمجرد تحميل DOM بحيث تكون جميع العناصر موجودة قبل البدء في العمل عليها.

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

لا يزال بإمكانك إعلان الإجراء على العنصر إذا كنت تفضل ذلك.

Answer 3

مع مرور الوقت، أعتقد أنك تعتاد على بناء جملة jQuery وقراءة:

تصبح الطبقة = "MyFormSubmit" غنية بالمعلومات مثل قراءة onClick = "return MyFormSubmit ()؛

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

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

Answer 4

يمكنك القيام بذلك بهذه الطريقة لفصل منطق واجهة المستخدم عن تصميم HTML الفعلي.