Agregar Librerías de Javascript dinámicamente

[Urdaris_Nox]

Buenas a todos.

Advierto, de antemano, que soy un iniciado en este mundo. Escucharé cuanto digais y lo agradeceré.

He estado durante un par de horas buscando información acerca de lo que el título indica. Básicamente, tengo un sitio web con diferentes librerias y módulos, por lo que es necesario una función con la que se puedan cargar librerías, comprobando previamente si ya han sido cargadas.

Para esto, pensé que debía de haber alguna forma de recurrir al Header y obtener el listado de librerias cargadas, pero no he encontrado nada a este respecto.

Finalmente, decidí hacer la función por mí mismo. Es esto:

Código:

<script type="text/javascript">
var listaLibrerias = new Array ();

function cargaLibreria (nombre) {
	var cargadaConAnterioridad = false;
	var txt;
	
	for (i=0;i<listaLibrerias.length;i++){
		if(listaLibrerias[i] == nombre) {
			txt = "cargada anteriormente la libreria" + nombre + "<br />";
			cargadaConAnterioridad = true;
		}		
	}
	
	if (cargadaConAnterioridad == false) {
		listaLibrerias[i] = nombre;
		
		var cabecera = document.getElementsByTagName("head")[0];
		var nuevoScript = document.createElement('script');
		nuevoScript.type = 'text/javascript';
		nuevoScript.src = nombre;
		
		cabecera.appendChild(nuevoScript);
		txt = "Se ha cargado la libreria" + nombre + "<br />";
	}
	
	document.getElementById("info").innerHTML= document.getElementById("info").innerHTML + txt;
}
</script>

Me gustaría saber vuestra opinión, ya que en páginas como:
http://www.ejeliot.com/blog/109
http://www.cristalab.com/tutoriales/carga-dinamica-de-librerias-javascript-con-librarymanager-c66186l/

... presentan soluciones más complejas, a mi parecer.

Gracias por todo, y un saludo.

[ryugen]

yo suelo usar esta función, que permite agregar una funcion cuando se cargue correctamente

Código Javascript:

