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. :)
