आलसी लोडिंग जावास्क्रिप्ट

Question

आलसी लोडिंग जेएस या ऑनडेंड लोडिंग के लिए इस 3 तरीकों के बीच बुनियादी अंतर क्या है और क्यों?

स्क्रिप्ट 1:

$.getScript = function(url, callback, cache){ 
    $.ajax({ 
     type: "GET", 
     url: url, 
     success: callback, 
     dataType: "script", 
     cache: cache 
    }); 
}; 

script2:

function require(file, callback) { 
    var script = document.getElementsByTagName('script')[0], 
     newjs = document.createElement('script'); 

    // IE 
    newjs.onreadystatechange = function() { 
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { 
      callback(); 
     } 
    }; 

    // others 
    newjs.onload = function() { 
     callback(); 
    }; 

    newjs.src = file; 
    script.parentNode.insertBefore(newjs, script); 
} 

document.getElementById('id').onclick = function() { 
    require('ondemand.js', function() { 
     extraFunction('loaded from the parent page'); 
     document.body.appendChild(document.createTextNode('done!')); 
    }); 
}; 

script3:

$L = function (c, d) { 
    for (var b = c.length, e = b, f = function() { 
      if (!(this.readyState 
        && this.readyState !== "complete" 
        && this.readyState !== "loaded")) { 
       this.onload = this.onreadystatechange = null; 
       --e || d() 
      } 
     }, g = document.getElementsByTagName("head")[0], i = function (h) { 
      var a = document.createElement("script"); 
      a.async = true; 
      a.src = h; 
      a.onload = a.onreadystatechange = f; 
      g.appendChild(a) 
     }; b;) i(c[--b]) 
}; 

Answer 1

1. स्क्रिप्ट लोड करने के लिए ajax का उपयोग करता है। अधिक विशेष रूप से यह कुछ जेएस लोड करने के लिए एक्सएचआर का उपयोग करता है और इसे ब्राउज़र में उपलब्ध कराता है। कोई अवरोध नहीं किया जाता है। यह अभी भी वही मूल नीति लागू करता है।
2. <script/> तत्व बनाकर एक नई .js फ़ाइल इंजेक्ट करने के लिए हेडर को संशोधित करता है। यह पृष्ठ लोड पर ब्राउज़र को अवरुद्ध नहीं करता है।
3. वही चीज़ # 2 जैसा है लेकिन ऐसा लगता है कि यह स्क्रिप्ट की एक सरणी का समर्थन करता है। यह सच में async भी सेट करता है जो अवरुद्ध नहीं करता है। लूप के लिए और अधिक भ्रमित है क्योंकि यह बहुत अधिक अज्ञात तरीकों का निर्माण करता है।

Answer 2

1. एक XmlHttpRequest और eval() इसके साथ स्क्रिप्ट को पुन: प्राप्त करने के लिए लगता है। यदि स्क्रिप्ट को उसी प्रोटोकॉल/डोमेन/पोर्ट पर होस्ट नहीं किया जाता है तो यह काम नहीं करेगा।

2. और 3. दोनों एक ही काम करते हैं: वे <script src="the script url"></script> तत्व बनाते हैं, onload घटनाओं को बांधें और इसे पृष्ठ पर डालें। एक बार लोड होने के बाद ब्राउज़र द्वारा स्क्रिप्ट को निष्पादित किया जाता है, और onload ईवेंट निकाल दिया जाता है।

Answer 3

आप इस नए पुस्तकालय बुलाया head.js

वे कुछ दिलचस्प विचारों और एपीआई है की कोशिश करनी चाहिए .. आशा है कि यह मदद करता है।

या आप क्या कर सकते हैं सामान्य स्क्रिप्ट फ़ाइल नाम प्राप्त करने के लिए सामान्य xhr अनुरोध का उपयोग करें और डोम में डालने के लिए इस तरह की विधि का उपयोग करें .. मैंने हटाए गए हिस्से को भी जोड़ा है।

addScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0];   
    var newScript = document.createElement('script'); 
    newScript.type = 'text/javascript'; 
    newScript.src = file; 
    headID.appendChild(newScript); 
}; 
removeScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0].children; 
    for(var i in headID) 
     if(headID[i].tagName == "SCRIPT") 
      if(headID[i].getAttribute('src') == file) 
       headID[i].parentNode.removeChild(headID[i]); 
} 

प्रयोग कर रहे हैं अगर तुम न jQuery की तरह एक पुस्तकालय आप सर्वर से HTML या स्क्रिप्ट मार्कअप हो और डोम में डालने में करने के लिए .html का उपयोग() API कर सकते हैं कुछ के बारे में चिंता करने की जरूरत

Answer 4

1. ajax के माध्यम से स्क्रिप्ट हो जाता है, और eval() की सामग्री
2. head तत्व में एक script तत्व डालें और वापस रिपोर्ट जब यह लोड होने के रूप में (2) लेकिन स्वीकार करते हैं और स्क्रिप्ट यूआरएल की सरणी
3. ही है, और जिस तरह से अधिक मिश्रित रूप से लिखा है

(2) और (3) दोनों onreadystatechange हुक, जो इसका समर्थन नहीं करता (उदाहरण के लिए पुराने ब्राउज़र के साथ संगत नहीं हो सकता है, Firefox 3.x और नीचे का उपयोग)।

(1) शायद सबसे मजबूत, संगतता-बुद्धिमान है, क्योंकि इसे केवल एक्सएचआर की आवश्यकता है।लेकिन अगर आपको उस कोड में त्रुटियां मिलती हैं जो आप लोड करते हैं, तो ब्राउजर का कंसोल बहुत उपयोगी नहीं हो सकता है, क्योंकि त्रुटि सिर्फ "eval'd कोड" में हुई है, न कि किसी विशिष्ट फ़ाइल/लाइन में। उस ने कहा, आलसी लोडिंग आम तौर पर एक अनुकूलन चीज है, इसलिए आप डिबगिंग करते समय सामान्य रूप से स्क्रिप्ट को या अन्य 2 विधियों में से किसी एक के साथ शामिल कर सकते हैं।