function loadScript(url, callback) {
    var script = document.createElement("script")
    script.type = "text/javascript";
    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
 

[Urdaris_Nox]

Iniciado por ryugen

yo suelo usar esta función, que permite agregar una funcion cuando se cargue correctamente

Código Javascript:

function loadScript(url, callback) {
    var script = document.createElement("script")
    script.type = "text/javascript";
    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
 

¿Pero esa función solventa el problema de librerias cargadas repetidamente?
No veo en el código que me dices control de las librerias ya cargadas.

[_cronos2]

Existen varios loaders asíncronos de scripts, por ejemplo yepnope, que es bastante rápido y ligero.
Saludos (:

[Urdaris_Nox]

Trabajando con esto y utilizando una función como la comentada por ryugen, cargo librerias JS.

El problema con el que me encuentro ahora es que...
Al utilizar una función dentro de la libreria cargada con otra función, no se ejecuta.

Tras indagar, he visto que lo que sucede es que el navegador carga las librerias primero, y luego ejecuta funciones. Por lo tanto, si cargo una libreria con una funcion esta se carga después. Y por tanto si quiero acceder a una función dentro de una de esas librerias, me aparecerá un error.

Por eso es necesario hacer los "callback", pero la información que he encontrado es confusa.

¿Si quisiera utilizar la función "BLABLA" dentro de una librería que cargo con una función, como la llamaría? o dicho de otra forma como implemento el callback para esas funciones.

También he pensado que podría utilizarse un timeOut para que el navegador esperara antes de llamar a esa función, pero no sé si es incorrecto, ya que en el momento en que lee el código pese a que tiene que esperar, al leer el nombre de la función no sabe qué es.

En fin, gracias y un saludo.

[_cronos2]

Tienes que esperar el evento onload del script, si no el contenido todavía no habrá sido cargado.
Saludos.

[ryugen]

Si en lugar de utilizar el evento document ready para utilzar tus funciones ahora tienes que manejarte en los script loads o los callbacks del loader de script.

para el tema de librerias ya cargadas, yo utlizaría metodos nativos para comprobar si se cargaron.

Por ejemplo en jquery:

Código Javascript:

if(jQuery){
     //jQuery ha sido correctamente cargada
     if (jQuery.ui) {
             //jQuery UI cargada correctamente
     }
}
 

[Urdaris_Nox]

Gracias por ayudarme, señores.

Lo del Onload plantea un problema, y es que si la página es producto de un conjunto de archivos, que se combinan según las opciones del usuario, puede darse el caso de varios Onloads en la página y según tengo entendido sólo se carga un Onload (el último que el navegador encuentra).

En caso de que sepamos qué funciones poner en el Onload no hay problema, pero si esto depende de las opciones habría que buscar otra forma, ¿cierto?

Respecto las librerías ya cargadas, Ryugen, no estoy seguro de entenderte (aunque creo que sé por donde vas).

Por ejemplo, imaginemos que tengo la libreria "soyUnaLibreria.js". En esta libreria tengo el código:

Código:

//Codigo de la libreria soyUnaLibreria.js

function superF () {
 return "Esto es lo que devuelve la superF";
}

¿Para saber si se ha cargado, deberia hacer...

Código:

if (superF){
 alert("Se ha cargado superF!!!");
} else {
 alert("Oh no, no se ha cargado superF");
}

?

Gracias de nuevo.

[ryugen]

En primer medida, si, podrías chequear la existencia de una libreria asi.

Sobre el tema de onload yo me estoy refiriendo al onload de los SCRIPTS y no del DOCUMENT, asi que cada uno va a tener el suyo.

Por otra parte framework como jquery permiten mas de una funcion bindeada al elemento onload y se ejecutan en orden.

Pero suponiendo que no uses jquery y aun asi quieres lograr eso, yo lo que haria es definir un arreglo GLOBAL al cual le voy agregando funciones

Código Javascript:

var arrFn = [];
//.. mas adelante
function funcionAgregada1() { };
arrFn[arrFn.length] = funcionAgregada1;
 
//.. mas adelante
function funcionAgregada2() { };
arrFn[arrFn.length] = funcionAgregada2;
 
//finalmente
document.onload = function(){
            for ( var i = 0; i < arrFn.length; i = i + 1){
                        arrFn[i]();
            }
}
 

[_cronos2]

Iniciado por ryugen

Por otra parte framework como jquery permiten mas de una funcion bindeada al elemento onload y se ejecutan en orden.

Por otra parte framework como jquery el DOM permite más de una función bindeada al elemento onload y se ejecutan en orden.
jQuery lo puede hacer porque con DOM se puede hacer, no es un invento de jQuery.

[Urdaris_Nox]

El concepto de DOM es algo a lo que todavía estoy dando forma y definición.

Cuando hablamos de bindear (enlazar) una función tras otra en el Onload supongo que os estais refiriendo a esto:

Código:

<body onload="superF_1(); superF_2()">

o bien...

Código:

<script>
window.onload="superF_1(); superF_2()";
</script>

Esto por sí sólo no solventaría el problema de tener que cargar diferentes funciones desde diferentes partes de una página, pero si hago un array como el que indicas, Ryugen, puedo añadir al final de la página un onload cargando el array si contiene información.

He usado algo de JQuery, pero todavía estoy lejos de comprender sus códigos y prefiero evitarlos en la medida de lo posible. Me gusta entender lo que hago :)

Con esto creo que puedo ir avanzando. Gracias y nos vemos :)

[ryugen]

cronos se referia a esto para agregar más de una funcion al evento load

Código Javascript:

window.addEventListener("load",superF_1);
window.addEventListener("load",superF_2);
 

Agregará dos funciones al evento load y las ejecutará en el orden que se agregaron