मुझे जावास्क्रिप्ट मॉड्यूल लोडिंग की आवश्यकता क्यों है और इन सभी लोडरों के बीच क्या अंतर है?

Question

प्रश्न 1:

मैं क्यों asynchrously एक वेब पेज में मेरी JavaScript फ़ाइलों को लोड करने के लिए की जरूरत है? मैं सर्वर पक्ष पर इसके लिए तर्क देख सकता हूं, लेकिन अगर मुझे क्लाइंट में लोड करने की सभी फाइलें पता हैं, तो मुझे अपनी सभी स्रोत फ़ाइलों को 1 फ़ाइल में क्यों नहीं जोड़ना चाहिए और पेज लोड पर लोड करना चाहिए? क्या पहला प्रारंभिक पृष्ठ लोड इतना महत्वपूर्ण है कि प्रत्येक जेएस फ़ाइल को पुनर्प्राप्त करने में विलंबता के कारण भविष्य के संचालन धीमा हो सकते हैं?

प्रश्न 2: तुल्यकालिक

एएमडी भार प्रत्येक जेएस asynchrously फ़ाइल, CommonJS भार:

जवाब 1 सवाल करने के लिए यह मानते हुए कि मैं अलग से जे एस फ़ाइलें लोड करने की आवश्यकता है। सीजेएस सर्वर-साइड लोडिंग के लिए आवश्यक है (इस प्रकार Node.js काम करता है, अगर मुझे गलत नहीं है)। एएमडी क्लाइंट के लिए बेहतर फिट लगता है। इस प्रकार, क्लाइंट में सीजेएस का उपयोग करने का एकमात्र कारण सर्वर के साथ कोड साझा करना है।

क्या एएमडी और सीजेएस अच्छी तरह से खेलने का कोई तरीका है, ताकि क्लाइंट जेएस फाइलों को असीमित रूप से लोड किया जा सके लेकिन फिर भी सीजेएस सिंटैक्स हो?

(वास्तव में कर require.js क्या करता है? मैं के लिए मुझे के जीवन में अपनी वेबसाइट पर लाइनों के बीच नहीं पढ़ सकते हैं।)

Answer 1

आप "की जरूरत" जावास्क्रिप्ट फ़ाइलें एसिंक्रोनस रूप से या कुछ कस्टम लोडर के माध्यम से लोड करने के लिए नहीं है। यहाँ कुछ कारण जब अतुल्यकालिक लोड हो रहा है या कस्टम लोड हो रहा है एक लाभ प्रदान कर सकते हैं:

• जब जावास्क्रिप्ट फ़ाइल सामान्य रूप से की जरूरत नहीं है और आप हर समय के बजाय मांग पर लोड करने के लिए चाहते हो सकता है
• जब जावास्क्रिप्ट फ़ाइल प्रारंभिक पृष्ठ प्रदर्शित करने के लिए की जरूरत नहीं है और आप अपने पृष्ठ
• के लिए पहला प्रदर्शन की गति को अधिकतम करने के लिए आप वास्तव में के समय को नियंत्रित करना चाहते हैं जब जावास्क्रिप्ट फ़ाइल भरी हुई है
• जब आप, निर्णय लेने से कर रहे हैं कुछ शर्त के आधार पर चाहते हैं , जावास्क्रिप्ट फ़ाइल को लोड करना है या नहीं (उदाहरण के लिए, यदि सीडीएन से लोड हो रहा है, तो आप mi एक बैकअप स्थान से GHT लोड)
• आप स्क्रिप्ट लोड हो रहा है एक और

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

Answer 2

फ़ाइल को संयोजित करने के साथ इस मुद्दे का हिस्सा डाउनलोड करने में समय नहीं है, यह हर पृष्ठ पर संकलित समय बिताया गया है।

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

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

RequJS मूल रूप से एक वादा प्रणाली का उपयोग करता है।

यह आपकी निर्भरताओं को संभालने के बाद, लागू होने के लिए कोड को (कॉलबैक के रूप में) लागू करने के लिए निर्भरता घोषित करने की अनुमति देता है।
यदि उन निर्भरताओं की कोई निर्भरता है, तो वे उनकी निर्भरताओं को लोड होने तक प्रारंभ नहीं किया जाएगा।
यदि आप बस इसे लोड करना चाहते हैं और ऑर्डर महत्वपूर्ण नहीं है, तो आपको इसे निर्भरता देने की आवश्यकता नहीं है।

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

यदि आप संकलित समय आपके द्वारा किए गए HTTP अनुरोधों की संख्या से अधिक हो जाते हैं, तो आपको कोई अंतर दिखाई नहीं दे सकता है। लेकिन कुल अनुप्रयोगों के लिए जो हजारों लाइनों के लंबे (या सैकड़ों) लंबे होते हैं, जहां किसी भी पृष्ठ पर उस कार्यक्षमता का केवल एक अंश आवश्यक होता है, पृष्ठ लोड होने के दौरान अनुमानित समय के मामले में बड़ी बचत हो सकती है, और कब ऐप उपयोगकर्ता द्वारा मूलभूत बातचीत के लिए "तैयार" है।

Answer 3

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

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

define([ 'jquery' ], function ($) { 
    // use jquery in here without clouding up the global namespace 

    return {}; // return your module for use in a different module or whatever 
}; 

इस उदाहरण में, परिभाषित मॉड्यूल में कोड जब तक jQuery मॉड्यूल डाउनलोड किया गया है चलाने नहीं किया जाएगा। इसके बाद यह आपके नए परिभाषित मॉड्यूल में सीधे jquery मॉड्यूल को $ तर्क के रूप में इंजेक्ट करेगा।

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

एक और लाभ यह है कि आप एक ही मॉड्यूल के लिए अलग-अलग पथों का उपयोग करने के लिए अपना लोडर सेट अप कर सकते हैं, ताकि आप jquery मॉड्यूल के लिए पथ को परिभाषित कर सकें 'https://ajax.googleapis.com/ajax/libs/jquery /1.8.2/jquery.min.js 'आपके कोड में एक स्थान पर है, भले ही इसका उपयोग लगभग हर मॉड्यूल में किया जा सके। अब जब मुझे अपने jquery संस्करण को 1.8.3 पर अपडेट करने की आवश्यकता है, तो मैं बस अपने कोड में एक स्थान पर पथ बदल सकता हूं, और यह प्रत्येक मॉड्यूल के लिए इस पथ का उपयोग करेगा जो निर्भरता के रूप में jquery का उपयोग करता है। जब आप मॉड्यूल स्टब्स का उपयोग कर रहे हों, या कुछ मॉड्यूल के डीबग संस्करणों का परीक्षण करते समय यह आसान स्विचिंग के लिए भी उपयोगी हो सकता है।

अब यह छोटी परियोजनाओं के लिए जरूरी नहीं है। हालांकि आपका प्रोजेक्ट बड़ा हो जाता है, इस प्रकार की लोडिंग को और अधिक समझना शुरू हो जाता है।