0

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'>&times;</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'>&times;</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'>&times;</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...");
                });
            }
        });
    });

});

1 respuesta 1

1

Hola espero esto te oriente con lo que buscas,

lee sobre Ingeniería de software basada en componentes.

https://es.wikipedia.org/wiki/Ingenier%C3%ADa_de_software_basada_en_componentes

Algunos de los Framework populares para FrondEnd son Angular, vue y react, aparte de ser basados en componentes esto son reactivos.

En lo personal aun no entiendo la filosofía de react, vue es muy intuitivo y lo mejor que puedes usar html javascript css sin más conocimientos extra, en el caso de angular es intuitivo pero tienes que aprender typescript.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.