jQuery: पृष्ठ के निचले भाग में बाहरी JS के लिए document.ready का उपयोग क्यों करें?

Question

मैं अपने सभी जेएस को बाहरी फ़ाइलों के रूप में शामिल कर रहा हूं जो पृष्ठ के बहुत नीचे लोड किए गए हैं। इन फ़ाइलों के भीतर, मेरे पास कई तरीके हैं, जैसे कि मैं तैयार घटना से कहता हूं:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

हालाँकि, जब मैं तैयार फ़ंक्शन को हटाता हूं और विधियों को सीधे-सीधे कॉल करता हूं, तो सब कुछ बस एक ही काम करता है, लेकिन काफी तेजी से निष्पादित करता है - एक बहुत ही मूल फ़ाइल पर लगभग एक पूरी तेजी से दूसरा! चूंकि दस्तावेज़ को इस बिंदु पर लोड किया जाना चाहिए (जैसा कि स्क्रिप्ट टैग से पहले सभी मार्कअप आता है), क्या अभी भी तैयार घटना का उपयोग करने का कोई अच्छा कारण है?

Comments

दिलचस्प सवाल। अफसोस की बात है कि मौजूदा जवाब वास्तव में सवाल का जवाब नहीं देते हैं और मेरे पास कोई अच्छा जवाब भी नहीं है। शायद यह इस सवाल को फिर से समझने में मदद करेगा: "फ़ाइल के अंत में जावास्क्रिप्ट दस्तावेज़ डाल रहे हैं गारंटी डोम को निष्पादन से पहले लोड किया जाता है"

— बोरिस कॉल

Answer 1

बड़ा सवाल है।

पूरी तरह से "आपके पृष्ठ के निचले भाग में स्क्रिप्ट रखें" सलाह के बारे में कुछ भ्रम है और यह किस समस्या (ओं) को हल करने का प्रयास करता है। इस प्रश्न के लिए मैं इस बारे में बात नहीं करने जा रहा हूं कि क्या स्क्रिप्ट को पृष्ठ के निचले भाग पर रखने से प्रदर्शन / लोडटाइम प्रभावित होता है या नहीं। मैं केवल इस बारे में बात करने जा रहा हूं कि क्या आपको जरूरत है $(document).ready अगर आप पेज के निचले भाग पर स्क्रिप्ट भी डालते हैं ।

मैं मान रहा हूँ कि आप उन कार्यों में DOM का संदर्भ दे रहे हैं जो आप तुरंत अपनी स्क्रिप्ट्स में (कुछ भी सरल documentया document.getElementById) के रूप में लागू कर रहे हैं । मैं यह भी मान रहा हूं कि आप केवल इन [DOM-referencing] फाइलों के बारे में पूछ रहे हैं। IOW, लाइब्रेरी स्क्रिप्ट या स्क्रिप्ट जिन्हें आपके DOM- रेफरेंस कोड की आवश्यकता होती है (जैसे jQuery) को पहले पृष्ठ में रखा जाना चाहिए।

अपने प्रश्न का उत्तर देने के लिए : यदि आप पृष्ठ के निचले भाग में अपनी DOM-संदर्भित स्क्रिप्ट शामिल करते हैं, तो नहीं, आपको इसकी आवश्यकता नहीं है $(document).ready।

स्पष्टीकरण : अंगूठे के नियम जैसे-संबंधित कार्यान्वयन की सहायता के बिना : कोई भी कोड जो पृष्ठ के भीतर DOM तत्वों के साथ बातचीत करता है, उसे उन तत्वों की तुलना में पृष्ठ के नीचे रखा / शामिल किया जाना चाहिए जो इसे संदर्भित करते हैं। बंद करने से पहले उस कोड को रखना सबसे आसान काम है । यहाँ और यहाँ देखें । यह IE के खूंखार "ऑपरेशन निरस्त" त्रुटि के आसपास भी काम करता है ।"onload"$(document).ready</body>

यह कहने के बाद, यह किसी भी तरह से उपयोग को अमान्य नहीं करता है $(document).ready। लोड होने से पहले किसी ऑब्जेक्ट को संदर्भित करना [एक] DOM जावास्क्रिप्ट में शुरुआत के दौरान की गई सबसे आम गलतियों में से एक है (इसे गिनने के लिए कई बार देखा गया)। यह समस्या के लिए jQuery का समाधान है, और इसके लिए आपको यह सोचने की आवश्यकता नहीं है कि यह स्क्रिप्ट DOM तत्वों के संदर्भों के सापेक्ष कहाँ शामिल होगी। यह डेवलपर्स के लिए बहुत बड़ी जीत है। यह सिर्फ एक कम चीज है जिसके बारे में उन्हें सोचना है।

साथ ही, सभी डोम-रेफ़रिंग स्क्रिप्ट्स को पृष्ठ के निचले भाग में ले जाना अक्सर मुश्किल या अव्यवहारिक होता है (उदाहरण के लिए किसी भी स्क्रिप्ट को जिसे document.writeकॉल रहना पड़ता है)। दूसरी बार, आप एक ऐसे फ्रेमवर्क का उपयोग कर रहे हैं, जो किसी टेम्पलेट को प्रस्तुत करता है या डायनामिक जावास्क्रिप्ट के टुकड़े बनाता है, जिसके भीतर संदर्भ फ़ंक्शन जिन्हें जेएस से पहले शामिल करने की आवश्यकता होती है ।

अंत में, सभी डोम-रेफ़रिंग कोड को जाम करने के लिए "सबसे अच्छा अभ्यास" हुआ करता था window.onload, हालांकि इसे अच्छी तरह से दस्तावेज़ कारणों के$(document).ready लिए कार्यान्वयन द्वारा ग्रहण किया गया है ।

यह सब $(document).readyडोम तत्वों को जल्दी संदर्भित करने की समस्या के लिए एक बेहतर, व्यावहारिक और सामान्य समाधान के रूप में जोड़ता है ।

Comments

"यदि आप पृष्ठ के नीचे अपनी DOM-संदर्भित स्क्रिप्ट्स को शामिल करते हैं, तो नहीं, आपको $ (डॉक्यूमेंट पहले से ही) की आवश्यकता नहीं है। आपके द्वारा बाद में संबोधित किए गए डॉक्यूमेंट को नजरअंदाज करते हुए, यह उत्तर भोली-भाली धारणा बनाता है।" सभी सीएसएस को जावास्क्रिप्ट को चलाने से पहले डाउनलोड और संसाधित किया जाता है। यह सच नहीं हो सकता है; ब्राउज़र बाहरी फ़ाइलों को समानांतर में डाउनलोड कर सकते हैं।

— पॉवरलॉर्ड

पूरी तरह से सही नहीं है, अगर आपके पास कोई deferस्क्रिप्ट दस्तावेज तैयार है तो वे यह सुनिश्चित करेंगे कि वे तैयार कोड से पहले निष्पादित हों। देखें: w3.org/TR/html5/the-end.html#the-end

— सैम केसर