getScript - कैसे केवल कॉल करने के लिए करता है, तो पहले से ही एक क्लिक पर

Question

कहा जाता है, तो निम्न लोड हो जाता है:

$.getScript('/javascripts/contacts.js'); 

मैं एक बयान है कि कहते हैं

कैसे लिख सकता है अगर getScript ऊपर पहले से ही भरा हुआ है एक्स , अगर इसे लोड नहीं किया गया है, तो वाई ...?

धन्यवाद

Answer 1

var gotContacts = 0; 
function getContacts(){ 
    if (!gotContacts){ 
     $.getScript('/javascripts/contacts.js', function() { 
      gotContacts = 1; 
      doSomethingWithContacts(); 
     }); 
    }else{ 
     doSomethingWithContacts(); 
    } 
} 

Answer 2

ऐसा मत करो; अपने संकलक को अपना स्रोत कोड लोड करने के रूप में <script> टैग का इलाज न करें। इसके बजाय, javascript minifier का उपयोग करके अपने सभी स्रोत कोड को एकसाथ संयोजित करें, और केवल एक बार सर्वर को दबाएं।

चार 4k फ़ाइलों को लोड करने से एक 4k फ़ाइल लोड हो रही है, और मिनीफायर शायद उससे बेहतर काम कर सकता है। आपको वैसे भी इसकी आवश्यकता नहीं होनी चाहिए- आपका ब्राउज़र वैसे भी इन मॉड्यूल को कैश कर रहा है और जब तक कि आप अपनी सर्वर कॉन्फ़िगरेशन को गड़बड़ न करें, यह सही काम करेगा।

तुम सच में जारी रखना चाहते हैं, तो मांग लोडिंग पर पहले देखो Ensure, या Ajile या Dojo, या JSAN तरह जावास्क्रिप्ट लाइब्रेरियों। कम से कम, आप पहिया reinventing नहीं कर रहे हैं।

अभी भी इसे स्वयं करना चाहते हैं? आप या तो contacts.js ऐसा कुछ कर सकते हैं, या यह जांचने के लिए एक चर का उपयोग करें कि आपने इसे किया है या नहीं। contacts.js उस में कुछ इस तरह है:

function ContactsLoaded(){...} 

आप कर सकते हैं:

if(typeof ContactsLoaded=='undefined')$.getScript('contacts.js'); 

वैकल्पिक रूप से, आप इसे अपने आप को स्थापित करने और एक लोडर समारोह बना सकते हैं:

function getScriptOnce(f){ 
    var a=getScriptOnce; 
    if(typeof a[f]=='undefined')$.getScript(f); 
    a[f]=true; 
} 

Answer 3

उपयोग require.js

Answer 4

मेरी स्थिति अलग थी। मैंने jquery का उपयोग कर एक div में सामग्री लोड करने के लिए एक मेनू का उपयोग किया। हेडर सेक्शन में मौजूद होने से बहुत सी स्क्रिप्ट को रोकने के लिए, मैंने फ़ाइल को लोड करने के लिए .getscript का उपयोग केवल तभी किया था जब वह लिंक कहा गया था। डुप्लिकेट को रोकने के लिए यहां आया समाधान:

सबसे पहले मैं एक फ़ंक्शन बनाता हूं जो स्क्रिप्ट को लोड करने के लिए ज़िम्मेदार था। यह मेरी साइट पर global.js फ़ाइल और global.js फ़ाइल के भाग कठिन हैडर में कोडित है है:

var loadedScripts=new Array(); 

function loadScriptFiles(scriptArray){ 

    if($.isArray(scriptArray)){ 
     $.each(scriptArray, function(intIndex, objValue){ 
      if($.inArray(objValue, loadedScripts) < 0){ 
       $.getScript(objValue, function(){ 
        loadedScripts.push(objValue); 
       }); 
      } 
     }); 
    } 
    else{ 
      if($.inArray(script, loadedScripts) < 0){ 
       $.getScript(script, function(){ 
        loadedScripts.push(objValue); 
       }); 
      } 





    } 
} 

इस भार के दो प्रकार के, या तो एक सरणी, या एक ही स्क्रिप्ट मूल्य लेता है। यदि यह एक सरणी है, तो यह प्रत्येक तत्व के माध्यम से loops और इसे लोड करता है। यदि यह एक सरणी नहीं है, तो यह सिर्फ एक फ़ाइल लोड करेगा। आप उस भाग को एक मिनट में देखेंगे।

महत्वपूर्ण भाग: देखें कि मैंने वैश्विक क्षेत्र (फ़ंक्शन के बाहर) में एक सरणी बनाई है जिसे लोडडैंक कहा जाता है। चूंकि यह global.js फ़ाइल का हिस्सा है, यह कभी भी पुनः लोड नहीं होता है और इसे कहीं से भी बुलाया जा सकता है।

