2010-05-05 10 views
14

मैं निम्नलिखित प्रकार की जावास्क्रिप्ट फ़ाइलों को असीमित रूप से लोड करने के लिए एक साफ तरीका ढूंढ रहा हूं: एक "कोर" जेएस फ़ाइल (हम्म, चलो बस इसे कॉल करें, ओह मुझे नहीं पता , "jquery!" हाहा), जेएस फाइलों की एक्स संख्या जो "कोर" जेएस फ़ाइल लोड होने पर निर्भर हैं, और वाई असंबद्ध जेएस फाइलों की संख्या। मेरे पास इसके बारे में कुछ विचार हैं कि इसके बारे में कैसे जाना है, लेकिन यह सुनिश्चित नहीं है कि सबसे अच्छा तरीका क्या है। मैं दस्तावेज़ निकाय में लोडिंग स्क्रिप्ट से बचना चाहता हूं।लोडिंग जेएस फाइलें और अन्य आश्रित जेएस फाइलें असीमित रूप से

उदाहरण के लिए, मैं निम्नलिखित 4 जावास्क्रिप्ट फ़ाइलें एसिंक्रोनस रूप से लोड करना चाहते हैं, उचित नाम:


/js/my-contact-page-js-functions.js // unrelated/independent script 
/js/jquery-1.3.2.min.js // the "core" script 
/js/jquery.color.min.js // dependent on jquery being loaded 
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script 

लेकिन क्योंकि यह गारंटी नहीं है कि jQuery रंग प्लगइन से पहले भरी हुई है इस काम नहीं करेगा ...


(function() { 
    var a=[ 
     '/js/my-contact-page-functions.js', 
     '/js/jquery-1.4.2.min.js', '/js/jquery.color.js', 
     'http://cdn.thirdparty.com/third-party-tracking-script.js', 
    ], 
    d=document, 
    h=d.getElementsByTagName('head')[0], 
    s, 
    i, 
    l=a.length; 
    for(i=0;i<l;i++){ 
     s=d.createElement('script'); 
     s.type='text/javascript'; 
     s.async=true; 
     s.src=a[i]; 
     h.appendChild(s); 
    } 
})(); 

क्या यह jquery और रंग प्लगइन को असीमित रूप से लोड करना संभव नहीं है? (चूंकि कलर प्लगइन के लिए जरूरी है कि jQuery पहले लोड हो।)

पहली विधि जो मैं विचार कर रहा था वह सिर्फ एक फ़ाइल में jQuery स्रोत के साथ रंग प्लगइन स्क्रिप्ट को गठबंधन करना है।

फिर एक और विचार मैं था इसलिए की तरह रंग प्लगइन लोड हो रहा था:


$(window).ready(function() { 
    $.getScript("/js/jquery.color.js"); 
}); 

किसी को भी कैसे आप इस बारे में जाना चाहते हैं पर कोई विचार? धन्यवाद!

उत्तर

5

LabJS और RequireJS अभी दो लोकप्रिय विकल्प हैं। वे दोनों jQuery के साथ काम करते हैं लेकिन थोड़ा अलग दृष्टिकोण लेते हैं, इसलिए आपको दोनों को देखना चाहिए।

+0

एलएबी अब बनाए रखा नहीं जा रहा है, इसलिए मैंने आपके द्वारा स्वीकृत उत्तर बदल दिया है, क्योंकि आपने RequJS का उल्लेख किया है। (शायद आजकल बेहतर विकल्प!) उम्मीद है कि एसओ पर पुराने प्रश्नों के लिए यह "सही" चीज है। – taber

1

आप YUI Loader को register your own modules and dependencies पर ले जा सकते हैं और फिर उन्हें लोड कर सकते हैं।

आपको सफलता, विफलता और यहां तक ​​कि प्रगति के लिए पूर्ण हुक मिलते हैं, ताकि आप अपनी पसंद की किसी भी एसिंक्रोनस एक्शन को हुक कर सकें।

0

आप जिस कारण का उल्लेख करते हैं उसके लिए आप पूरी तरह से एसिंक लोड प्राप्त करने में सक्षम नहीं होंगे; निर्भरता।

मेरे 10p के लिए, मैं $ .getScript() मार्ग का पालन करता हूं। यह मूल रूप से $ .ajax() के लिए सिर्फ एक रैपर है, इसलिए इस तरह से आपकी स्क्रिप्ट लोड करना आपको अतुल्यकालिक लोडिंग देगा जो आप बाद में कर रहे हैं।

12

LABjs विशेष रूप से इस समस्या के लिए बनाया गया है।

<script src="lab.js"></script> 
<script> 
    $LAB 
    .script("jquery.js") 
    .wait() 
    .script("jquery.color.js") 
    .script("jquery.otherplugin.js") 
    .script("mylib.js") 
    .wait() 
    .script("unrelated1.js") 
    .script("unrelated2.js"); 
</script> 

तुम भी अपने स्वयं के $LAB श्रृंखला में असंबंधित स्क्रिप्ट डाल सकता है, अगर वे वास्तव में jQuery और अपने अन्य लिपियों के लिए इंतजार करने की कोई जरूरत नहीं है।

+0

धन्यवाद, अगर मैं lab.js एसिंक्रोनस रूप से भी लोड करने के लिए चाहता था, मैं कैसे पता होगा जब $ प्रयोगशाला मौजूद है और तैयार है कहा जा सकता है? क्या मुझे कुछ ऐसा उपयोग करने की आवश्यकता होगी: function initLab() {...} ... document.onload = initLab; – taber

+0

आप ऐसा कुछ कर सकते थे, लेकिन मैं इसके खिलाफ सलाह दूंगा। LAB.js minification के बाद केवल 4.5k है (तार gzipped भर में केवल 2.1k)। यदि आप चाहते थे, तो आप HTML दस्तावेज़ में LABjs कोड को '

संबंधित मुद्दे