Boas Práticas JavaScript, dicas para melhorar seu desenvolvimento

Programador Viking 1 de abril de 2019 0 Comentários Leitura: 4 min

No artigo anterior sobre utilização de querySelector vimos que é totalmente possível manipular o HTML através do JavaScript. Agora vamos aprender boas práticas na hora de desenvolver em JavaScript.

Quando programamos com o JavaScript, é provável que estejamos trabalhando com outras pessoas, então, o que acontece se outro desenvolvedor decidir deixar de utilizar a tag <h1>, substituindo-a por <h2>?

<header>
    <div class="container">
        <h2>Empresa de Nutrição</h2>
    </div>
</header>

Ou seja, ao abrirmos a página no navegador, será exibida a seguinte mensagem no console:

Uncaught TypeError: Cannot set property 'textContent' of null

A mensagem indica que a propriedade textContent é nula e apontará a linha na qual ocorreu o erro, no caso, na tag <script>.

Veja também: Os Melhores Cursos GRATUITOS Com Certificado

<!-- ... -->
        </section>
    </main>
    <script>
        var titulo = document.querySelector("h1");
        titulo.textContent = "Ana Paula Nutricionista";
    </script>

O h1 não foi encontrado porque ele deixou de existir na nossa página e, sendo assim, impossibilitado de ser selecionado.

O problema de se buscar uma tag no DOM é que o código JavaScript fica muito atrelado ao HTML.

Caso o desenvolvedor decida fazer alterações no HTML, o código deixará de funcionar. Por isso, é uma boa prática não buscarmos por uma tag HTML específica, e usar outras opções que a função querySelector() nos disponibiliza.

Confira neste artigo:

Boas Práticas JavaScript: Utilizar Classe

Além das tags HTML, o querySelector() nos permite buscar por um elemento por meio da classe, do id, ou seja, dos seletores CSS.

Vamos testar esse recurso adicionando uma classe dentro do <h1>:

<header>
    <div class="container">
        <h2 class="titulo">Ana Paula Nutrição</h2>
    </div>
</header>

No código JS inserido na parte de baixo do arquivo, em vez de realizarmos a busca no document.querySelector() pela tag <h1>, usaremos o seletor CSS que retornaria o conteúdo na mesma tag.

Iremos utilizar o seletor CSS para classe: . (ponto).

<script>
    var titulo = document.querySelector(".titulo");
    titulo.textContent = "Aparecida Nutricionista";
</script>

Agora, serão retornados os elementos da classe .titulo, e Ana Paula Nutricionista reaparece na página. Se outro desenvolvedor modificar novamente a tag h1 no código HTML, nosso código não será prejudicado e o JavaScript continuará sendo executado, pois deixamos as responsabilidades desacopladas.

Boas Práticas JavaScript: Criar Arquivo .js

Trata-se de uma boa prática separarmos o código JavaScript do HTML, no entanto, o código ainda está completo no index.html, atuando independentemente. O trecho JS está salvo na tag <script>.

É interessante desacoplarmos os códigos em arquivos diferentes, com diferentes extensões, .js, .html – já temos o código CSS separado em um arquivo .css.

A seguir, criaremos o arquivo principal.js na pasta /js, com todo o código JavaScript. O próximo passo será mover o código da tag <script> para dentro desse arquivo:

var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

A tag <script> continuará na página index.html, porém, ela não ficará vazia, e apontará para o arquivo JavaScript externo que criamos, por meio do atributo src (referente ao termo source). Como o arquivo principal.js está na pasta js, especificaremos o caminho completo no atributo:

<!-- ... -->
        </section>
    </main>
<script src="js/principal.js"></script>

</body>

Quando recarregarmos a página, o arquivo continuará funcionando corretamente. Vale reforçar que é recomendado deixarmos o código HTML separado do JavaScript.

Conclusão

Em conclusão, neste artigo, nós aprendemos algumas boas práticas para utilizarmos na programação com javascript.

Ou seja, devemos criar um arquivo javascript (.js) para separar nosso código HTML. Dessa forma a manutenção fica mais fácil de realizar.

Além disso, vimos também como utilizar uma classe para não perdermos a referencia quando estamos utilizando o DOM.

Enfim, espero que este artigo tenha te ajudado a dar mais um passo em busca de seus objetivos. 😉

Gostou do conteúdo?
Comente aqui em baixo o que você achou desse artigo.

A chave para uma carreira excepcional na área da tecnologia está ao seu alcance. Não perca tempo! Clique agora mesmo no botão abaixo e desbloqueie acesso imediato a mais de 1400 cursos completos, todos com certificados reconhecidos.

ACESSAR CURSOS COM CERTIFICADO

Sua jornada rumo ao sucesso profissional começa aqui.

Muito Obrigado pela audiência e lhe desejo TERABYTES DE SUCESSO!!! 💻