Dinámica Incluyendo jQuery usando JavaScript si no está presente

Question

Estoy escribiendo una pequeña herramienta de JavaScript para mí que planeo poner a disposición de otras personas y usa jQuery. Mi sueño para esta pequeña utilidad es que las personas puedan incluir un único archivo .js desde una fuente remota y, cuando se cargue ese archivo, verifiquen si jQuery ya se ha incluido y, si es así, asegúrese de que sea una versión lo suficientemente reciente como para ser compatible con lo que mi código necesita hacer. Algunos pseudocódigo que puede explicar mi problema con mayor claridad (este código aparecería en la parte superior de la fila de a uno .js he mencionado anteriormente):

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. 

Mi pregunta, destilada en tres partes amigables:

1. ¿Es es posible cargar dos versiones separadas de jQuery sin que se ataquen entre sí?
2. ¿Puedo detener la ejecución de mi código JS mientras se carga jQuery, y luego continuar?
3. ¿Es posible utilizar noConflict() como lo estoy describiendo? ¿O debería simplemente llamar a todo usando jQuery() y no molestarme con eso?

La idea general es que cualquier usuario de edad podía agarrar un pequeño fragmento de código HTML y colocarlo en su sitio/blog/lo que sea y hacer que sólo el trabajo ™. Y dado que muchas plataformas de publicación modernas ahora incluyen jQuery, no puedo simplemente suponer silenciosamente que no se está ejecutando e incluirlo.

Gracias por su tiempo, y por favor avíseme si alguna parte de esto no está clara o si puedo proporcionar un contexto/detalle adicional para facilitar su respuesta.

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

no sé mucho sobre el noConflict, así que sólo puedo responder sobre todo 2.

Esto generalmente se llama carga diferida. Ver my answer sobre una cuestión similar para hacer esto

Answer 3

No he probado para ver cómo se comporta con una versión inferior ya cargado, pero es posible que desee comprobar hacia fuera google.load

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

Answer 4

Para una seguridad absoluta, es posible que desee considerar el espacio de nombres de la versión de jQuery que está utilizando. Es un poco feo, pero una expresión regular en contra de la base de código para definir tu propio punto de conexión global te asegurará que no rompes nada. Si el código se implementará ampliamente en una variedad de sitios, esta será su mejor opción y la mayoría asegurará la compatibilidad futura.

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

Esta pregunta ha sido contestada 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; 
}