Cuando trabajamos con archivos js, a menudo nos encontramos con que no disponemos de una función nativa para incluir otros ficheros.
Para emular los includes de tantos otros lenguajes de programación, disponemos de una fantástica librería creada por Andy Chung: REQUIRE.JS
Su uso es muy sencillo y además de permitirnos incluir otros archivos, ofrece la posibilidad de asociar eventos a los mismos. Veamos cómo utilizarlo de manera eficiente:
Para descargar REQUIRE.JS, tenemos que entrar aquí. Desde ahí, podemos elegir la librería como archivo único, con plugins o bien una compilación de jQuery especial con REQUIRE ya integrado.
Una vez descargado, necesitamos que en nuestro proyecto, todos los archivos js que vamos a manejar, se encuentren en la misma ruta. Un ejemplo de filesystem válido, sería el siguiente:
- project-directory/
- project.html
- scripts/
- main.js
- helper/
- util.js
El archivo main.js será el que tomaremos como configurador y desde el que insertaremos todos los scripts correspondientes. Una vez comprobado que nuestra estructura es la correcta, copiamos el archivo REQUIRE.JS dentro de la carpeta junto al resto de scripts.
- project-directory/
- project.html
- scripts/
- main.js
- require.js
- helper/
- util.js
Para poder utilizar sus métodos, solo queda llamarlo desde el <head> de nuestra página:
<script data-main="main" src="scripts/require.js"></script> |
El atributo data-main indica que el archivo main.js se leerá únicamente cuando require.js haya sido cargado completamente.
Lo tenemos todo preparado. Ahora la magia se cocinará desde el main.js:
Para incluir un archivo, solo necesitamos añadir el siguiente código:
require(["helper/util"]); |
El primer parámetro es un array con la lista de archivos que queremos incluir; en caso de que fueran varios, la sintaxis sería:
require(["some/module", "a.js", "b.js"]) // Etc... |
Si además queremos aplicar un callback, tan solo tenemos que proporcionar un segundo parámetro:
require(["helper/util"], function() { require.ready(function() { // Esta función se ejecuta cuando la página ha sido // cargada (evento DOMContentLoaded) y todos los // archivos requeridos han sido cargados. }); }); |
La librería cuenta además con un API muy completo que permite definir patrones, módulos, dependencias, el orden de carga de los scripts, etc…
También poseemos variables de configuración con las que podemos definir el path general, un tiempo de espera entre scripts o la prioridad de ejecución entre otros parámetros.
Sin duda, una interesante librería que nos ayudará a organizar nuestros códigos de una manera más eficiente.
Direcciones de interés:
Página Oficial: http://requirejs.org/
Descarga: http://requirejs.org/docs/download.html
Documentación: http://requirejs.org/docs/api.html
Excelente post gracias!
¡Gracias por la explicación!