#Como substituir if/else aninhado por Object Literals?

1 messages · Page 1 of 1 (latest)

snow badge
#

Estou revisitando o frontend do meu projeto. Inicialmente, apesar de saber que o desempenho e a legibilidade do código estavam fora do padrão esperado, o código que funcionava era esse:

            var currentContent = $(this).html().trim();

            // For some god forsaken reason, sometimes currentContent will 
            // contain a <br> value instead of a simple empty string.
            // I do not understand WHY it happens but this accounts for it... 
            // for now :)
            if (currentContent === "<br>" || currentContent === "") {
                if ($(this).hasClass("article-first-paragraph")) {
                    $(this).html(defaultParagraphContent);
                } else if ($(this).hasClass("title")) {
                    $(this).html(defaultTitleContent);
                } else {
                    $(this).html("New paragraph");
                }
            }
        }```

Por isso, decidi refatorá-lo com Object Literals:

```        const defaultContent = {
                title: "Title",
                firstParagraph: "Share your thoughts...",
                newParagraph: "New paragraph"
        }

        // Adds default text if the user does not make any changes
        // gets called on focusout event
        function focusOut() {
            var currentContent = $(this).html().trim();

            // For some god forsaken reason, sometimes currentContent will 
            // contain a <br> value instead of a simple empty string.
            // I do not understand WHY it happens but this accounts for it
            if (currentContent === "<br>" || currentContent === "") {
                const textObjectClass = $(this).attr("class").slice(9);
                const newObjectContent = defaultContent[textObjectClass];
                
                $(this).html(newObjectContent);
            }
        }```

Vou terminar a dúvida na próxima mensagem
#

O problema dessa solução é que ela não está funcionando como esperado. Dei uma debuggada, e descobri algumas coisas:

Primeiro, aquele slice(9) apareceu no código porque inicialmente ele estava trazendo 2 classes: uma que se chamava editable, que eu coloquei pra ficar mais fácil saber quais partes do editor de texto eram editáveis pelo usuário, e a classe que representava qual era a função exata do campo. Como "editable" tem 7 letras e haveria um espaço entre ela e a próxima classe, coloquei slice(9) para que retornasse o nome completo da segunda classe do elemento

#

Segundo, ele não está reconhecendo defaultContent. Ele não sabe o que ele é quando chamo defaultContent[textObjectClass] e retorna undefinied

#

Eu pesquisei na W3Schools como que trabalha com Object, e a sintaxe parece ok, o ChatGPT fica repetindo as mesmas correções vãs, não encontro nenhum código-exemplo que esteja usando Object dessa forma e eu honestamente não sei o que tá acontecendo :/

#

Algum outro hater do escripto sabe como conserta? sr_incrivel_pb

snow badge
#

O nome da chave em defaultContent não era igual ao nome da classe no HTML 🤡