मांग पर जावास्क्रिप्ट निर्भरता लोड करना

Question

मुझे यकीन है कि इस समस्या के विभिन्न दृष्टिकोण हैं, और मैं कुछ के बारे में सोच सकता हूं। लेकिन मैं इस पर अन्य लोगों की राय सुनना चाहता हूं। अधिक विशिष्ट होने के लिए मैंने एक विजेट बनाया है जो उपयोगकर्ताओं को Google मानचित्र मानचित्र से अपना स्थान चुनने की अनुमति देता है। यह विजेट मांग पर प्रदर्शित होता है और संभवतः उस पेज के 10 उपयोगों में से प्रत्येक 1 का उपयोग किया जाएगा जहां इसे रखा गया है। इस विजेट के लिए निर्भरता लोड करने का सबसे आसान तरीका (Google मानचित्र जेएस एपीआई) पृष्ठ में एक स्क्रिप्ट टैग रखना है। लेकिन इससे ब्राउजर अनुरोध करेगा कि प्रत्येक पेज लोड पर स्क्रिप्ट। मैं ब्राउजर को केवल उस स्क्रिप्ट को अनुरोध करने का एक तरीका ढूंढ रहा हूं जब उपयोगकर्ता को विजेट को प्रदर्शित करने की आवश्यकता होती है।

Answer 1

function loadJSInclude(scriptPath, callback) 
{ 
    var scriptNode = document.createElement('SCRIPT'); 
    scriptNode.type = 'text/javascript'; 
    scriptNode.src = scriptPath; 

    var headNode = document.getElementsByTagName('HEAD'); 
    if (headNode[0] != null) 
     headNode[0].appendChild(scriptNode); 

    if (callback != null)  
    { 
     scriptNode.onreadystagechange = callback;    
     scriptNode.onload = callback; 
    } 
} 

और उपयोग करने के लिए (मैं एक उदाहरण के रूप swfObject प्रयुक्त):

var callbackMethod = function() 
{ 
    // Code to do after loading swfObject 
} 

// Include SWFObject if its needed 
if (typeof(SWFObject) == 'undefined')  
    loadJSInclude('/js/swfObject.js', callbackMethod); 
else 
    callbackMethod(); 

Answer 2

आप <script src="..."> टैग को DOM पेड़ में जोड़कर स्क्रिप्ट गतिशील रूप से लोड कर सकते हैं।

Answer 3

आप jsloader पर एक नज़र लेने के लिए चाहते हो सकता है: http://www.jsloader.com/

Answer 4

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

उस समस्या का समाधान (एक समाधान) फ़ाइल के निचले हिस्से में एक चर जोड़ने और रिकर्सिव का उपयोग करना है setTimeout यदि चर परिभाषित किया गया है की जाँच करें और फ़ाइल के आधार पर लोड करना समाप्त किया जा रहा है जब तक कि "जे एस फ़ाइल के नीचे" चर परिभाषित किया गया है कोड के निष्पादन को स्थगित करने के लिए कॉल ...

हम वास्तव में भी नज़र रखी फ़ाइलें जो जहां जोड़कर शामिल पृष्ठ पर एक छिपे हुए क्षेत्र में फ़ाइल नामों का हैश मूल्य। इसका मतलब यह है कि हम कभी नहीं अधिक तो एक बार

वास्तव में सुंदर गंधा ...

Answer 5

Google AJAX एपीआई गूगल के जावास्क्रिप्ट एपीआई के लिए गतिशील लोड हो रहा है प्रदान करते हैं एक ही फाइल सहित ... समाप्त हो गया।

function mapsLoaded() { 
    var map = new google.maps.Map2(document.getElementById("map")); 
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); 
} 

function loadMaps() { 
    google.load("maps", "2", {"callback" : mapsLoaded}); 
} 

Answer 6

आप अचल संपत्ति साइट पर कोई वास्तविक DEMO पर एक नज़र लेने के लिए चाहते हो सकता है: वहाँ दस्तावेज में loading the Maps JS on-demand का एक उदाहरण है।

डेमो पेज पर, मांग पर लोड किए गए मानचित्र को देखने के लिए लिंक [Xem bản đồ] पर क्लिक करें। नक्शा तभी लोड किया जाता है जब पृष्ठ लोड के समय लिंक क्लिक नहीं किया जाता है, इसलिए यह पृष्ठ डाउनलोड समय को कम कर सकता है।