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. :)
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminar