क्या आपके पास कई डॉलर (दस्तावेज़) पहले से ही हो सकते हैं (फ़ंक्शन () {…}); वर्गों?

Question

यदि मेरे पास स्टार्टअप पर बहुत सारे कार्य हैं, तो क्या वे सभी एक से कम में होंगे:

$(document).ready(function() {

या मेरे पास कई ऐसे बयान हो सकते हैं?

Comments

मुख्य रूप से आवश्यकता तब होती है जब मुझे कई js फ़ाइलों को लोड करने की आवश्यकता होती है, जहां प्रत्येक में $ (दस्तावेज़) होता है। पहले से ही (); कार्य

— अब्दिलाह

@ एलोरा ने यह सवाल एक साक्षात्कार में पूछा: डी

— थैंक्स

Answer 1

आपके पास कई हो सकते हैं, लेकिन यह हमेशा सबसे साफ काम नहीं है। उन्हें अति प्रयोग न करने की कोशिश करें, क्योंकि यह पठनीयता को गंभीरता से प्रभावित करेगा। इसके अलावा, यह पूरी तरह से कानूनी है। नीचे देखें:

http://www.learningjquery.com/2006/09/multiple-document-ready

इसे आज़माएं:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

आप पाएंगे कि यह इसके बराबर है, निष्पादन के आदेश पर ध्यान दें:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

यह भी ध्यान देने योग्य है कि एक $(document).readyब्लॉक के भीतर परिभाषित एक फ़ंक्शन को दूसरे $(document).readyब्लॉक से नहीं बुलाया जा सकता है , मैंने सिर्फ यह परीक्षण किया है:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

आउटपुट था:

hello1
something
hello2

Comments

कई $ (डॉक्यूमेंट) का उपयोग करते समय निष्पादन के आदेश पर भरोसा करना बुद्धिमानी नहीं है। पहले से ही () स्टेटमेंट्स। प्रत्येक को पहले से ही निष्पादित या नहीं होने वाले किसी अन्य के स्वतंत्र रूप से निष्पादित करने की आवश्यकता है।

— जेम्स

@ एओपी - मुझे नहीं पता कि यह कितना समझ में आता है, अगर उन्हें क्रम में निष्पादित नहीं किया जाता है, तो वे आवेदन के संदर्भ में पूरी तरह से व्यर्थ हैं, इसलिए कई डॉलर (दस्तावेज़) का उपयोग करके पहले से ही (ब्लॉक पूरी तरह से टूट जाएंगे।

— karim79

@ karim79 निश्चित रूप से यह (ओपी का सवाल) कई स्टार्टअप चिंताओं के साथ एक जटिल बिट कोड लिखते समय सबसे अधिक लागू होता है - यानी कुछ कोड जो हमेशा लोडिंग पूरा होने पर चलाया जाता है , और कुछ जो केवल कुछ सामग्री नोड्स पर आवश्यक होते हैं? ऐसी स्थिति में, संदर्भ को शालीन होना चाहिए, और निष्पादन का क्रम अपरिवर्तित होना चाहिए - आदेश व्यवहार की परवाह किए बिना पिछले एक को अधिलेखित किए बिना 'DOM तैयार' घटना को असाइन करने में सक्षम होना चाहिए।

— तेहलवृस

एक तैयार ब्लॉक में परिभाषित फ़ंक्शन के बारे में, दूसरे तैयार ब्लॉक से कॉल करने योग्य नहीं है - यह सही है जिस तरह से आप फ़ंक्शन को परिभाषित करते हैं, लेकिन यदि आप इसके बजाय इसे SaySomething = function () {} के रूप में परिभाषित करते हैं तो आप इसे कॉल कर सकते हैं। अजीब है, है ना? jsfiddle.net/f56qsogm इसे यहां देखें।

— फर

मुझे लगता है कि यह इस तरह से व्यवहार करता है क्योंकि यह फ़ंक्शन को विंडो ऑब्जेक्ट में जोड़ रहा है जो विश्व स्तर पर सुलभ है। अन्यथा यह स्थानीय रूप से उस तैयार कार्य के लिए घोषित किया गया एक घोषणापत्र है।

— फेर

Answer 2

आप कई का उपयोग कर सकते हैं। लेकिन आप एक दस्तावेज़ के अंदर भी कई कार्यों का उपयोग कर सकते हैं।

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Comments

यदि आप पृष्ठ से जुड़े कोड का पूर्ण नियंत्रण रखते हैं तो यह ठीक है। यदि किसी ने पहले ही पृष्ठ से जुड़ी किसी अन्य फ़ाइल में यह लिखा है, तो आप इसे इस तरह घोषित करना ठीक समझते हैं।

— जेम्स विस्मैन

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

— मिकेल

बस यह कहने की कोशिश कर रहा है कि कभी-कभी, अन्य लोगों ने पृष्ठ पर संलग्न मॉड्यूल लिखे होंगे जिनके पास पहले से ही घोषित दस्तावेज़ तैयार हैं, इसलिए आपके पास अपने सभी कोड को एक फ़ंक्शन में स्थानांतरित करने की लक्जरी नहीं हो सकती है (जो, दी गई, आदर्श होगी )। मैं भी यहाँ बहुत अधिक सामान रखने से सावधान रहूँगा, क्योंकि हम तैयार ब्लोटिंग करेंगे, जो कोड को बनाए रखने के लिए समान रूप से कठिन बना सकता है।

— जेम्स वाइसमैन

आह, अब मैं तुम्हें ले आता हूं। हाँ, मैं उस पर सहमत हूँ। बस एक उदाहरण के लिए यह साबित करना है कि यह संभव है;)

— मिकेल

Answer 3

हां आपके पास आसानी से कई ब्लॉक हो सकते हैं। बस उनके बीच निर्भरता से सावधान रहें क्योंकि मूल्यांकन क्रम वह नहीं हो सकता है जिसकी आप अपेक्षा करते हैं।

Answer 4

हां , कई डॉलर (दस्तावेज़) पहले से ही () कॉल करना संभव है। हालाँकि, मुझे नहीं लगता कि आप जान सकते हैं कि उन्हें किस तरीके से अंजाम दिया जाएगा। (स्रोत)

Comments

जोड़ा गया क्रम में

— redsquare

धन्यवाद, यह स्पष्ट करने के लिए अच्छा है, क्योंकि - विषय पर सामान्य ज्ञान के बावजूद - jQuery के तैयार () पृष्ठ वास्तव में यह नहीं कहता कि आप कर सकते हैं या नहीं (लेखन के समय :))। हालाँकि यह किसी भी तरह का है, यह ठीक है, अगर आप एक वाक्य की पंक्तियों के बीच पढ़ते हैं:Ready handlers bound this way are executed after any bound by the other three methods above.

— रेग एडिट

Answer 5

हाँ यह संभव है लेकिन आप एक div #mydiv का उपयोग कर सकते हैं और दोनों का उपयोग कर सकते हैं

$(document).ready(function(){});

//and

$("#mydiv").ready(function(){});

Comments

दिलचस्प विचार है, लेकिन यह बेहतर क्यों है?

— टिम

डिव का उपयोग करना समर्थित नहीं है। यदि किसी कारण से आप ऐसा करते हैं, तो आप अपने जोखिम पर ऐसा करते हैं: (।) विधि केवल वर्तमान दस्तावेज़ से मेल खाते jQuery ऑब्जेक्ट पर कॉल की जा सकती है

— Reg

Answer 6

हाँ, यह पूरी तरह से ठीक है। लेकिन बिना किसी कारण के इसे करने से बचें। उदाहरण के लिए मैंने इसका उपयोग वैश्विक पृष्ठों के नियमों की घोषणा करने के लिए इंडिविजुअल पेजों की तुलना में किया था जब मेरी जावास्क्रिप्ट फ़ाइलों को गतिशील रूप से उत्पन्न किया गया था, लेकिन अगर आप इसे केवल और फिर से करते रहेंगे तो इसे पढ़ना मुश्किल हो जाएगा।

इसके अलावा, आप किसी अन्य jQuery(function(){});कॉल से कुछ तरीकों का उपयोग नहीं कर सकते हैं, इसलिए एक और कारण है कि आप ऐसा नहीं करना चाहते हैं।

पुराने के साथ window.onloadहालांकि आप पुराने को बदल देंगे हर बार जब आप एक फ़ंक्शन निर्दिष्ट करते हैं।

Answer 7

हाँ तुम कर सकते हो।

एकाधिक दस्तावेज़ तैयार अनुभाग विशेष रूप से उपयोगी होते हैं यदि आपके पास उसी पृष्ठ पर उपयोग करने वाले अन्य मॉड्यूल हैं जो इसका उपयोग करते हैं। पुरानी window.onload=funcघोषणा के साथ, हर बार जब आप किसी फ़ंक्शन को कॉल करने के लिए निर्दिष्ट करते हैं, तो उसने पुराने को बदल दिया।

अब निर्दिष्ट सभी कार्य कतारबद्ध / स्टैक्ड हैं (क्या कोई पुष्टि कर सकता है?) इस बात की परवाह किए बिना कि वे किस तैयार अनुभाग में निर्दिष्ट हैं।

Comments

हां, यह सही है, पिछले $ (डॉक्यूमेंट) के पहले से किए गए कार्यों की तुलना में फंक्शंस को कतारबद्ध किया जाता है।

— Deeksy

Answer 8

मुझे लगता है कि जाने का बेहतर तरीका नामित कार्यों पर स्विच करना है (उस विषय पर अधिक के लिए इस अतिप्रवाह की जांच करें) । इस तरह आप उन्हें एक ही घटना से बुला सकते हैं।

इस तरह:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

इस तरह आप उन्हें एक ही तैयार फ़ंक्शन में लोड कर सकते हैं।

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

यह आपके कंसोल.लॉग को निम्न आउटपुट देगा:

first
second
third

इस तरह आप अन्य घटनाओं के लिए फ़ंक्शंस का पुन: उपयोग कर सकते हैं।

jQuery(window).on('resize',function(){
    secondFunction();
});

वर्किंग वर्जन के लिए इस फील को चेक करें

Answer 9

यह कानूनी है, लेकिन कभी-कभी यह अवांछित व्यवहार का कारण बनता है। एक उदाहरण के रूप में मैंने मैजिकसुगेस्ट लाइब्रेरी का उपयोग किया और अपने प्रोजेक्ट के एक पेज में दो मैजिकसुगेस्ट इनपुट जोड़े और इनपुट्स के प्रत्येक इनिशियलाइज़ेशन के लिए अलग डॉक्यूमेंट रेडी फ़ंक्शंस का उपयोग किया। बहुत पहले इनपुट आरंभीकरण ने काम किया, लेकिन दूसरा नहीं और कोई त्रुटि नहीं दे रहा था, दूसरा इनपुट दिखाई नहीं दिया। इसलिए, मैं हमेशा एक दस्तावेज़ तैयार फ़ंक्शन का उपयोग करने की सलाह देता हूं।

Answer 10

तुम भी HTML फ़ाइलों के अंदर दस्तावेज़ तैयार कार्यों घोंसला कर सकते हैं। यहाँ jquery का उपयोग करके एक उदाहरण दिया गया है:

फ़ाइल: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

फ़ाइल: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

कंसोल आउटपुट:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

ब्राउज़र दिखाता है:

test_embed.html

Answer 11

आप इसे निम्न तरीके से भी कर सकते हैं:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

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

Comments

क्या आप बता सकते हैं कि यह अन्य उत्तरों से कैसे भिन्न है?

— स्टीफन राच

सुनिश्चित करें: पिछले उत्तरों ने पहले से ही ब्लॉक के बाहर एक और नामित फ़ंक्शन के साथ एक। डेड ब्लॉक के अंदर कई नामित फ़ंक्शन का उपयोग करके या पहले से ही ब्लॉक में एक एकल अनाम फ़ंक्शन का उपयोग करके दिखाया। मुझे यह सवाल शोध करते समय लगा कि अगर पहले से ही ब्लॉक के अंदर कई अनाम कार्यों को करने का कोई तरीका है - तो मुझे सिंटैक्स सही नहीं मिल सकता है। मैंने आखिरकार इसका पता लगा लिया, और आशा व्यक्त की कि अपने परीक्षण कोड को पोस्ट करके मैं दूसरों को उसी प्रश्न के उत्तर की तलाश में मदद करूंगा जो मेरे पास था।

— जेप्राइस

क्षमा करें, मेरा मतलब प्रश्न में था। टेक्स्ट बॉक्स के नीचे बाईं ओर एक एडिट बटन है। यह बताते हुए कि आपका समाधान अलग / बेहतर क्यों है, यह बेहतर उत्तर देता है क्योंकि भविष्य का पाठक "क्यों" को जल्दी समझ सकता है। धन्यवाद।

— स्टीफन राउच