आवश्यकताएं डॉमीरीड प्लगइन बनाम जेकरी $ (दस्तावेज़)। पहले से ही ()?

Question

मैं आवश्यकताएँ का उपयोग कर रहा हूँ और डोम तैयार पर कुछ शुरू करने की जरूरत है। अब, आवश्यकताएँJJ domReadyप्लगइन प्रदान करता है , लेकिन हमारे पास पहले से ही jQuery है $(document).ready(), जो मुझे उपलब्ध है क्योंकि मैंने jQuery की आवश्यकता है।

इसलिए मुझे दो विकल्प मिले हैं:

1. domReadyप्लगइन का उपयोग करें :

   require(['domReady'], function (domReady) {
       domReady(function () {
           // Do my stuff here...
       });
   });
   

2. उपयोग करें $(document).ready():

   $(document).ready(function() {
       // Do my stuff here...
   });
   

मुझे कौन सा चुनना चाहिए और क्यों?

दोनों विकल्प उम्मीद के मुताबिक काम करते दिख रहे हैं। मुझे jQuery के एक पर भरोसा नहीं है क्योंकि आवश्यकताएँ अपने जादू कर रही है; यह है, क्योंकि आवश्यकता के बाद से डायनेमिक रूप से स्क्रिप्ट जोड़ देगा, मुझे चिंता है कि डोम तैयार हो सकता है इससे पहले कि सभी डायनामिक-अनुरोधित स्क्रिप्ट लोड हो जाए। domReadyजब मैं पहले से ही jQuery के लिए आवश्यक है, तो आवश्यकताएँ JS अतिरिक्त जेएस पर एक बोझ जोड़ देगा ।

प्रशन

• domReadyजब हम jQuery के हो सकते हैं तो आवश्यकताएँ क्यों एक प्लगइन प्रदान करती है $(document).ready();? मुझे किसी अन्य निर्भरता को शामिल करने का कोई लाभ नहीं दिखता है।
• यदि इसकी बस जरूरत को पूरा करने के लिए है, तो क्रॉस-ब्राउज़र AJAX के लिए एक क्यों नहीं प्रदान करें?

जहां तक ​​मुझे पता है, एक मॉड्यूल की आवश्यकता होती है domReadyजिसे दस्तावेज़ तैयार होने के बाद प्राप्त नहीं किया जाएगा या निष्पादित नहीं किया जा सकता है, और आप एक ही आवश्यक jQuery भी कर सकते हैं:

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

मेरे प्रश्न पर अधिक स्पष्ट होने के लिए: क्या आवश्यकता domReadyया अंतर के बीच अंतर है jQuery?

Comments

I am not confident in jquery's dom readyमैं इसे आक्रामक के रूप में चिह्नित करना चाहता :p

— हूं

IE पर भी jQuery का डॉम रेडी पूरी तरह विश्वसनीय है। लाखों लोग हर दिन बिना जाने इसका इस्तेमाल करते हैं ;-)

— जॉन ड्वोरक

क्या आप नियंत्रण में हैं कि आपके scriptटैग कहां जाते हैं, या आप एक पुस्तकालय / प्लग-इन लिख रहे हैं जिसमें अन्य लोग उपयोग करेंगे (और इसलिए वे scriptमार्कअप में टैग के स्थान के नियंत्रण में हैं )?

— टीजे क्राउडर

हे भगवान .. इसे पूरे संदर्भ के साथ पढ़ें। I am not confident in jquery's dom ready because requirejs is doing its magic.चूंकि, आवश्यकता सीमित स्थानीय दायरे में jquery को घेरने की है। यह बात महत्वपूर्ण नहीं है। (जहां तक ​​सवाल है) का।

— युगल जिंदल

धन्यवाद, @TJCrowder संपादन के लिए।

— युगल जिंदल

Answer 1

ऐसा लगता है कि सभी प्रमुख बिंदु पहले से ही हिट थे, लेकिन कुछ विवरण दरार के माध्यम से गिर गए। में मुख्य:

domReady

यह एक प्लगइन और एक मॉड्यूल दोनों है। यदि आप इसे आवश्यकताओं में शामिल करते हैं तो w / !अपने मॉड्यूल को अनुगामी करना तब तक निष्पादित नहीं होगा जब तक कि यह w / DOM को इंटरैक्ट करने के लिए "सुरक्षित" न हो:

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

ध्यान दें कि लोडिंग और निष्पादन अलग-अलग हैं; आप अपनी सभी फ़ाइलों को जल्द से जल्द लोड करना चाहते हैं, यह उन सामग्रियों का निष्पादन है जो समय संवेदनशील है।

यदि आप !इसे छोड़ देते हैं , तो यह केवल एक सामान्य मॉड्यूल है जो एक फ़ंक्शन होता है, जो कॉलबैक ले सकता है जो डोम के साथ बातचीत करने से पहले निष्पादित नहीं करेगा:

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

एक प्लगइन के रूप में domReady का उपयोग करते समय लाभ

