1
resposta

[Dúvida] Fiz usando dicionario

No curso "JavaScript: manipulando elementos no DOM". Teria algum problema ao invés de switch utilizar um dicionário?

JavaScript

const html = document.querySelector('html')

const botoes = document.querySelectorAll('.app__card-button')

const startPauseBt = document.querySelector('.start-pause')

const timer = document.querySelector('#timer')
const musica = document.querySelector('.toggle-switch')
const banner = document.querySelector('.app__image')
const titulo = document.querySelector('.app__title')

const dataTime = {
    'foco': 1500,
    'curto': 300,
    'longo': 900,
}

const tipoTítulos = {
    'foco': `
    Otimize sua produtividade,<br>
    <strong class="app__title-strong">mergulhe no que importa.</strong>
    `,
    'curto':`
    Que tal dar uma respirada?<br>
    <strong class="app__title-strong">Faça uma pausa curta!.</strong>
    `,
    'longo':`
    Hora de voltar à superfície.<br>
    <strong class="app__title-strong">Faça uma pausa longa.</strong>
    `
}

function init() {
    activePageBt(botoes[0])
    timer.textContent = dataTime['foco']
}

function mudaTitulo(tipo){
    titulo.innerHTML = tipoTítulos[tipo]
}

function activePageBt(bt) {
    botoes.forEach((element) => {
        element.classList.remove('active')
    })

    bt.classList ? bt.classList.add('active') : console.log('Botão não encontrado')
}


botoes.forEach(element => {
    const typeClass = element.classList[1].split('--')[1]
    element.addEventListener('click', () => {

        if (typeClass === 'foco') {
            html.setAttribute('data-contexto', typeClass)
            banner.setAttribute('src', '/imagens/foco.webp')
        } else {
            html.setAttribute('data-contexto', `descanso-${typeClass}`)
            banner.setAttribute('src', `/imagens/descanso-${typeClass}.webp`)
        }
        activePageBt(element)
        timer.textContent = dataTime[typeClass]
        mudaTitulo(typeClass)
    })
})

init()
}
1 resposta

Oii Nicolas, tudo bem?

A resposta é sim, você pode usar um objeto para substituir uma estrutura switch. É uma prática bastante comum e conhecida como "tabela de pesquisa" (lookup table) em JavaScript. Essa técnica pode tornar o código mais limpo e mais fácil de manter, especialmente quando você tem muitos casos para verificar.

Que bom que você já implementou essa técnica com sucesso!

Um abraço e bons estudos.