Principios de diseño

Principio de legibilidad: es muy importante que el código sea legible por otro programador o por mi misma en el futuro, que solo leyendo el nombre de las funciones sepa que acción van a realizar. Si el código no es legible es mucho más complicado y costoso que pueda ser mantenido.

Al nombrar una función se suele usar un verbo(acción) y un objeto directo(sobre el que que se va a realizar la acción). El nombre tiene que decir lo que hace la función, no como lo hace. No es necesario abreviar palabras, se entiende mejor si las palabras están enteras.

Sería interesante mostrar la sucesión de funciones como un indice de las acciones que la aplicación realiza. De esta manera podríamos ver los pequeños pasos que hace nuestra aplicación para conseguir que todo funcione.

Algunas veces cuando no encontramos nombre para una función es porque realiza más de una acción y podría dividirse en dos o más funciones o porque por el contrario podría estar incluida en otra función.

El código no puede dar sorpresas, es decir, no debería realizar más acciones de las que describe su título. Ejemplo:

function decreasePoints(timeSpent) {
    const playerPoints = document.querySelector(‘.score’);
    if (timeSpent <= 10) { 
playerPoints.innerHTML = (userPoints -= 1);
}
else if (timeSpent >= 12) {
playerPoints.innerHTML = (userPoints -= 3);
}
    else if (timeSpent > 10) { 
playerPoints.innerHTML = (userPoints -= 2);
}
    userPoints == 0;
}

En esta función además de restar puntos muestra el resultado en el DOM y se reinicia el contador. Para no dar sorpresas se crearían 3 funciones, una para cada acción o se la nombraría de otra manera.

a):
function decreasePoints(timeSpent) {
    if (timeSpent <= 10) {
userPoints -= 1;
}
    else if (timeSpent >= 20) {
userPoints -= 3;
}
    else if (timeSpent > 10) {
userPoints -= 2;
}
}
b):
function printPoints() {
    const playerPoints = document.querySelector(‘.score’);
    playerPoints.innerHTML = userPoints;
}
c)
function resetPunctuation() {
    userPoints == 0;
}

Cuando llamamos a un grupo de funciones siempre en el mismo orden, se puede crear una función que contenga a ese grupo y de esa manera solo llamar a la función creada. Ejemplo:

function startNewQuestion() {
    if(indexQuestion == questions.length — 1) {
        onFinish();
        saveUserResponse();
        compareAndPrintResult(answer);
        showStats();
        clearInterval(idSetInterval);
    }else {
        saveUserResponse();
        compareAndPrintResult(answer);
        showStats();
        goToNextQuestion();
        resetTimer();
        printNewQuestion();
    }
}

En el caso anterior se repiten las tres funciones en negrita, por lo que crearíamos una función que las llamara a las 3:

function analyzeResults() {
    saveUserResponse();
    compareAndPrintResult(answer);
    showStats();
}

Y quedaría así:

function startNewQuestion() {
    if(indexQuestion == questions.length — 1){
        onFinish();
        analyzeResults();
        clearInterval(idSetInterval);
    }else {
        analyzeResults();
        goToNextQuestion();
        resetTimer();
        printNewQuestion();
    }
}

En la medida de lo posible tenemos que intentar que las funciones sean puras y que no llamen a otras funciones. Cuanto menos dependan las unas de las otras mejor sera la cohesión de nuestro código.

Para evitar tener variables globales a la aplicación, introducimos nuestra parte de código dentro de una función y la llamamos desde el HTML, de esta forma evitamos que nuestras variables sean globales a la aplicación.

<script src=”src/main.js”></script>
<script> app(); </script>