Compreso dinamicamente jQuery utilizzando JavaScript se non è già presente

Question

Sto scrivendo un piccolo strumento JavaScript per me stesso che ho intenzione di rendere disponibile ad altre persone e utilizza jQuery. Il mio sogno per questa piccola utility è che le persone siano in grado di includere un singolo file .js da una fonte remota e, quando questo file viene caricato, controllarlo per vedere se jQuery è già stato incluso e, in caso affermativo, accertarsi che sia una versione abbastanza recente in modo da essere compatibile con ciò che il mio codice deve fare. Alcuni pseudo che può spiegare il mio problema più chiaramente (questo codice visualizzato nella parte superiore del singolo .js file già detto in precedenza):

if jQuery is loaded { 
    if version is less than (say) 1.3 { 
     // load latest version of jQuery 
    } 
} else { 
    // load latest version of jQuery 
} 

// and do the jQuery.noConflict() 
// dance to avoid trampling any other libraries, etc. that the 
// user may be utilizing. 

// The rest of my code lives here, happy in the knowledge that it's running in 
// isolation from the rest of the JS that the page knows about. 

La mia domanda, distillata in tre parti amichevoli:

1. E` è possibile caricare due versioni separate di jQuery senza che queste si scontrino l'una sull'altra?
2. Posso interrompere l'esecuzione del mio codice JS mentre jQuery è caricato, quindi procedere?
3. È possibile utilizzare noConflict() come lo sto descrivendo? O dovrei semplicemente chiamare tutto usando jQuery() e non dargli fastidio?

L'idea generale è che qualsiasi vecchio utente potrebbe afferrare un piccolo frammento di codice HTML e rilasciarlo nel loro sito/blog/qualunque cosa e farlo solo di lavoro ™. E poiché molte piattaforme di pubblicazione moderne ora vengono fornite con jQuery, non posso semplicemente ipotizzare che non sia in esecuzione e includerlo.

Grazie per il vostro tempo, e per favore fatemi sapere se una parte di questo non è chiaro o se posso fornire ulteriore contesto/dettaglio per rendere più facile la vostra risposta.

Answer 1

function doMyStuff(jQueryJustForThisFn) { 
    // do jQuery stuff! 
    jQueryJustForThisFn('div').addClass('wow'); 
} 

function check() { 
    return window.jQuery && jQuery.fn && /^1\.[3-9]/.test(jQuery.fn.jquery); 
} 

if (check()) { 

    doMyStuff(jQuery); 

} else { 

    var script = document.createElement('script'), 

     timer = setInterval(function(){ 
      if (check()) { 
       clearInterval(timer); 
       document.body.removeChild(script); 
       doMyStuff(jQuery.noConflict(true)); 
      } 
     }, 30); 

    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'; 

    document.body.insertBefore(script, document.body.firstChild); 

} 

Answer 2

non so molto circa la noConflict, quindi posso solo rispondere per lo più 2.

Questo è di solito chiamato lazy loading. Vedere my answer su una questione analoga per fare questo

Answer 3

Non ho provato a vedere come si comporta con una versione più bassa già caricato, ma si consiglia di controllare google.load

http://code.google.com/apis/ajaxlibs/documentation/#googleDotLoad

Answer 4

Per sicurezza assoluta, potresti prendere in considerazione il namespacing della versione di jQuery che stai utilizzando. È un po 'brutto, ma una regex contro il codebase per definire il tuo punto di attacco globale ti assicurerà di non rompere nulla. Se il codice verrà ampiamente distribuito su una varietà di siti, questa sarà la scelta migliore e la maggior parte assicurerà la futura compatibilità.

Answer 5

(function(){ 

    var myBkl = { 
      jq: null, 
      loadScript: function(src) { 
        if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){ 
          return; 
        } 
        var s = document.createElement('script'); 
        s.setAttribute('src', src); 
        s.setAttribute('type', 'text/javascript'); 
        document.getElementsByTagName('head')[0].appendChild(s); 
      }, 
      whenLoaded: function(callback){ 
        if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') { 
          myBkl.jq = window.jQuery.noConflict(true); 
          callback(myBkl.jq); 
        } 
        else { 
          setTimeout((function() {myBkl.whenLoaded(callback); }),  
100); 
        } 
      }, 
      init: function($){ 
        console.log($.fn.jquery); 
        console.log(window.jQuery.fn.jquery); 
      } 
    }; 
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'); 
    myBkl.whenLoaded(myBkl.init); 
})(); 

Answer 6

Questa domanda è stato risposto here

jQueryCode = function(){ 
    // your jQuery code 
} 

if(window.jQuery) jQueryCode(); 
else{ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; 
    document.head.appendChild(script); 

    script.onload = jQueryCode; 
}