Em certos momentos do desenvolvimento nos deparamos com certos dilemas como qual abordagem utilizar na codificação de modo a tentar se distanciar o mínimo possível das "Boas práticas de programação".
Quando o assunto é "Desenvolvimento Web", nos deparamos com um bombardeio de informações, arquiteturas, frameworks, exemplos, fóruns... Com o JavaScript não é diferente.Existem "n" modos de se efetuar chamadas a funções JavaScript e neste artigo citarei as três mais utilizadas comentando suas vantagens ou desvantagens:
1 - Inline
Descrição: no exemplo abaixo, a chamada JavaScript é realizada dentro do evento "onload" da página.
Consideração: pior modo de utilizar.
Motivo: o script vinculado ao evento "onload" só será executado após o carregamento de todos os assets da página. Caso algum elemento da página possua dependência deste script, erros podem ocorrer. Dependendo de como o navegador interpretar o código abaixo, a função alert pode ser executada antes da renderização dos elementos contidos na tag body, impedindo o carregamento da página até que o usuário interaja com a mensagem.
<!DOCTYPE html>
<html>
<head>
<title>Carregando o javascript</title>
</head>
<body onload="alert('inline');">
<h1>Formas de carregamento</h1>
</body>
</html>
2 - Embed
Descrição: no exemplo abaixo, a chamada JavaScript é realizada enquanto a página é carregada
Consideração: as vezes é utilizado.
Motivo: não interrompe o carregamento da página, pois, o script só é carregado/interpretado após o carregamento dos elementos da página e pode ser utilizado quando o conteúdo da página é dinâmico ou condicional.
Exemplo: exibir ou não informações na página ou aplicar alguma regra de negócio sobre campos/elementos de um formulário.
<!DOCTYPE html>
<html>
<head>
<title>Carregando o javascript</title>
</head>
<body>
<h1>Formas de carregamento</h1>
<script type="text/javascript">
alert('embed');
</script>
</body>
</html>
3 - External
Descrição: no exemplo abaixo, a chamada JavaScript é realizada a partir de um arquivo externo.
Consideração: melhor maneira.
Motivo: além da vantagem mencionada no item 2, deixa o HTML da página menos poluído, já que toda a codificação JavaScript fica em um arquivo externo.
<!DOCTYPE html> <html> <head> <title>Carregando o javascript</title> </head> <body> <h1>Formas de carregamento</h1> <script type="text/javascript" src="externalFile.js"></script> </body> </html>
externalFile.js
alert('external');
Vale ressaltar que cada navegador possui sua própria engine e efetua o parse do HTML e JavaScript de modo diferente, resultando consequentemente em comportamentos diferentes.
Nenhum comentário:
Postar um comentário