Contenido

Cargar el javascript que queremos cuando queremos

6 Feb

+ 24

Al desarrollar en Javascript nos encontramos con algunas limitaciones que nos hacen cargar nuestras páginas con cantidad de código que posiblemente no se termine de usar nunca, pero el lenguaje es muy potente y nos permite corregir estos problemas con funciones nativas, haciendo que nuestras aplicaciones sean lo ligeras que queramos que sean.

PHP dispone de una función muy interesante y que todos hemos usado alguna vez, include(). Que nos permite añadir un fichero .php a nuestro script en tiempo de ejecución, permitiendonos tener separadas las funcionalidades haciendo un código más manejable y fácil de mantener.

En javascript la ejecución se realiza en el cliente y el añadir ficheros externos es algo que nos puede ayudar a no hacer una carga inicial masiva, sinó a cargar el javascript que necesitamos en el momento en que lo requerimos. Esto es una gran utilidad que hay que usar con pinzas, ya que hemos de tener en cuenta el tiempo de carga del fichero desde nuestro servidor hasta el cliente.

Función include() en Javascript


function include(file_path){
	var j = document.createElement("script");
	j.type = "text/javascript";
	j.src = file_path;
	document.body.appendChild(j);
}		

De esta forma podemos realizar cargas condicionales, dependiendo de lo que queremos cargar y cuando lo queremos cargar.


if(cargar_ajax == true){
	include("ajax.js");
} else if (cargar_efectos == true) {
	include("efectos.js");
}

Como podemos ver estamos condicionando el fichero que hemos de cargar, y dentro de él tendremos la funcionalidad necesaria para el evento que hayamos desencadenado.

Function include_once() en Javascript

En PHP disponemos además de una función llamada include_once() que nos incluye el fichero si aún no ha sido incluido en el script. ¿Por que no disponer de ella en Javascript? 😀

function include_once(file_path){
	var sc = document.getElementsByTagName("script");
	for (var x in sc)
		if (sc[x].src != null && sc[x].src.indexOf(file_path) != -1) return;
	include(file_path);
}

De esta forma estamos comprobando todos los elementos <script></script> de la página en busca de el que queremos incluir, si este no está incluido procederá a incluirlo mediante la función include().

  • Joer andres que maravilla, me gusta la idea del include_once. En mootools tenemos una clase llamada Assets pero cuando los plugins se van juntando fijo que cosas malasa pueden pasar.

    Lo bueno de JS es que se sobreescriben las funciones y no da error como en PHP.

    Si me permites puede que le meta mano ;P.

  • #1 Claro hombre, lo que quieras 😀

  • Ciertamente, con mootool’s, es fácil, pero no siempre vas a cargar toda la clase para un archivo, no siempre hay que matar las moscas a cañonazos

  • yo la utilizo mucho esa funcion, pero es compicado cuando el archivo es grande [js], asi que primero lo precargo en un iframe, y luego lo paso por una funcion similar a la tuya, y ma va muy vien, dese una vuelta por mi web para que prueve, ademas de que se muestra un sencillo cuadro de carga del archivo.

  • Todo esto está muy bien, pero estoy desarrollando una aplicación que incluye ficheros js de esta forma, pero cuando quiero eliminarlos, no basta con eliminar la etiqueta, pues he comprobado que las funciones continuan disponibles, y por lo tanto borrar no ha servido de mucho.

    Agradecería que pudierais echar un cable.

  • #5 Pero eso es normal, en cuando cargas el fichero en memoria este está disponible hasta que recargas la página o creas una sesión nueva.

    Para borrar, podrías igualar todas las funciones y variables a null en el momento de borrar.

  • Hola anieto,
    Actualizé mi metodo JavaScript para que funcione correctamente en Opera también.

    //Su feed RSS assinado 🙂

  • porfavor sean más especificos al mandar una información para poder entender con claridad y rapides el contenido,gracias por el esfuerzo proporcionado…………………..

  • Hola queria decir si opera es mejor para java script?

    yo solo utilizo el navegador de internet explorer 6.0 del xp sp2

    no he actualizado a la version 7.0

    gracias

  • Exelente script, os felicito \m/

  • Me quedo con el ‘include’ normal que trae php o jsp(Aun mejor include_once de php), sencillamente… no veo la necesidad de esta función…una complicación extra que no aporta fines prácticos.

    Es mucho mejor crear funciones o prototipos catalogados por funcionalidad y separarlos…Luego sencillamente agrego el que necesito (Pero desde el servidor). Claro, esto no encaja en las posibilidades de quienes usan framework o librerías creadas por terceros.

    Si embargo, es bonito…sería aun mejor cuando Javascript se compile del lado del servidor, esto posible en un año o dos.

    ImZyos!: Tu comentario(no siempre hay que matar las moscas a cañonazos). Soy una persona de mente ilustrativa y no soy hispano… jejeje, que cuadro!

    Un saludo, y agradecimiento por todos los aportes.

  • Por cierto, muy Completo el Blog Andres.

  • Hay les va una PREGUNTA BUENISIMA!
    Haber quien la resuelve:
    ¿Cómo se puede eliminar una librería javascript en caso de que exista y volverla a cargar con una funcion de tipo:

    Sí existe, eliminarla y volverla a cargar!

    ???

    Se los dejo de tarea!!! =P

  • Hola.

    Una question:

    Yo tengo un php en el servidor, y lo que quiero es llamarlo dentro de una etiqueta script dentro de la pagina.

    1 Pregunto: la salida del php debe ser del tipo document.write() o puedo devolver directamente el html sin el document.write

    2. como se incluye el .php dentro de una etiqueta script

  • @hely: El PHP lo único que va a poder hacer es pintar HTML. Ten en cuenta que PHP es un lenguaje que se ejecuta en el servidor y no en el cliente (como HTML).

  • Buenas,

    Yo tengo una duda, que no se si sabran contestar, aun estoy trabajando sobre esto … pero realmente me gustaria saber si de algun modo se puede «borrar» del todo una funcion ya importada … lo digo porque desde ANDROID estoy teniendo problemas a la hora de importar el JS, cuando lo hago 2 veces, deja de hacerlo … es como si dijera «para que tanto?». intente lo de poner las variables a null pero no parece funcionar.

    gracias gente, un trabajo buenisomo 😉

  • @Gatillo: Has probado con delete??. Te permitirá borrar lo que necesites.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.