DOM में आवश्यकताएँ </ b> और <script> तत्व बनाने के बीच क्या अंतर है? [बन्द है]

Question

केवल <script>DOM में एक तत्व बनाने के लिए आवश्यकताएँ .JS का उपयोग करने के बीच क्या अंतर है ?

आवश्यकता के बारे में मेरी समझ। जेएस यह निर्भरता को लोड करने की क्षमता प्रदान करता है, लेकिन क्या यह केवल <script>आवश्यक बाहरी जेएस फ़ाइल को लोड करने वाले तत्व को बनाकर नहीं किया जा सकता है ?

उदाहरण के लिए, मान लें कि मेरे पास फ़ंक्शन है doStuff(), जिसके लिए फ़ंक्शन की आवश्यकता है needMe()। doStuff()बाहरी फ़ाइल में है do_stuff.js, जबकि needMe()बाहरी फ़ाइल में है need_me.js।

यह करना आवश्यक है। जेएस तरीका:

define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

केवल एक स्क्रिप्ट तत्व बनाकर ऐसा करना:

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);

    //do some stuff
    needMe();
    //do some more stuff
}

ये दोनों काम करते हैं। हालाँकि, दूसरे संस्करण में मुझे सभी की आवश्यकता नहीं है। मैं वास्तव में कोई कार्यात्मक अंतर नहीं देखता ...

Comments

ब्राउज़र कैशिंग के बारे में, क्या आवश्यकताएँ इसके साथ हस्तक्षेप करती हैं?

— मुहम्मद उमर

मैं इसे फिर से खोल रहा हूं क्योंकि यह दो बहुत ही समान चीजों के बीच का अंतर पूछ रहा है। इसका उत्तर निष्पक्ष रूप से दिया जा सकता है, और tbh मैं यह नहीं देख सकता कि इसमें राय कहाँ निहित है।

— रामेंखेफ

Answer 1

यहाँ ajaxian.com पर अच्छा लेख है क्यों इसका उपयोग करने के लिए:

आवश्यकताएँ: अतुल्यकालिक जावास्क्रिप्ट लोड हो रहा है

• कुछ प्रकार के # शामिल / आयात / आवश्यकता होती है
• नेस्टेड निर्भरता लोड करने की क्षमता
• डेवलपर के लिए उपयोग में आसानी लेकिन फिर एक अनुकूलन उपकरण द्वारा समर्थित जो तैनाती में मदद करता है

Comments

मैंने उन लोगों को पढ़ा था, लेकिन अब जब मैं इसके बारे में अधिक सोचता हूं तो मुझे एहसास होता है कि नेस्टेड निर्भरता का विचार केवल <स्क्रिप्ट> टैग लिखने से हासिल नहीं किया जा सकता है। धन्यवाद।

— मैक्स

"डेवलपर के लिए उपयोग में आसानी" सच्चाई से दूर नहीं हो सकती है। यह निश्चित रूप से आपके और किसी और के लिए एक कठिन सीखने की अवस्था है जो उस परियोजना में काम करने के लिए आएगा।

— साहत यल्कबोव

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

— जेसन सेब्रिंग

मैं संघर्ष कर रहा हूँ। विशेष रूप से मॉड्यूल के साथ जो खुद को वैश्विक वस्तुओं से जोड़ने की कोशिश करते हैं। (रिएक्ट मॉड्यूल्स) ...

— जिलेट

उस पृष्ठ की टिप्पणियों ने वास्तव में मुझे यह महसूस करने के लिए छोड़ दिया कि किसी को भागना चाहिए और आवश्यकता की ओर नहीं। विशेष रूप से नीचे के पास एक है जो stevesouders.com/tests/require.php से

— डेव

Answer 2

DOM में एक तत्व बनाने की तुलना में क्या फायदे की आवश्यकता है।

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

इसके बजाय, जो आप वास्तव में काम करने का सुझाव दे रहे हैं, उसे बनाने के लिए आपको कुछ इस तरह से करने की आवश्यकता होगी:

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';

    scriptElement.addEventListener("load", 
        function() { 
            console.log("script loaded - now it's safe to use it!");

            // do some stuff
            needMe();
            //do some more stuff

        }, false);

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}

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

