Include en Javascript

Hace un tiempo ya habia publicado un script que incluia archivos javascript y css mediante el DOM, y ahora debido a un proyecto que realize la simplifique un poco, al fin y al cabo lo que se busca es la simplicidad.

La función es la siguiente:

function include(file,opt){
if(file==“”) return;
//Genera una id para el archivo con el fin de evitar que se cargue 2 veces.
idfile = file.replace(location.hostname,“”);
idfile = idfile.replace(location.protocol,“”);
idfile = idfile.replace(“//”,“”);
if(document.getElementById(idfile)){ return };
if(typeof opt==“undefined”) opt = {};
if(typeof opt.cache==“undefined”) opt.cache = true;
if(typeof opt.dom==“undefined”) opt.dom = false;
if(typeof opt.type==“undefined”) opt.type = “”;
ext = (opt.type!=“”) ? opt.type : file.substring(file.lastIndexOf(‘.’)+1);
if(!opt.cache){
var random = new Date().getTime().toString();
if(file.indexOf(“?”)!=-1) file = file+“&”+random;
else file = file+“?”+random;
}
if(opt.dom){
var head = document.getElementsByTagName(‘head’).item(0)
}
switch(ext){
case “css”:
if(!opt.dom)
document.write(‘<link rel="stylesheet" href="’+file+‘" id="’+idfile+‘" type="text/css"><\/link>’);
else{
css = document.createElement(‘link’);
css.rel = ’stylesheet’;
css.href = file;
css.type = ‘text/css’;
css.id = idfile;
head.appendChild(css);
}
break;
case “js”:
if(!opt.dom){
document.write(‘<script type="text/javascript" id="’+idfile+‘" src="’+file+‘"><\/script>’);
}
else{
script = document.createElement(’script’);
script.src = file;
script.type = ‘text/javascript’;
script.id = idfile;
head.appendChild(script);
if(typeof opt.oncomplete!=“undefined”){
//Para IE
script.onreadystatechange = function () {if (script.readyState == ‘complete’) {if(typeof opt.oncomplete == “function”) {eval(opt.oncomplete());}}}
//Para Firefox
script.onload = function () {if(typeof opt.oncomplete == “function”) {opt.oncomplete();}}
}
}
break;
}
}

Sintaxis:

include(file [,opt]);

Ej: include(”path/to/archive”);

Parámetros opcionales

cache: true | false - Si se especifica false se le añade al final del archivo un numero aleatorio para que no se guarde cache en el navegador
dom: true | false - Si se especifica true el archivo se cargará creando un nuevo elemento script o link en el DOM, si es false el archivo se cargará con un document.write
type: js | css - este parámetro solo es necesario si el archivo a cargar tiene una extensión diferente a js o css por ej un archivo .php
onload: funcion - en el caso de que se cargue un archivo js via DOM es posible especificar una acción al finalizar la carga del archivo.

Su uso es muy sencillo unicamente llamamos a la función pasandole como parametro el archivo que deseamos cambiar. La función include se encargará de identificar si se trata de un archivo JS o CSS y realizará la carga.

La función carga los archivos utilizando el document.write como metodo predeterminado esto es ideal para proyectos en los que puede ir variando los archivos a utilizar.Ejemplo

En ves de esto:

<script src=“/path/to/js.js”></script>
<script src=“/path/to/js.js”></script>
<script src=“/path/to/js.js”></script>
<script src=“/path/to/js.js”></script>
<script src=“/path/to/js.js”></script>
<script src=“/path/to/js.js”></script>

podriamos tener esto:

<src=“/path/to/include.js”></script>
<script src=“/path/to/librerias.js”> </script>

y en librerias.js llamarias a los include

include(“/path/to/archivo1.js”);
include(“/path/to/archivo2.js”);
include(“/path/to/archivo3.css”);

De esta manera ya no tendriamos que modificar nuestro template para ir añadiendo los scripts si no que podemos definir un solo archivo en el cual incluyeramos los scripts.

Si no deseas cargar los archivos entre <head> y</head> puedes especificar que se cargue el archivo mediante DOM.

include(“/path/to/archivo2.js”,{dom:true});

En caso de que el archivo a cargar tenga una extensión diferente a js o css tendremos que especificar el tipo de archivo a cargar ejemplo:

include(“/path/to/archivo2.php”,{type:js,dom:true,cache:false});

Como ven es realmente sencillo el utilizar esta función y para algunos proyectos puede ser algo de mucha utilidad.

Descargar Include.js

Otros Enlaces Relacionados:

¿Te pareció interesante la nota?, registrate a nuestro Feed para que estes al dia con las últimas notas que publicamos en WebAdictos, tambien te invitamos a explorar nuestros archivos tal vez encuentres notas y recursos que te sean de utilidad.

Si lo prefieres puedes utilizar el botón de post aleatorio para ir saltando entre nuestros contenidos.
Gracias por visitarnos.

Visto 3015 veces, 4 el dia de hoy
Miercoles, 14 dAmerica/Chicago Noviembre dAmerica/Chicago 2007 a las 3:46 pm
Desarrollo, General, Javascript, Librerias, Programacion, Web | wong it!
Trackback

aldeamedia
Noviembre 21st, 20077:08 am

Interesante , incluyo un enlace a tu articulo en mi página.

Tutoriales de Photoshop, Illustrator, Ajax, CSS, Javascript
Diciembre 3rd, 200711:58 am

[...] Include en Javascript [...]

Guillermo
Abril 19th, 20089:36 am

hola me interesa usar esto, y definitivamente no te quiero faltar el respeto ni mucho menos quiero robar tu trabajo, asi que quiero saber que puedo hacer para usarlo ? … esta bajo alguna licencia ? … o solo será cuestión de darte lso créditos y poner un enlace a esta entrada quizas …

felicidades por el include que ha quedado de pm y espero tu respuesta ..

saludos.

dmedina
Abril 19th, 200810:22 am

Hola Guillermo puedes usarlo sin ningún problema. Lo de los créditos y el enlace no es obligación pero si esta en tus manos hacerlo adelante créeme que te lo agradeceré mucho