कोड जो एक मॉड्यूल पर निर्भर करता है जो बदले में domReady!बहुत महत्वपूर्ण लाभ पर निर्भर करता है : इसके लिए DOM के तैयार होने की प्रतीक्षा करने की आवश्यकता नहीं है!

यह कहें कि हमारे पास कोड, ए का एक ब्लॉक है, जो एक मॉड्यूल, बी, पर निर्भर करता है domReady!। DOM तैयार होने से पहले मॉड्यूल B लोडिंग को पूरा नहीं करेगा। बदले में, बी लोड होने से पहले ए नहीं चलेगा।

यदि आप domReadyबी में एक नियमित मॉड्यूल के रूप में उपयोग करना चाहते थे , तो ए के लिए भी निर्भर करना आवश्यक होगा domReady, साथ ही साथ एक domReady()फ़ंक्शन कॉल के अंदर इसके कोड को लपेटना होगा ।

इसके अलावा, इसका मतलब है कि इससे domReady!अधिक लाभ मिलता है $(document).ready()।

डोमरी और $ (दस्तावेज़) के बीच के अंतर को पहले से ही दोहराएं ()

दोनों सूँघते हैं कि क्या / जब डोम अनिवार्य रूप से उसी तरह तैयार है।

गलत समय पर jQuery की गोलीबारी का डर

jQuery किसी भी तैयार कॉलबैक को आग लगा देगा, भले ही डोम jQuery से पहले लोड करता है (आपका कोड परवाह नहीं करता है जो पहले होता है।)।

Comments

सुंदर, यह वही है जिसकी मुझे तलाश थी। उचित, अच्छी तरह से समर्थित।

— युगल जिंदल

खुशी है कि मैं मदद कर सकता है :-)

— fncomp

@YugalJindle इनाम के लिए कुछ याद आ रही है? :)

— fncomp

मैं सिर्फ यह लिख रहा था कि आपने क्या लिखा है - यहाँ आप जाते हैं!

— युगल जिंदल

DomReady प्लगइन कोड ( github.com/requirejs/domReady/blob/master/domReady.js ) को देखते हुए मुझे कोई कारण नहीं दिखता कि आपको इसे 'domReady' के रूप में लोड करने की आवश्यकता क्यों है! 'domReady' के बजाय - क्या आप मुझे उस कोड के बिट की ओर संकेत कर सकते हैं जो व्यवहार में परिवर्तन का कारण बनता है?

— जेज

Answer 2

आपके मुख्य प्रश्न का उत्तर देने का प्रयास:

जब हम jquery हो सकते हैं तो requirejsएक domReadyप्लगइन क्यों प्रदान करता है $(document).ready();?

वे दो अलग चीजें करते हैं, वास्तव में। RequireJS ' domReadyइससे पहले कि यह चलाया जा सकता है (और इसलिए अपने आवेदन में मॉड्यूल के किसी भी संख्या में पाया जा सकता यदि आप ऐसा चाहते हैं) निर्भरता का प्रतीक है कि इस मॉड्यूल डोम की आवश्यकता पूरी तरह से लोड करने के लिए है, जबकि $(document).ready()बजाय अपनी कॉलबैक कार्यों बंद आग डोम है जब लोडिंग हो गई।

अंतर सूक्ष्म लग सकता है, लेकिन इस बारे में सोचें: मेरे पास एक मॉड्यूल है जो किसी तरह से डोम को युग्मित करने की आवश्यकता है, इसलिए मैं या तो domReadyइसे निर्भर कर सकता हूं और इसे मॉड्यूल परिभाषा समय पर युगल कर सकता हूं , या $(document).ready()इसके अंत में नीचे रख सकता हूं। मॉड्यूल के लिए इनिट फ़ंक्शन में कॉलबैक के साथ। मैं पहले एप्रोच क्लीनर को बुलाऊंगा।

इस बीच, अगर मेरे पास कोई ऐसी घटना है, जो डोम के रूप में तैयार होने की आवश्यकता है, तो $(document).ready()ईवेंट तैयार हो जाएगा, क्योंकि यह विशेष रूप से आवश्यकता पर निर्भर नहीं होता है, क्योंकि लोडिंग मॉड्यूल किया जा रहा है, बशर्ते आप कोड की निर्भरता प्रदान करते हैं इससे मिलने से मुलाकात होती है।

यह भी ध्यान देने योग्य है कि आप jQuery के साथ आवश्यकताएँ का उपयोग नहीं करते हैं। किसी भी लाइब्रेरी मॉड्यूल को DOM एक्सेस की आवश्यकता होती है (लेकिन jQuery पर भरोसा नहीं करता है) तब भी उपयोग करके उपयोगी होगा domReady।

Comments

domReadyआवश्यकताएँ के लिए एक निर्भरता नहीं है। यदि आप domReadyDocumentReady इवेंट के लिए उपयोग कर रहे हैं तो यह कोड के लिए निर्भरता होगी । साथ ही आप भ्रामक लग रहे हैं।

— युगल जिंदल

महान जवाब, और सूक्ष्मताओं के लिए एक महत्वपूर्ण संकेत कई डेवलपर्स अक्सर महसूस नहीं करते हैं (खुद को; ;-))।

— गोलो रॉडेन

युगल, मैं domReadyएक निर्भरता के रूप में उल्लेख कर रहा था , क्योंकि यह कैसे उपयोग किया जाता है। आवश्यकताएँ की निर्भरता के रूप में नहीं, लेकिन उस मॉड्यूल का जहां इसका उपयोग किया जाता है। शायद मुझे अपने पाठ में यह स्पष्ट करना चाहिए, क्या आपके पास सुझाव हैं कि कैसे?

— गर्ट सोंडर्बी

कृपया प्रश्न पर अद्यतन 2 देखें । हो सकता है कि हम एक ही पृष्ठ पर न हों।

— युगल जिंदल

युगल, यदि आप मूट्स का उपयोग करते हैं तो क्या होगा? Qooxdoo? कुछ भी नहीं jQuery? आवश्यकता है jQuery से शादी नहीं की है, हालांकि वे वास्तव में एक साथ अच्छी तरह से काम करते हैं।

— गर्ट सोंडर्बी

Answer 3

उपस्थिति के क्रम में अपनी गोलियों का जवाब देना:

• वे दोनों एक ही काम पूरा करते हैं
• यदि आपके पास किसी भी कारण से jquery के बारे में आरक्षण है, तो domReady का उपयोग करें
• सही है, तो बस jQuery का उपयोग करें
• क्योंकि हर कोई jQuery का उपयोग नहीं करता है
• मैं सहमत हूं, बस jQuery का उपयोग करें
• 'एक जरूरत फ़ीड' परिभाषा द्वारा प्लगइन्स।
• क्रॉस ब्राउज़र अजाक्स एक बात नहीं है। क्रॉस डोमेन? वहाँ शायद है, और अगर वहाँ नहीं है तो फ़ीड करने की कोई जरूरत नहीं है।
• , -, -, - ठीक

जब यह नीचे आता है, तो आप इसे खत्म कर रहे हैं। यह डोमरी पर जावास्क्रिप्ट को निष्पादित करने के लिए एक तंत्र है। यदि आपके पास jQuery नहीं है, तो मैं domReady प्लगइन की वकालत करूंगा। चूँकि आपके पास jQuery है तो पहले से उपलब्ध कुछ करने के लिए अधिक स्क्रिप्ट लोड न करें।

स्पष्टता अद्यतन

डॉमेरी प्लगइन डॉक्यूमेंट 'रेडी' होने पर कॉल करने के लिए फंक्शन्स इकट्ठा करता है। यदि यह पहले से ही लोड है, तो वे तुरंत निष्पादित करते हैं।

JQuery फ़ंक्शंस एकत्र करता है और डोम को 'तैयार' होने के लिए एक आस्थगित ऑब्जेक्ट को बांधता है । जब डोम तैयार होता है तो आस्थगित वस्तु को सुलझाया जाएगा और कार्य आग लग जाएगा। यदि डोम पहले से ही 'तैयार' है, तो आस्थगित पहले से ही हल हो जाएगा इसलिए फ़ंक्शन तुरंत निष्पादित करेगा।

इसका मतलब है कि प्रभावी रूप से वे ठीक यही काम करते हैं।

Answer 4

कई मॉड्यूल के साथ आवश्यकता के साथ प्रयोग करने के बाद मैं डोमरी का उपयोग करने का सुझाव देता हूं ।

मैंने देखा कि $ (दस्तावेज़) के साथ जुड़े फ़ंक्शन पहले से ही (...) को नहीं कहा जाता है जब कई मॉड्यूल को आवश्यकता के अनुसार लोड किया जाता है। मुझे संदेह है कि सभी आवश्यक कोडों को निष्पादित करने से पहले डोम तैयार हो रहा है और इससे पहले कि यह मुख्य मॉड्यूल कोड के भीतर उपयोगकर्ता परिभाषित फ़ंक्शन के साथ बाध्य हो जाता है, jquery तैयार कॉलबैक हैंडलर को बुलाया जाता है।

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

Comments

मुझे संदेह है कि, यदि आपके पास अपनी निर्भरता सूची में सभी मॉड्यूल हैं, तो सभी प्राप्त हो जाएंगे और स्मृति में मिल जाएंगे। पोस्ट करने से पहले jquery dom.ready उदाहरण एकत्र करता है।

— युगल जिंदल

यदि DOM पहले से तैयार है, तो कॉलबैक $(document).readyतुरंत चलेगा।

— डैनियल आयटेकिन

Answer 5

मैंने पाया कि मैं इसे मुख्य प्रविष्टि के हिस्से के रूप में करता हूं ताकि मेरी सभी जावास्क्रिप्ट की गारंटी हो कि DOM तैयार है और jquery लोड है। यकीन नहीं होता कि यह कितना अच्छा है, किसी भी प्रतिक्रिया का स्वागत है, लेकिन यहाँ मेरा main.js है:

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});