यदि वेब एप्लिकेशन को सिंगल-पेज ऐप के रूप में बनाया गया है, तो विचार करें कि लोग वास्तव में पृष्ठ को बहुत बार लोड नहीं कर रहे हैं। इन मामलों में, सब कुछ पहले से लोड करने से वास्तव में उपयोग करते समय अनुभव तेजी से प्रकट होने में मदद मिलेगी में ऐप करते । इन मामलों में, आप सही हैं, एक पेज के सिर या शरीर में स्क्रिप्ट टैग को शामिल करके सभी संसाधनों को केवल लोड कर सकते हैं।

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

Answer 3

आवश्यकताएँ का उपयोग करने के कुछ अन्य बहुत ही कारण बताया गया है:

1. अपनी खुद की निर्भरता का प्रबंधन तेजी से बड़े आकार की परियोजनाओं के लिए अलग हो जाता है।
2. आप जितनी चाहें उतनी छोटी फाइलें रख सकते हैं, और निर्भरता या लोड ऑर्डर को ट्रैक करने के बारे में चिंता करने की ज़रूरत नहीं है।
3. आवश्यकताJS विंडो ऑब्जेक्ट को छुए बिना एक संपूर्ण, मॉड्यूलर ऐप लिखना संभव बनाता है।

इस Gist में यहाँ rmurphey की टिप्पणियों से लिया गया ।

अमूर्तता की परतें सीखने और समायोजित करने के लिए एक बुरा सपना हो सकता है, लेकिन जब यह एक उद्देश्य की सेवा करता है और इसे अच्छी तरह से करता है, तो यह समझ में आता है।

Comments

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

— jmort253

मैं पूरी तरह से @ jmort253 से सहमत हूं, यह शुरुआत में एक संघर्ष था, लेकिन अब मुझे यह बहुत पसंद है। तीनों बिंदु सही हैं! और किसी पुस्तकालय को एएमडीएफ करना उतना मुश्किल नहीं होना चाहिए ... या शिम का उपयोग करना।

— महापुरूष

Answer 4

यहाँ एक और अधिक ठोस उदाहरण है।

मैं 60 फाइलों के साथ एक परियोजना में काम कर रहा हूं। हमारे पास इसे चलाने के 2 अलग-अलग तरीके हैं।

1. एक बड़े संस्करण को लोड करें, 1 बड़ी फ़ाइल। (उत्पादन)

2. सभी 60 फाइलें लोड करें (विकास)

हम एक लोडर का उपयोग कर रहे हैं, इसलिए हमारे पास वेबपृष्ठ में केवल एक स्क्रिप्ट है

<script src="loader.js"></script>

वह मोड # 1 में डिफॉल्ट करता है (एक बड़ी कॉन्टेनेटेड फाइल को लोड करता है)। मोड # 2 (अलग फ़ाइलों) को चलाने के लिए हम कुछ ध्वज सेट करते हैं। यह कुछ भी हो सकता है। क्वेरी स्ट्रिंग में एक कुंजी। इस उदाहरण में हम बस यही करते हैं

<script>useDebugVersion = true;</script>
<script src="loader.js"></script>

loader.js कुछ इस तरह दिखता है

if (useDebugVersion) {
   injectScript("app.js");
   injectScript("somelib.js");
   injectScript("someotherlib.js");
   injectScript("anotherlib.js");
   ... repeat for 60 files ...
} else {
   injectScript("large-concatinated.js");
}

बिल्ड स्क्रिप्ट सिर्फ एक .sh फाइल है जो इस तरह दिखती है

cat > large-concantinated.js app.js somelib.js someotherlib.js anotherlib.js

आदि...

यदि कोई नई फ़ाइल जोड़ी जाती है, तो हम संभवतः मोड # 2 का उपयोग करेंगे क्योंकि हम विकास कर रहे हैं हमें injectScript("somenewfile.js")लोडर.जेएस में एक पंक्ति जोड़ना होगा