if($.inArray(objValue, loadedScripts) < 0){ 

jQuery inarray फ़ंक्शन क्योंकि -1 यदि मान नहीं मिला है, मैं केवल तभी जारी रखें: लेकिन हमारे प्रयोजनों के लिए, मैं बस अगर स्क्रिप्ट नाम को लोड किए जाने का उपयोग कर सरणी में पहले से ही है देखने के लिए जाँच मान 0 से कम है।कुछ और मतलब है कि मान सरणी में है।

यहां बताया गया है कि आप फ़ंक्शन को कैसे उपयोग करते हैं। इस कोड को कहीं भी रखें (मैं इसे शीर्ष पर रखता हूं) गतिशील पृष्ठ के जिसे प्ले में बुलाया जाएगा।

<script type="text/javascript"> 
    var scriptArray=new Array(); 
    scriptArray[0]="[REPLACE THIS WITH THE PATH TO THE JS FILE]"; 
    scriptArray[1]="[REPLACE THIS WITH THE PATH TO THE JS FILE]"; 
    loadScriptFiles(scriptArray); 
</script> 

अगर ठीक से किया है, आप इसे केवल एक बार लोड हो जाता है पर ध्यान देंगे।

Answer 5

मैंने plugin बनाया है जो लगभग वही करता है जो आप चाहते हैं: $.getScriptOnce()।

यदि आप एक ही स्क्रिप्ट को दो बार या अधिक लोड करने का प्रयास करते हैं तो यह स्क्रिप्ट लोड नहीं करेगा और झूठी वापसी नहीं करेगा।

लेकिन मूल रूप से, यह $.getScript()

(function($) { 
    $.getScriptOnce = function(url, successhandler) { 
     if ($.getScriptOnce.loaded.indexOf(url) === -1) { 
      $.getScriptOnce.loaded.push(url); 
      if (successhandler === undefined) { 
       return $.getScript(url); 
      } else { 
       return $.getScript(url, function(script, textStatus, jqXHR) { 
        successhandler(script, textStatus, jqXHR); 
       }); 
      } 
     } else { 
      return false; 
     } 

    }; 

    $.getScriptOnce.loaded = []; 

}(jQuery)); 

के इस वैकल्पिक समारोह को परिभाषित करता है और फिर बस फोन $.getScriptOnce('yourFile.js')

Answer 6

मैं भी इस तरह के समारोह में लिखा था। आप फायरबग या क्रोम देव टूल्स में नेटवर्क टैब के साथ परीक्षण कर सकते हैं। यह सिर्फ एक ही फाइल को एक बार लोड करता है।

ध्यान दें कि पिछले के तुरंत बाद दूसरी बार डाउनलोड न करें, क्योंकि कॉलबैक कॉल करने के बाद फ़ाइल को लोड किया गया था, यानी, फाइल सफलतापूर्वक लोड होने के बाद।

var getScriptOnce = (function(url, callback) { 
 
    var scriptArray = []; //array of urls 
 
    return function (url, callback) { 
 
     //the global array doesn't have such url 
 
     if (scriptArray.indexOf(url) === -1){ 
 
      if (typeof callback === 'function') { 
 
       return $.getScript(url, function(script, textStatus, jqXHR) { 
 
        scriptArray.push(url); 
 
        callback(script, textStatus, jqXHR); 
 
       }); 
 
      } else { 
 
       return $.getScript(url, function(){ 
 
        scriptArray.push(url); 
 
       }); 
 
      } 
 
     } 
 
     //the file is already there, it does nothing 
 
     //to support as of jQuery 1.5 methods .done().fail() 
 
     else{ 
 
      return { 
 
       done: function() { 
 
        return { 
 
         fail: function() {} 
 
        }; 
 
       } 
 
      }; 
 
     } 
 
    } 
 
}()); 
 

 
/*#####################################################################*/ 
 
/*#####################################################################*/ 
 

 

 
//TEST - tries to load the same jQuery file twice 
 
var jQueryURL = "https://code.jquery.com/jquery-3.2.1.js"; 
 
console.log("Tries to load #1"); 
 
getScriptOnce(jQueryURL, function(){ 
 
    console.log("Loaded successfully #1") 
 
}); 
 

 
//waits 2 seconds and tries to load again 
 
window.setTimeout(function(){ 
 
    console.log("Tries to load #2"); 
 
    getScriptOnce(jQueryURL, function(){ 
 
    console.log("Loaded successfully #2"); 
 
    }); 
 
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>