هل يجب علي استخدام window.onload أو كتلة البرنامج النصي؟

Question

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

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

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

function updateDOM(id) {
    // updates the id element based on form state
}

هل يجب أن أستدعيه عبر:

window.onload = function() { updateDOM("myElement"); };

أو:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

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

أي أفكار؟هل إصدار واحد أفضل حقًا من الآخر؟

Answer 1

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

Answer 2

يعتبر حدث onload هو الطريقة الصحيحة للقيام بذلك، ولكن إذا كنت لا تمانع في استخدام مكتبة جافا سكريبت، فإن $(document).ready() الخاص بـ jQuery هو الأفضل.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

الإيجابيات:

1. اتصل بـ $(document).ready()‎ عدة مرات حسب رغبتك في تسجيل رمز إضافي للتشغيل - يمكنك ضبط window.onload مرة واحدة فقط.
2. تحدث إجراءات $(document).ready()‎ بمجرد اكتمال DOM - يجب على window.onload انتظار الصور وما شابه.

أتمنى ألا أصبح الرجل الذي يقترح jQuery في كل سؤال يتعلق بجافا سكريبت، ولكنه أمر رائع حقًا.

Answer 3

لقد كتبت الكثير من جافا سكريبت وwindow.onload هو رهيب طريقة للقيام بذلك.إنها هشة وتنتظر حتى كل تم تحميل أصل الصفحة.لذا، إذا استغرقت صورة واحدة وقتًا طويلاً أو لم تنته مهلة المورد حتى 30 ثانية، فلن يتم تشغيل التعليمات البرمجية الخاصة بك قبل أن يتمكن المستخدم من رؤية/التعامل مع الصفحة.

وأيضًا، إذا قرر جزء آخر من Javascript استخدام window.onload = function() {}، فسيتم تدمير الكود الخاص بك.

الطريقة الصحيحة لتشغيل التعليمات البرمجية الخاصة بك عندما تكون الصفحة جاهزة هي الانتظار حتى يصبح العنصر الذي تريد تغييره جاهزًا/متاحًا.تحتوي العديد من مكتبات JS على هذه الوظيفة المضمنة.

الدفع:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 4

بعض أطر عمل جافا سكريبت، مثل com.mootols, ، يتيح لك الوصول إلى حدث خاص يسمى "domready":

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

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

ينتظر window.onload على IE تحميل المعلومات الثنائية أيضًا.إنه ليس تعريفًا صارمًا لـ "متى يتم تحميل DOM".لذلك يمكن أن يكون هناك فارق كبير بين وقت تحميل الصفحة ووقت تشغيل البرنامج النصي الخاص بك.ولهذا السبب، أوصي بالنظر في أحد أطر عمل JS الوفيرة (النموذج الأولي/jQuery) للتعامل مع الأعباء الثقيلة نيابةً عنك.

Answer 6

إليك مقالة جيدة جدًا حول هذا الموضوع:

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

@ المهوس

أنا متأكد تمامًا من أنه سيتم استدعاء window.onload مرة أخرى عندما يضغط المستخدم على زر الرجوع في IE، ولكن لن يتم الاتصال به مرة أخرى في Firefox.(ما لم يغيروه مؤخرًا).

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

Answer 8

على الرغم من أنني أتفق مع الآخرين حول استخدام window.onload إن أمكن للحصول على تعليمات برمجية نظيفة، فأنا متأكد تمامًا من أنه سيتم استدعاء window.onload مرة أخرى عندما يضغط المستخدم على زر الرجوع في IE، ولكن لن يتم الاتصال به مرة أخرى في Firefox.(ما لم يغيروه مؤخرًا).

يحرر:يمكن أن يكون ذلك إلى الوراء.

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

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

Answer 9

وجهة نظري هي السابقة لأنه لا يمكن أن يكون لديك سوى وظيفة window.onload واحدة فقط، في حين أن كتل البرامج النصية المضمنة لديك ن رقم.

Answer 10

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