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.

Muy buenas, ya me las guarde. Con esto y un par de controles de eventos puede salir algo interesante.

Saludos!

Muy buenas,

Las funciones son buenas… la única problemática que tienen es cuando el usuario usa Safari… este no carga ni los JS ni los CSS añadido por DOM. Scriptaculous resuelve el problema usando document.write. Es menos elegante pero más compatible .-)

Aunque no te habrás dado cuenta, tu ImportJS() puede usarse (de hecho llevo años usándolo así) para realizar una llamada al servidor y solicitarle datos de forma dinámica.

Los parametros se pasan en la URL y el resultado sería JS válido (como JSON), por otra parte fácil de comprobar (filosofía REST).

Ya mucho antes de que a “alguien” le diese por bautizarlo como Ajax, se llamaba Remote Scripting.

Estas funciones se parecen mucho a una que ya expusiste http://www.anieto2k.com/2007/02/06/cargar-el-javascript-que-queremos-cuando-queremos/ y que con una ligera modificación las he usado para cargar CSS. El único problema es cuando he cargado dos scripts en los cuales el segundo tenía que usar funciones del primero al ser cargado (fue con Prototype Window Class). Si el servidor tarda en responder puede dar un error la carga del segundo script.

pues yo antes de correr la funcion de arriba en mi web, primero cargo el js en un iframe y luego lo inserto con createElement(”script”), me carga mejor con el iexplorer asi.

Este sistema se me ocurrió en mi desarrollo inicial del Sistema Operativo basado en JavaScript, para cargar los diferentes “programas” (archivos JS).

Lo que pasa es que uso de Core Mootools, y me quedó algo como esto:
——————————
var script = new Element(’script’);
script.setProperties({
src: fuente,
id: jsid,
type: “text/javascript”
}).injectAfter(’scriptMootools’);

Ho thanks a lot for the link to my website !

I’ve an another way to proceed, with compression !

http://www.webinventif.fr/wiki/tutoriels/javascript/cjo_css_and_javascript_optimizer

;)

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.


Cerrar
Enviar por Correo