Olá espero que estejam todos bem!
Continuando os meus estudos em JavaScript, tenho em mãos 2 códigos que tem a função de controlar um menu lateral.
Na opinião de vocês qual é o melhor código?
1º Versão
const menu = document.getElementById("sideMenu");
const openButton = document.getElementById("openMenu");
const closeButton = document.getElementById("closeMenu");
openButton.addEventListener("click", () => {
menu.classList.add("open");
});
function fecharMenu() {
menu.classList.remove("open");
}
closeButton.addEventListener("click", () => {
fecharMenu();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
fecharMenu();
}
});
// Se click for diferente de sidemenu o menu é fechado
document.addEventListener("click", function (event) {
// "Se o menu ESTÁ ABERTO E o clique foi FORA do menu (e também não foi no botão de abrir)..."
if (menu.classList.contains("open") && !menu.contains(event.target) && !openButton.contains(event.target)) {
// "...então, FECHE O MENU."
fecharMenu();
}
});
2° Versão
// Espera o documento HTML inteiro ser carregado e analisado antes de executar o código.
// Isso garante que todos os elementos (sideMenu, openMenu, closeMenu) já existem.
document.addEventListener('DOMContentLoaded', function() {
// Seleciona os elementos UMA VEZ, após o DOM estar pronto.
const menu = document.getElementById("sideMenu");
const openButton = document.getElementById("openMenu");
const closeButton = document.getElementById("closeMenu");
// Adiciona uma verificação para garantir que todos os elementos foram encontrados.
// Se algum deles estiver faltando no HTML, o código não tentará adicionar
// event listeners a 'null', prevenindo erros.
if (!menu || !openButton || !closeButton) {
console.warn("Um ou mais elementos do menu lateral (sideMenu, openMenu, closeMenu) não foram encontrados. A funcionalidade do menu pode estar inativa.");
return; // Para a execução se os elementos não existirem.
}
// --- LÓGICA DE EVENTOS ---
openButton.addEventListener("click", () => {
menu.classList.add("open");
});
closeButton.addEventListener("click", () => {
menu.classList.remove("open");
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && menu.classList.contains("open")) { // Adicionada verificação se o menu já está aberto
menu.classList.remove("open");
}
});
// Se o clique for fora do menu, o menu é fechado
document.addEventListener("click", function (event) {
if (
menu.classList.contains("open") && // O menu está aberto?
!menu.contains(event.target) && // O clique foi FORA do menu?
!openButton.contains(event.target) // O clique também foi FORA do botão de abrir?
) {
menu.classList.remove("open");
}
});
});
