0

Tengo el siguiente código que me funciona correctamente. Se compone de:

  • Una clase llamada Galería
  • Creamos un objeto de esta clase Galeria (llamado galeria).
  • Atributos.
  • Métodos necesarios para el funcionamiento de la interfaz.
  • Eventos de botón.

¿Es buena práctica hacer uso de las variables usando var al ser privadas? ¿Sería más legible utilizar let al ser variables locales? ¿Debería hacer la llamada a los métodos desde el objeto mediante galería.metodo() o podría utilizar directamente el método?

Una sería de dudas... El código funciona pero igual existen incoherencias.

Código:

/*Siempre que queremos cargar la página haremos esta función*/
/*Al cargar la página realiza esta llamada a la función*/
$(document).ready(function() {
    //Creamos un objeto de la clase Galería. Le pasamos el parámetro necesario.
    galeria = new Galeria(7);
});


//Creamos la clase Galería con su método constructor, sus atributos y sus diferentes métodos necesarios.
var Galeria = function(imagenes){
    //Indice de la imagen que se está mostrando (cursor).
    var cursor = 0;
    //Array con imágenes.
    var arrayImages = new Array();
    //Cantidad de imágenes.
    var numImages = imagenes; //7 imagenes de Juego de Tronos.
    //Añadimos las imagenes con un "for" al array "arrayImages".
    for(var i=1; i<=numImages; i++){
        arrayImages.push("foto"+i+".jpg");
    }

    //Generamos un número aleatorio entre 1 y 7 y ese número se le asignamos al array "arrayImages".
    var imagenAleatoria = function(){
        cursor = (Math.round(Math.random()*100))%imagenes;
        return arrayImages[cursor];
    }

    //Cursor en la primera posición del array, devolviendo el nombre de la imagen que hay en la misma.
    var primeraPosicion = function(){
        cursor = 0;
        return arrayImages[cursor];
    }

    //Cursor en la última posición del array, devolviendo el nombre de la imagen que hay en la misma.
    var ultimaPosicion = function(){
        cursor = arrayImages.length-1;
        return arrayImages[cursor];
    }

    //Cursor en la posicion ANTERIOR a la actual, devolviendo el nombre de la imagen que hay en la misma.
    var posicionAnteriorActual = function(){
        if(cursor>0){
            cursor--;
            return arrayImages[cursor];
        }else{
            return arrayImages[0];
        }
    }

    //Cursor en la posicion SIGUIENTE a la actual, devolviendo el nombre de la imagen que hay en la misma.
    var posicionSiguienteActual = function(){
        if(cursor<6){
            cursor++;
            return arrayImages[cursor];
        }else{
            return arrayImages[6];
        }
    }

    //Inicialmente se cargará una imagen al azar.
    var inicializarImagen = function(){
        //En JS: document.getElementById("imagen").setAttribute("style", "background-image:.....");
        $('#imagen').css({'background-image': 'url(images/'+imagenAleatoria()+')'});
        console.log(cursor);
    }
    inicializarImagen();

    //Comprobar donde está el cursor.
    var comprobarCursor = function(){
        //Quitamos las dos clases "habilitado" y "deshabilitado" al principio del método.
        $("#botones a").removeClass("habilitado deshabilitado");
        console.log(cursor);
        if(cursor == 0){
            $('#primera').addClass("deshabilitado");
            $('#anterior').addClass("deshabilitado");
            $('#siguiente').addClass("habilitado");
            $('#ultima').addClass("habilitado");
        }else if(cursor == 6){
            $('#primera').addClass("habilitado");
            $('#anterior').addClass("habilitado");
            $('#siguiente').addClass("deshabilitado");
            $('#ultima').addClass("deshabilitado");
        }else{
            $('#primera').addClass("habilitado");
            $('#anterior').addClass("habilitado");
            $('#siguiente').addClass("habilitado");
            $('#ultima').addClass("habilitado");
        }
    }


    //Eventos de botones. Las gestionamos con código jQuery.
    $('#siguiente').click(function(){
        $('#imagen').css({'background-image': 'url(images/'+posicionSiguienteActual()+')'});
        comprobarCursor();
    });

    $('#anterior').click(function(){
        $('#imagen').css({'background-image': 'url(images/'+posicionAnteriorActual()+')'});
        comprobarCursor();
    });

    $('#primera').click(function(){
        $('#imagen').css({'background-image': 'url(images/'+primeraPosicion()+')'});
        comprobarCursor();
    });

    $('#ultima').click(function(){
        $('#imagen').css({'background-image': 'url(images/'+ultimaPosicion()+')'});
        comprobarCursor();
    });
}

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Galería de imágenes</title>
        <script src="js/jquery.js"> </script>
        <script src="js/galeria.js"> </script>
        <link rel="stylesheet" href="style/estilo.css"/>
    </head>

    <body>
        <div id="contenedor">
            <div id="galeria">
                <h2>Visor de personajes</h2>
                <div id="imagen"> </div>
                <div id="botones">
                    <ul>
                        <li><a href="#" id="primera">PRIMERA</a></li>
                        <li><a href="#" id="anterior">ANTERIOR</a></li>
                        <li><a href="#" id="siguiente">SIGUIENTE</a></li>
                        <li><a href="#" id="ultima">ULTIMA</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

1 respuesta 1

0

La diferencia entre let y var es más que privadas vs locales, en tu caso no veo que beneficiaría la legibilidad o funcionalidad del código declarar ninguna de las variables que tienes como var utlizando un let dado que al final el ámbito de todas es la función constructora de tu clase Galeria.

En cuanto a lo de la llamada de los métodos no entiendo bien que quieres decir con "utilizarlo directamente". Si tienes un método, lo llamas desde una instancia de la clase, sea esta instancia una variable global o no. En caso de que la funcionalidad no necesite/modifique nada de la instancia deberías considerar hacerla una function aparte en tu módulo y no tenerla dentro de la clase así porque sí.

Una nota final (y personal) de estilo, si vas a escribir código ES5 trata de no utilizar funcionalidades de ES6 como let, aunque no lo creas todavía hay navegadores y entornos que no soportan nada de ES6 y eso afecta la portabilidad de tu código. Te recomiendo que uses ES6 (o ES7 que está muy bueno) y algún transpiler como Babel para generar una versión ES5 de tu código.

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.