Iniciar con RequireJS
Para trabajar con RequireJS solo necesitamos descargar la última versión e incluirla en una etiqueta <script>.Note el atributo data-main incluido en la etiqueta, indica cuál será el primer archivo JavaScript que será cargado. En este ejemplo es main.js, además note que no es necesario incluir la extención del archivo, RequireJS la agregará automáticamante. Si cargamos la página html ahora en Google Chrome, este es el resultado.
Se a cargado el archivo main.js al añadir una referencia en el <head>. Así es como se cargarán todos los módulos.
Definir módulos
La definición de los módulos se realiza mediante la función define(), que toma dos parámetros. El primero es una lista de dependencias y el segundo es una función anónima que será llamada cuando todas las dependencias sean satisfechas. Más rápido con un ejemplo:// a.js
define(['b'], function(ModB) {
return "ModB: " + ModB.getMessage();
});
En la lista de dependencias hacemos referencia a un modulo b, que al ser cargado será asignado a una variable llamada ModB. ModB a su vez es un objeto que contiene un método llamado getMessage(). Así es como lo definimos:// b.js
define([], function() {
return {
getMessage: function() {
return "Hello World!!";
}
};
});
¡Listo! Tenemos dos módulos definidos con todo y dependencias. Además fíjese que mientras que en el primer módulo retornamos únicamente una cadena, en el segundo retornamos un objeto.Requiriendo módulos
Hasta ahora hemos mantenido nuestro archivo main.js en blanco. Es hora de darle un soplo de vida. Supongamos pues, que nuestra aplicación necesitará del módulo a para funcionar y, a su vez, el módulo a necesitará el módulo b. Para ello utilizarmos la función require() que es muy similar a define().// main.js
require(['a'], function(ModA) {
console.log(ModA);
});
Al abrir nuestro archivo index.html y ver en la consola deberá aparecer el mensaje ModB: Hello World!!
Conclusión
RequireJS es una excelente librería a la hora de organizar grandes cantidades de código, es imprescindible en los proyectos grandes. Sin embargo, también agrega más complicaciones a la hora de trabajar con otras librerías como jQuery, Mustache, Backbone, etc. En los siguientes días estaré publicando como combinar de RequireJS, Backbone y jQuery.
No hay comentarios:
Publicar un comentario