फिर बाद में उत्पादन के लिए हमें अपनी बिल्ड स्क्रिप्ट में somenewfile.js भी जोड़ना होगा। एक कदम हम अक्सर भूल जाते हैं और फिर त्रुटि संदेश प्राप्त करते हैं।

एएमडी पर स्विच करने से हमें 2 फ़ाइलों को संपादित करने की आवश्यकता नहीं है। लोडर.जेएस और सिंक में बिल्ड स्क्रिप्ट रखने की समस्या दूर हो जाती है। का उपयोग कर r.jsयाwebpack यह सिर्फ बनाने के लिए कोड पढ़ सकते हैंlarge-concantinated.js

यह निर्भरता से भी निपट सकता है, उदाहरण के लिए हमारे पास lib1.js और lib2.js इस तरह भरी हुई 2 फाइलें थीं

injectScript("lib1.js");
injectScript("lib2.js");

lib2 के लिए lib1 की आवश्यकता है। इसके अंदर कोड होता है जो कुछ ऐसा करता है

lib1Api.installPlugin(...);

लेकिन जैसे ही इंजेक्शन स्क्रिप्ट को अतुल्यकालिक रूप से लोड किया जाता है, कोई गारंटी नहीं है कि वे सही क्रम में लोड करेंगे। ये 2 स्क्रिप्ट एएमडी स्क्रिप्ट नहीं हैं, लेकिन आवश्यकता के अनुसार उपयोग कर रहे हैं। हम इसे अपनी निर्भरता बता सकते हैं

require.config({
    paths: {
        lib1: './path/to/lib1',
        lib2: './path/to/lib2',
    },
    shim: {
        lib1: {
            "exports": 'lib1Api',
        },
        lib2: {
            "deps": ["lib1"],
        },
    }
});

मैं हमारा मॉड्यूल है जो lib1 का उपयोग करता है हम यह करते हैं

define(['lib1'], function(lib1Api) {
   lib1Api.doSomething(...);
});

अब आवश्यकता होती है। js हमारे लिए स्क्रिप्ट को इंजेक्ट करेंगे और यह lib2 को तब तक इंजेक्ट नहीं करेगा जब तक कि lib1 लोड नहीं हो जाता है क्योंकि हमने बताया था कि lib2 lib1 पर निर्भर करता है। यह भी हमारे मॉड्यूल को शुरू नहीं करेगा जो कि lib1 का उपयोग करता है जब तक कि lib2 और lib1 दोनों ने लोड नहीं किया है।

यह विकास को अच्छा बनाता है (कोई निर्माण कदम नहीं, लोडिंग ऑर्डर के बारे में कोई चिंता नहीं) और यह उत्पादन को अच्छा बनाता है (प्रत्येक स्क्रिप्ट के लिए बिल्ड स्क्रिप्ट को अपडेट करने की आवश्यकता नहीं है)।

एक अतिरिक्त बोनस के रूप में हम पुराने ब्राउज़रों के लिए कोड पर बेबल को चलाने के लिए वेबपैक के बैबल प्लगइन का उपयोग कर सकते हैं और फिर से हमें उस बिल्ड स्क्रिप्ट को बनाए रखने की आवश्यकता नहीं है।

ध्यान दें कि यदि क्रोम (हमारी पसंद का ब्राउज़र) ने समर्थन करना शुरू कर दिया है import वास्तविक के लिए तो हम शायद विकास के लिए उस पर स्विच कर देंगे लेकिन यह वास्तव में कुछ भी नहीं बदलेगा। हम अभी भी एक संक्षिप्त फ़ाइल बनाने के लिए वेबपैक का उपयोग कर सकते हैं और हम इसे सभी ब्राउज़रों के लिए कोड पर बेबल चलाने में उपयोग कर सकते हैं।

यह सब स्क्रिप्ट टैग का उपयोग न करके और AMD का उपयोग करके प्राप्त किया जाता है