Contenido

ImportJS e ImporCSS, dos funciones imprescindibles

23 may

+ 9

Via Digg descubro estas dos funciones javascript que nos pueden sacar de más de un aprieto.

ImportJS() 

La primera ImportJS() se encarga de añadir un fichero javascript pasado por parámetro (la url) y este se encarga de añadirlo a nuestro DOM lo que origina que este fichero esté disponible en nuestra aplicación.

Esta función es ideal para proyectos que quieren minimizar el tamaño de la página completa cargado haciendo que el contenido del JS se cargue selectivamente dependiendo de la opción seleccionada.

function ImportJS() {
	var nbr_att = arguments.length;
	var js_effets=document.createElement("script");
	js_effets.setAttribute("type", "text/javascript");
	js_effets.setAttribute("src", arguments[0]);
	if(nbr_att>1){
		for (var i = 1; i<nbr_att; i++){
			js_effets.setAttribute(arguments[i][0], arguments[i][1]);
		}
	}
	document.getElementsByTagName("head")[0].appendChild(js_effets);
}
//Ejemplo de uso genérico
ImportJS("menu.js"); 

Como podemos ver se trata de una función elegante que crea el elemento <script /> y lo añade en el interior de nuestro <head /> permitiendonos usar las funcionalidades deseadas en nuestra aplicación. 

ImportCSS()

Esta función es la versión análoga a la anterior pero orientado a los estilos CSS, se encarga de añadirnos un fichero CSS pasado por parámetro y este será añadido al mismo tag <head /< cambiandonos el diseño al instante en el que termine de cargar, esto puede ser ideal para cambiar el diseño de nuestra aplicación más fácilmente y ahorrarnos ciertos estilos que podemos cargar posteriormente.

function ImportCSS() {
	var nbr_att = arguments.length;
	var css_style=document.createElement("link");
	css_style.setAttribute("rel", "stylesheet");
	css_style.setAttribute("type", "text/css");
	css_style.setAttribute("href", arguments[0]);
	css_style.setAttribute("media", "screen");
	if(nbr_att>1){
		for (var i = 1; i<nbr_att; i++){
			css_style.setAttribute(arguments[i][0], arguments[i][1]);
		}
	}
	document.getElementsByTagName("head")[0].appendChild(css_style);
}
//Ejemplo genérico
ImportCSS("fichero.css");
//Ejemplo con media type
ImportCSS("fichero.css",{"media":"print"});

Como podemos ver podemos pasar por parámetro atributos, en este caso indicamos que estas CSS afecten solo al media:print, osea para la impresora.

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.