RequireJS gestor de dependencias + JQuery

RequireJS es una herramienta de gestión de dependencias creada por James Burke, la cual ayuda a manejar los módulos, cargarlos en un orden correcto y combinarlos de forma fácil sin tener que realizar ningún cambio. A su vez, otorga una manera fácil de cargar código una vez cargada la página, permitiendo minimizar el tiempo de descarga.

Hecha la pequeña introducción vamos al ejemplo como utilizar requirejs con una versión propia de jquery y un archivo aparte.

La estrutcutra del proyecto es bien sencilla:

www/home.html

  • www/js
    • lib
      • jquery.Ejemplo.js
      • jquery-1.10.2.js
      • require.js
    • app
      • main.js
  • app.js

Lo unico que necesitamos en el html es simplemente la referencia a requirejs y a nuestra app.js

<script data-main="js/app" src="js/lib/require.js"></script>

El app.js es principalmente el archivo de configuración. Le vamos a decir donde están nuestros archivos con el baseURL, que tenga un delay de 200mseg y que cargue las 2 librerías: jquery y mi js de ejemplo. La forma de escribir es simple “jquery” es el module ID y “jquery-1.10.2” (siempre sin el .js) es el nombre físico del archivo.

requirejs.config({
    "baseUrl": "js/lib",
    waitSeconds: 200,
    "paths": {
      "app": "../app",
      "jquery": "jquery-1.10.2",
      "Ejemplo" : "jquery.Ejemplo"
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

Luego nos queda nuestro archivo de lógica, el main.js:

//En el define, pongo todos los módulos que cargue en app.js y los va a ir poniendo en el orden que los defina acá
define(["jquery", "Ejemplo"], function() {

//puedo escribir llamadas aqui....

});

Y por ultimo tenemos nuestro script (jquery.Ejemplo.js), en mi caso una pequeña función de fadein como para usar algo de jquery.

$( document.body ).click(function() {
  $( "div:hidden:first" ).fadeIn( "slow" );
});

requirejs

Como se ve, es muy simple agregar, modificar el orden de carga o quitar archivos para tener un mejor mantenimiento de nuestro proyecto. Dejo el ejemplo como para dar el puntapié inicial.
Saludos

LINK:
GoogleDrive