¿Cómo podría mejorar este fragmento de código?

ER

@erm

Qué tal comunidad, aunque leí el código de conducta no encontré si este tipo de preguntas se puedan publicar aquí. Prosiguiendo con el hilo general, me gustaría que me ayudaran a mejorar en buena manera este código, tanto en lineas de código, rendimiento, legibilidad, etc. Básicamente es un script para añadir un tema oscuro y que preserve la apariencia del tema mediante una cookie.

Pd. Solo incluyo el código javascript, ya que lo demás no es relevante a mi criterio.

let darkThemeButton = document.getElementById("dark-theme"),
    body = document.body,
    tags = body.getElementsByTagName("*");

function addDarkClass() {
    document.cookie = "theme=dark";
    body.classList.add("dark");
    body.classList.remove("light");
    for (let i = 0; i < tags.length; i++) {
        tags[i].classList.add("dark");
    }
    darkThemeButton.innerHTML = "Desactivar tema oscuro";
}

function addLightClass() {
    document.cookie = "theme=light";
    body.classList.add("light");
    body.classList.remove("dark");
    for (let i = 0; i < tags.length; i++) {
        tags[i].classList.remove("dark");
    }
    darkThemeButton.innerHTML = "Activar tema oscuro";
}

darkThemeButton.addEventListener("click", function () {
    let containsClass = body.classList.contains("light");
    if (containsClass) {
        addDarkClass();
    } else {
        addLightClass();
    }
});

function detectDarkTheme() {
    if (document.cookie === "theme=dark") {
        return true;
    }
    return false;
}

function setDarkTheme() {
    if (detectDarkTheme()) {
        addDarkClass();
    } else {
        addLightClass();
    }
}

setDarkTheme();
Avatar

@betoquiroga

Hola Con arrow functions y reemplazando el for por un map

Pero ambos comentarios son de gusto más que de optimización.

Avatar

@jopzik

También podrías usar ternarios en lugar de if:

return document.cookie === "theme=dark" ? true :  false

Pero como dice Beto, es cuestión de gusto. Yo lo siento más cómodo de leer

RR

@renealexanderriosgutierrez

si pones otro tema veras lo que repites (una funcion por color?)... y si repites... veras que no esta optimizado...

Avatar

@angelsalvador

La forma que has estructurado el código es bastante legible. Ahora la forma compacta que podría dar como mi opinión, seria esta:

// Usando arrow functions, operadores ternarios y el map, como dijeron los chicos mas arriba.
let darkThemeButton = document.getElementById("dark-theme"),
   body = document.body,
   tags = body.getElementsByTagName("*");

changeTheme = () => {
   const containsClass = body.classList.contains("light")
   if (containsClass) {
       document.cookie = "theme=dark";
       body.classList.add("dark");
       body.classList.remove("light");
       tags.map(tag => {
           tag.classList.add("dark");
       })

       darkThemeButton.innerHTML = "Desactivar tema oscuro";
       return
   }

   document.cookie = "theme=light";
   body.classList.remove("dark");
   body.classList.add("light");
   tags.map(tag => {
       tag.classList.remove("dark");
   })

   darkThemeButton.innerHTML = "Activar tema oscuro";
}

darkThemeButton.addEventListener("click", changeTheme);

// Comprobar el cookie y aplicar lo necesario en una sola funcion, ya que 2 comprobaciones lo veo redundante.
detectDarkTheme = () => {
   document.cookie === "theme=dark" ? addDarkClass() : addLightClass()
}

detectDarkTheme();
Avatar

@angelsalvador

Correccion: Me falto la ultima parte en la comprobacion de la cookie. Se podria hacer de la siguiente forma:

// Comprobar si existe el theme en el cookie, ya sea dark o light. Si no lo encuentra, no hace nada.
// De lo contrario aplica lo necesario ejecutando changeTheme()
detectDarkTheme = () => {
   document.cookie === "theme=dark" || "theme=light" ? changeTheme() : null
}

detectDarkTheme();

Si me equivoco en algo, corrijanme muchachos. Todos estamos para aprender ;)

PD: No lo he testeado ya que solo colocaste el script.

Avatar

@angelsalvador

Correccion 2: En realidad solo se comprobaría si en el cookie tiene el theme dark, ya que por default la app esta en color light.

// Comprobar si existe el theme dark en el cookie. Si no lo encuentra, no hace nada y se mantiene por default la app.
// De lo contrario hace el cambio ejecutando changeTheme()
detectDarkTheme = () => {
  document.cookie === "theme=dark" ? changeTheme() : null
}

detectDarkTheme();
ER

@erm

Tu respuesta estuvo muy bien ya que me funciono, le cambie la declaración de variable containsClass de const a let, y removí el return el if de la función changeTheme

ER

@erm

Muchachos muchas gracias por sus apreciaciones y correcciones, asi sean de gusto, la verdad es que me abre el paradigma a la hora de crear nuevos scripts

Recuerdainiciar sesiónpara participar en la comunidad.