Los AMD loaders nos están dejando cargar casi cualquier cosa: módulos de AMD, archivos básicos de JavaScript (de cualquier origen), archivos de texto (plantillas HTML, por ejemplo), y más. Desafortunadamente la mayoría de los loaders no tienen capacidades para cargar archivos CSS, muy probablemente porque el evento "onLoad" no es soportado por todos los navegadores para hojas de estilo. Por suerte Kris Zyp ha creado Xstyle, un paquete de AMD a disposición de los loaders de AMD para una carga de hojas de estilo fiable. Vamos a echar un breve vistazo a Xstyle!
Para ser justos con Xstyle, es algo más que un plugin de AMD para cargar hojas de estilo. Xstyle proporciona la capacidad de:
- Calzar y extender archivos CSS
- Cargar hojas de estilo y ejecutar devoluciones de llamada
- Carga de @import anidada
Calzar y extender archivos CSS es una gran mejora, pero no parece ser algo que se vaya a necesitar a menudo; cargar CSS con módulos de Javascript es agradable porque:
- Cargar módulos y plantillas juntos pero necesitar añadir LINKS manualmente no mola nada.
- Un define () para definir un widget completo de JS, a la plantilla y el CSS, es lo ideal; especialmente para los componentes de terceros
Así que ten un cuenta un gran loader de JavaScript como puede ser curl.js. Con curl.js, todo lo que necesitas hacer para cargar un archivo CSS es:
curl(["css!path/to/file.css"], function() {
// mas cosas
});
Fácil, ¿no? Con un loader diferente, puedes cargar tus archivos CSS con otros módulos de codificación:
define(["xstyle!./path/to/file.css"], function(){
// el modulo comienza despues que el css se haya cargado
});
¡Excepcional! Con Xstyle podemos definir un componente completo, de estilo y todo!
Xstyle es capaz de mucho más de lo que yo he acabo de presentar, pero sólo la capacidad de cargar hojas de estilo con cada otra pieza de un módulo dado no tiene precio. Mejora la organización y la velocidad de codificación; bien hecho Kris!
Y este ha sido el artículo en el que trataba explicaros un poco el hoisting en Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!