Requests y Modularidad Flexible con Javascript y jQuery

Hace un buen tiempo que aplico esta técnica en los proyectos que desarrollo. En los inicios cuando no contaba con muchas herramientas propias siempre me liaba en cuanto a request vía ajax se refiere, y no por que algo de mi código andara mal si no por que de momento surgían cambios en las rutas a donde apuntaban mis requests.
En fin de ese tiempo a la fecha he cubierto dicho problema y estoy seguro que a mas de uno también debe estar ocurriendole algo parecido. Sin más paso a plantear el problema.


En el gráfico anterior podemos ver como diferentes ficheros javascript consumen un mismo recurso, una URL. Y esto es un caso real en muchos proyectos se suele reutilizar en diferentes contexto un recurso del servidor.
Imaginemos! que un día el sponsor, cambia de idea o tal vez nosotros nos damos cuenta de que el nombre de nuestro modulo debería cambiar o que queremos reutilizar el modulo en otro proyecto.
Entonces pasamos al acto de cambiar el nombre base de nuestro recurso de some/ a changed/ por ejemplo. Y de repente los ficheros que consumían ese recurso obtienen el status code 404.

Ahora vemos que si existe la necesidad que abstraer las rutas base de nuestros recursos a consumir, es por ello que dejo aquí una porción de código que hará que tengamos menos problemas en cuanto a modularidad con peticiones ajax se trata.

 Primero, definimos una variable global que podamos utilizar desde cualquier fichero javascript, en este caso a dicha variable la nombrare como SandBox y la ubicare en un el fichero main.js dentro de una estructura como esta:

Proyecto
 |- xxxxx
 |- static
 |-- |- css
  |- js
  |-- |- lib
   |-- |- jQuery.js
    |- jquery.getter.js
   |- core
   |-- |- Main.js // Declarar aqui el sandbox


Dentro de este fichero declaro la variable como sigue en el siguiente código:

window.SandBox = {
 'settings' : {
  'base' : '/reportes/',
 },
 'helpers' : {
  'do' : function() { /* funcion extra de ayuda */ },
  'do2' : function() { /* funcion extra de ayuda */ },
 }
};


Ahora toca crear el fichero jquery.getter.js, en el cual defino una funciona extra dentro de la variable jQuery. Si nos fijamos en el siguiente código, estamos creando una pequeña interfaz a la funcion $.get, de jQuery.


$.getter = function ( args ) {
 var params = args || {};
 params.params = params.params || '';
 // IMPORTANTE! definir un objeto literal SandBox 
 // en donde definamos el modulo a donde apuntan
 // nuestras peticiones por defecto.
 params.module = params.module || SandBox.settings['base'];
 $.get(params.module + params.url + params.params)
 .success(function(res){
  if ($.isFunction(params.success)) {params.success(res);}
  if ($.isFunction(params.complete)) {params.complete(res);}
 })
 .error(function(res){
  if ($.isFunction(params.error)) {params.error(res);}
 });
}

Por ultimo, una vez definido la variable global, definido la funcion extra pasamos a escribir código que cumpla procesos de negocio y cuando nos llegue el momento de hacer una petición ajax, con un verbo GET, entonces solo llamamos a nuestra funcion $.getter, asi:
$.getter({
 'url' : 'someurl.json',
 //'module' : 'module', // Solo si queremos improvisar 
      // cambiando el modulo a donde apunta
      // nuestra petición
 'params' : '?id=2&other=3',
 'success' : function(res) {
  //hacer algo con el reponse
 },
 'complete' : function(res) { // opcional
  //hacer algo con el response
 },
 'error' : function(err) { // opcional
  //hacer algo cuando nos da error
 }
});

Con esta funcion extra la ruta a donde apunta nuestra peticion seria algo como:

/reportes/someurl.json?id=2&other=3

Fin, en el futuro si queremos cambiar la ruta principal por ejemplo de /reportes/ a /productos/, sabemos que lo único que cambiaremos es en SandBox['settings']['base']

Gracias, dudas y consultas en los comentarios.  :)

1 comentario: