Tengo todo un código javascript auxiliado en la librería jquery, funciona bien en la manera cómo está escrito (de hecho la aplicación está en producción) y no es tan extenso a decir verdad, pero haciendo un repazo del mismo me doy cuenta que el código en sí es básicamente toda una asociación de eventos a elementos html (identificados por su id o clase) que funcionan como botones o diálogos modals, y dan la posibilidad un tanto de reutilización por descirlo de alguna manera, ejecutando peticiones AJAX que me garantizan la carga asíncrona de prácticamente todo el contenido de las vistas.
Toda el código está escrito dentro de un único bloque $(document).ready(function{});
he visto códigos de páginas o aplicaciones que implementan todo el código javascript en el fichero correspondiente, y luego dentro del html de la página hacen un App.init();
y como que todo está corriendo.
Qué conceptos debo estudiar y aplicar para tener un código más modularizado si se pudiera expresar de esta manera?? estoy algo perdido en este tema. ya se que tal vez sea una pregunta basada en opiniones.
Este es parte de mi código, el resto de los eventos están escritos de manera similar.
$(document).ready(function() {
var _HOMEPAGE = Routing.generate('app_homepage');
var elMenuPrincipalUsuarios = $('#menuPrincipalUsuarios');
if (elMenuPrincipalUsuarios !== null) {
$(elMenuPrincipalUsuarios).on('click', function(e) {
e.preventDefault();
});
}
$('#vistas').on('click', '#lnkRecargaRegistros', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
dataType: 'html',
type: 'GET',
url: url,
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$('#tablaDatos tbody').html(data);
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
/**
* Retorna a la vista principal del nodo seleccionado
* **/
$('#vistas').on('click', '#lnkAtras', function(e) {
e.preventDefault();
var arbol = $('#arbol').jstree(true);
if (arbol) {
var nodoSeleccionado = arbol.get_selected(true)[0];
if (nodoSeleccionado) {
cargarVistaCentral(nodoSeleccionado);
} else {
e.preventDefault();
}
}
});
/**
* Muestra ventana de impresion del navegador, lista para imprimir el contenido
* del area de impresion.
* **/
$('#vistas').on('click', '#lnkImprimir', function(e) {
e.preventDefault();
var areaImprimir = $('#vistas').find('#areaImprimible');
if (areaImprimir) {
$(areaImprimir).print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
iframe: true,
append: null,
prepend: null,
noPrintSelector: ".noprint",
deferred: $.Deferred(),
timeout: 750
});
}
});
/**
* Carga cualquier recurso indicado
* Asociada a etiquetas <a> por su clase.
* @param {<a class='lnkCargarVista' href='#'></a>} Direccion del recurso a cargar
* **/
$('#vistas').on('click', 'a.lnkCargarVista', function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$('#vistas').html(data);
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
/**
* Carga cualquier recurso indicado
* Asociada a una etiqueta <a> por su id.
* @param {<a id='lnkCargarVista' href='#'></a>} Direccion del recurso a cargar
* **/
$('#vistas').on('click', '#lnkCargarVista', function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$('#vistas').html(data);
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
$('#vistas').on('click', '#lnkCMFxCP', function(e) {
e.preventDefault();
var elementoClickeado = $(this);
$(document.body).find('#modalVincularCMF').remove();
$.ajax({
url: elementoClickeado.attr('href'),
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$(document.body).append("<div id='modalVincularCMF' class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Cerrar'><span aria-hidden='true'>×</span></button><h5 class='modal-title' id='myModalLabel'><strong>CMFs por Consejo Popular</strong></h5></div><div class='modal-body'><div id='contenidoModal' class='container-fluid'></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button></div></div></div></div>");
$(document.body).find('#modalVincularCMF').find("#contenidoModal").html(data);
$(document.body).find('#modalVincularCMF').modal({
keyboard: false,
backdrop: 'static'
}).on('shown.bs.modal', function(e) {
e.preventDefault();
var dialogo = $(this);
$(dialogo).find('#btnVincular').on('click', function(e) {
e.preventDefault();
var btn = $(this);
var consejoPopularId = $(dialogo).find('#consejosPopulares option:selected').val();
if (consejoPopularId !== "-1") {
var arregloCMFs = [];
$(dialogo).find("#cmfDesvinculados option:selected").each(function() {
arregloCMFs.push($(this).val());
});
if (arregloCMFs.length > 0) {
if (!btn.hasClass('disabled')) {
$.ajax({
type: 'POST',
url: Routing.generate('consejoPopular_vincularCMFs', {'consejoPopularId': consejoPopularId}),
data: {'cmfs': arregloCMFs},
beforeSend: function() {
btn.toggleClass('disabled');
$('#btnVincular').find('span').removeClass('glyphicon glyphicon-chevron-right').addClass('glyphicon glyphicon-refresh');
}
}).done(function(data) {
if (data === "success") {
$("#cmfDesvinculados option:selected").each(function() {
$('#cmfVinculados').append($("<option></option>")
.attr("value", $(this).val())
.text($(this).text()));
$('#cmfDesvinculados').find("option[value='" + $(this).val() + "']").remove();
});
}
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
return;
}
}).always(function() {
btn.toggleClass('disabled');
$('#btnVincular').find('span').removeClass('glyphicon glyphicon-refresh').addClass('glyphicon glyphicon-chevron-right');
});
} else {
return false;
}
}
}
});
$(document.body).find('#btnDesvincular').on('click', function(e) {
e.preventDefault();
var btn = $(this);
var consejoPopularId = $('#consejosPopulares option:selected').val();
if (consejoPopularId !== "-1") {
var arregloCMFs = [];
$("#cmfVinculados option:selected").each(function() {
arregloCMFs.push($(this).val());
});
if (arregloCMFs.length > 0) {
if (!btn.hasClass('disabled')) {
$.ajax({
type: 'POST',
url: Routing.generate('consejoPopular_desvincularCMFs', {'consejoPopularId': consejoPopularId}),
data: {'cmfs': arregloCMFs},
beforeSend: function() {
btn.toggleClass('disabled');
$('#btnDesvincular').find('span').removeClass('glyphicon glyphicon-chevron-left').addClass('glyphicon glyphicon-refresh');
}
}).done(function(data) {
if (data === "success") {
$("#cmfVinculados option:selected").each(function() {
$('#cmfDesvinculados').append($("<option></option>")
.attr("value", $(this).val())
.text($(this).text()));
$('#cmfVinculados').find("option[value='" + $(this).val() + "']").remove();
});
}
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
return;
}
}).always(function() {
btn.toggleClass('disabled');
$('#btnDesvincular').find('span').removeClass('glyphicon glyphicon-refresh').addClass('glyphicon glyphicon-chevron-left');
});
} else {
return false;
}
}
}
});
$('#consejosPopulares').on('change', function(e) {
e.preventDefault();
var seleccionado = $(this).val();
if (seleccionado !== "-1") {
$.ajax({url: Routing.generate('consejoPopular_CMFs', {'id': seleccionado}),
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$('#cmfVinculados').html(data);
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
} else {
$('#cmfVinculados').html('');
}
});
}).on('hidden.bs.modal', function(e) {
e.preventDefault();
$(document.body).find('#modalVincularCMF').remove();
});
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
$('a.lnkCambiarContrasenha').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
dataType: 'html',
type: 'GET',
url: url,
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$(document.body).find('#modalCambiarContrasenha').remove();
$(document.body).append("<div id='modalCambiarContrasenha' class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Cerrar'><span aria-hidden='true'>×</span></button><h5 class='modal-title' id='myModalLabel'><strong>Cambiar contraseña</strong></h5></div><div class='modal-body'><div id='contenedorForm' class='container-fluid'></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button><button id='btnSalvar' type='button' class='btn btn-primary'>Salvar</button></div></div></div></div>");
$("#contenedorForm").html(data);
$('#modalCambiarContrasenha').modal({
keyboard: false,
backdrop: 'static'
}).on('shown.bs.modal', function(e) {
e.preventDefault();
$('#contenedorForm form').on('submit', function(e) {
e.preventDefault();
return false;
});
var dialogo = $(this);
$("#btnSalvar").on('click', function(e) {
e.preventDefault();
var btn = $(this);
if (!btn.hasClass('disabled')) {
$.ajax({
dataType: 'json',
type: 'POST',
url: $("#modalCambiarContrasenha").find("form").attr('action'),
data: $("#modalCambiarContrasenha").find("form").serialize(),
beforeSend: function() {
btn.toggleClass('disabled');
$('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
}
}).done(function(data) {
$(dialogo).modal('hide');
$('#indicador').html(data.msg);
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
}
btn.toggleClass('disabled');
if (jqXHR.status === 406) {
$(dialogo).find('#contenedorForm').html(jqXHR.responseText);
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 2500);
}
});
} else {
return false;
}
});
}).on('hidden.bs.modal', function(e) {
e.preventDefault();
$(document.body).find('#modalCambiarContrasenha').remove();
});
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
$(document.body).on('click', '#lnkCalculadora', function(e) {
e.preventDefault();
var elemento = $(this);
$(document.body).find('#modalCalculadora').remove();
$(document.body).append("<div id='modalCalculadora' class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Cerrar'><span aria-hidden='true'>×</span></button><h5 class='modal-title' id='myModalLabel'><strong>Calculadora</strong></h5></div><div class='modal-body'><div id='contenedorForm' class='container-fluid'></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button></div></div></div></div>");
$.ajax({
url: elemento.attr('href'),
beforeSend: function() {
$('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
}
}).done(function(data) {
$("#contenedorForm").html(data);
$(document.body).find('#modalCalculadora').modal({
keyboard: false,
backdrop: 'static'
}).on('shown.bs.modal', function() {
$('#contenedorForm form').on('submit', function(e) {
e.preventDefault();
return false;
});
}).on('hidden.bs.modal', function(e) {
e.preventDefault();
$(document.body).find('#modalCalculadora').remove();
$(document.body).find("div[class='datepicker datepicker-dropdown dropdown-menu']").remove();
});
}).fail(function(jqXHR) {
if (jqXHR.status === 401) {
window.location = _HOMEPAGE;
} else {
$('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
}
}).always(function() {
if (!$('#indicador').hasClass("cargando-satisfactorio")) {
setTimeout(function() {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}, 3000);
} else {
$('#indicador').fadeOut('fast', function() {
$(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
});
}
});
});
});