Boas Práticas com JavaScript

Programação
, , ,
#1

Fala pessoal, tudo certo?

Estou desenvolvendo uma interface web para minha API RESTful Java e até agora está tudo correndo bem, gostaria apenas de saber se a forma que escrevi o código está legível, se eu deixei de cumprir com alguma boa prática, etc. Quem puder me ajudar com isso eu agradeço muito!

Código:

const URL = "http://localhost:8080/contents"
const contentBlocks = document.querySelector(".content-blocks")

async function getAPI() {

  const resp = await fetch(URL);
  if (resp.status === 200) {
    const obj = await resp.json();

    let catalogSize = Object.keys(obj).length;
    const catalogArray = [];
    for (let i = 0; i < catalogSize; i++) {
      const content = {
        cod: obj[i].cod,
        name: obj[i].name,
        season: obj[i].content_group,
        episode: obj[i].content_unit,
        releaseDay: obj[i].releaseDay,
        releasing: obj[i].releasing,
        personalStatus: obj[i].personalStatus,
        category: obj[i].category
      }
      catalogArray[i] = content;
    }
    for (let content in catalogArray) {
      let id = parseInt(content)+1;
      contentBlocks.innerHTML += `<div class="line-block">\n
                                    <div class="block-number">${id}</div>\n
                                    <div class="block-info">\n
                                      <div class="info-title">${catalogArray[content]['name']}</div>\n
                                      <div class="info-detail">SEASON: ${catalogArray[content]['season']}</div>\n
                                      <div class="info-detail">EPISODE: ${catalogArray[content]['episode']}</div>\n
                                    </div>\n
                                    <div class="block-buttons">\n
                                        <div class="button-container">\n
                                            <button type="button" name="btnMore" id="btnMore" class="btnAction"><img src="imgs/buttons/white/more.png" class="btnActionIcon" alt="more"></button>\n
                                        </div>\n
                                        <div class="button-container">\n
                                            <button type="button" name="btnUpdate" id="btnUpdate" class="btnAction"><img src="imgs/buttons/white/update.png" class="btnActionIcon" alt="more"></button>\n
                                        </div>\n
                                        <div class="button-container">\n
                                            <button type="button" name="btnDelete" id="btnDelete" class="btnAction"><img src="imgs/buttons/white/delete.png" class="btnActionIcon" alt="more"></button>\n
                                        </div>\n
                                    </div>\n
                                  </div>`
    }
  }
}

getAPI()
#2

Uma boa seria dividir em funções menores apenas para separar responsabilidades, ex.:

getApi(): Serve para retornar os dados da APi
render(catalogArray): Recebe o array de catalogo e monta o html

Outra coisa é, dependendo do retorno da API, não sei se é necessário montar o array da forma como está fazendo, sendo que vc já usa resp.json().

#3

obj é um array? Da forma que está fazendo (obtendo os índices numéricos até o length, dá a entender que sim). Enfim, se for um array, o loop poderia ser assim:

const catalogArray = [];
for (const {cod, name, content_group, content_unit, releaseDay, releasing, personalStatus, category} of obj) {
    const content = {
        cod, name, season: content_group,
        episode: content_unit,
        releaseDay, releasing, personalStatus, category
    }
    catalogArray.push(content);
}

O for (const {cod, name, etc... faz a desestruturação de cada elemento do array obj, assim vc não precisa mais fazer obj[i].cod, pode usar cod diretamente.

Depois, para criar o novo objeto content, basta usar as variáveis obtidas da desestruturação. Repare que se no objeto content a propriedade tem o mesmo nome, eu não preciso repeti-lo. Claro que poderia fazer content = { cod: cod, name: name, etc..., mas usando apenas { cod, name ele já entende que é para usar o mesmo nome em ambos. Eu só mudei para season e episode que são diferentes em content, mas para os demais, como são os mesmos nomes, não precisei repetir.

Se obj não for um array, pois sempre existe a possibilidade de algum “gênio” retornar um objeto assim:

{
    "0": {cod: 1, name: 'fulano', etc... },
    "1": {cod: 2, name: 'ciclano', etc... }
};

Aí eu entenderia o motivo de ter usado Object.keys. Ainda sim, poderia ser mais simples, bastando trocar o for para:

for (const {cod, name, content_group, content_unit, releaseDay, releasing, personalStatus, category} of Object.values(obj)) {
    // o resto é igual

Pois neste caso só estou interessado nos valores, então basta usar Object.values.

Em vez de usar for in, parseInt e somar 1, acho mais simples usar for..of e controlar o id separadamente:

let id = 0;
for (const content of catalogArray) {
    id++;
    contentBlocks.innerHTML += `<div class="line-block">
                                    <div class="block-number">${id}</div>
                                    <div class="block-info">
                                      <div class="info-title">${content.name}</div>
                                      <div class="info-detail">SEASON: ${content.season}</div>
                                      <div class="info-detail">EPISODE: ${content.episode}</div>
                                    </div>
                                    <div class="block-buttons">
                                        <div class="button-container">
                                            <button type="button" name="btnMore" id="btnMore" class="btnAction"><img src="imgs/buttons/white/more.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" name="btnUpdate" id="btnUpdate" class="btnAction"><img src="imgs/buttons/white/update.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" name="btnDelete" id="btnDelete" class="btnAction"><img src="imgs/buttons/white/delete.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                    </div>
                                  </div>`;
}

Além disso, removi os \n, pois em uma template string a quebra de linha já faz parte da string. Ou seja, vc estava pulando duas linhas: uma correspondente ao \n e outra da própria quebra de linha que está na string. Não sei se era essa a intenção, mas enfim, removi os \n.

E repare também que não precisa acessar as propriedades entre aspas. Pode ser apenas content.name e pronto.

E claro que dá para usar o for tradicional:

for (let id = 0; id < catalogArray.length; id++) {
    var content = catalogArray[id];
    contentBlocks.innerHTML += `<div class="line-block">
                                    <div class="block-number">${id + 1}</div>
                                    <div class="block-info">
                                      <div class="info-title">${content.name}</div>
                                      <div class="info-detail">SEASON: ${content.season}</div>
                                      <div class="info-detail">EPISODE: ${content.episode}</div>
                                    </div>
                                    <div class="block-buttons">
                                        <div class="button-container">
                                            <button type="button" name="btnMore" id="btnMore" class="btnAction"><img src="imgs/buttons/white/more.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" name="btnUpdate" id="btnUpdate" class="btnAction"><img src="imgs/buttons/white/update.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" name="btnDelete" id="btnDelete" class="btnAction"><img src="imgs/buttons/white/delete.png" class="btnActionIcon" alt="more"></button>
                                        </div>
                                    </div>
                                  </div>`;
}

Acho ambos mais simples do que usar for in + parseInt, acho que é desnecessário toda essa volta.

1 curtida