Boas práticas ao desenvolver em javascript

Hoje em dia javascript esta na moda, certo?

ERRADO!

O que esta na moda é o uso dos frameworks da vida.

Com isso, tenho notado que até mesmo alguns ‘plugins’ ou  até mesmo frameworks estão esquecendo de algo básico…

BOAS PRÁTICAS!

Essa foi minha motivação para fazer esse artigo, que foi  apresentado para a equipe de desenvolvimento de minha antiga empresa.

Então, vamos lá…

A primeira pergunta que faço em minha apresentação é

Onde começam as boas práticas?

Onde começam as boas práticas?

E sua resposta é óbvia…

Em você!

em você!

Nesse momento, muitas pessoas se fazem as seguintes perguntas:

  1. Como assim?
  2. Comigo? Blz, mas como gênio?

E a resposta para as perguntas supracitas é mais simples ainda…

Pensando antes de começar a fazer!!

Pensando antes de fazer!!!!

É algo simples e óbvio, mas acredite, com advento da tecnologia “CTRL+C , CTRL+V” e a febre dos plugins!
Muitos esquecem de ver se quele código ou plugin está fazendo o que você quer da forma correta, pois um axiôma que costumo usar é que “esta funcionando, não significa que esta certo.

Quando os plugins ou códigos não fazem o que precisamos, caimos no cenário de ter que codificar algo do zero, e acabamos caindo no uso abusivo dos frameworks…

Outro axiôma muito relevante que meu amigo Thiago Anselme sempre diz é “não existe bala de prata” ou seja, não existe uma solução,plugin,framework que resolverá todos os problemas de sua vida! 🙂

Criar algo do zero ou não. Usando boas práticas de programação e se possivel sem ficar dependente de framework…

  1. Para muitos… Isso da medo.
  2. Para muitos… Parece ser mais difícil… (até concordo…)
  3. Para muitos… Isso é impossível!

    ……………………………..
  4. Para poucos, blz tamo ae!  😉

Com isso vamos iniciar uma sequencia de códigos com o título “seria bom evitar”

Seria bom evitar!

Evitar o uso de eval ou Function

Function e a função a eval são operações pesadas que usados em excesso pode complicar a vida do interpretador.
Suas chamadas sãp convertidas em código fonte para código executável.

Lento:
function addPropriedade(objeto,propriedade,codigo){

objeto[propriedade] = new Function(codigo);

};
addPropriedade({},”nome”,”this.Variavel=2012″);

Rápido:
function addPropriedade(objeto,propriedade,funcao){

objeto[propriedade] = funcao;

};
addPropriedade({},”nome”,function(){ this.Variavel = 2012; });

Evitar passar,uma função na forma de strings, para setTimeout () e setInterval ()

Se você passar uma string em setTimeout() ou setInterval() a string será avaliada da mesma forma que o eval() que é lento.
Envolva seu código em uma função anônima. Assim o interpretado poderá  executar sua instrução de forma mais rápida durante a “compilação”.

Lento:

window.setInterval(“minhaFuncao()”,100);
window.setTimeout(“minhaFuncao()”,100);

Rápido:

window.setInterval(minhaFuncao,100);
window.setTimeout(minhaFuncao,100);

Sempre que puder, faça cache de valores variáveis

Lento:
O comprimento do arr array é recalculado a cada vez que o loop repete.

for(var i = 0; i < arr.length; i++){

//fazer algo…

}

Rápido:
Melhor maneira é para armazenar em cache o comprimento do array:

for(var i = 0,_length = arr.length; i < _length; i++){

//fazer algo…

}

Sempre que puder, faça cache de objetos DOM

Lento:

documento.getElementById(“elemento”).style.backgroundColor = “red”;
documento.getElementById(“elemento”).innerHTML = “….”;

Rápido:

var elemento = documento.getElementById(“elemento”);
elemento.style.backgroundColor = “red”;
elemento.innerHTML = “..”;

Evite pegar um formulário por getElementById

Em meus 6 anos de desenvolvimento de sistemas web, foi o que mais vi acontecer, algo muito recorrente.

As formas de de pegar o valor de um campo:

var form = document.forms[0];

#1
form[“buscar”].value

#2
form.buscar.value

#3
form.elements[“buscar”].value

Tantas formas e ainda vejo pessoas pegando o valor de um campo assim
$(“#buscar”).val() ou document.getElementById(“buscar”).value;

Remova referências que não serão mais usadas

..Lixo no lixo, blz? O browser agradece!

Não muito legal:
//inicio…
var elemento = document.getElementById(“elemento”);
//…
elemento.innerHTML = “valor… valor… “;
elemento.style.backgroundColor=”green”;
//…
//…
//…
//Fim…

Mais legal:
//inicio…
var elemento = document.getElementById(“elemento”);
var valor = “valor… valor…     “;
//…
elemento.innerHTML = valor;
elemento.style.backgroundColor=”green”;
//…
//…
//…
elemento = null;
delete valor;
//Fim…

Bom, fico por aqui..;

Existem vários outros exemplos de boas práticas, mas coloquei nesse artigo os que considero os mais gritantes…

Anúncios

Systems Analyst / .Net Developer

Marcado com: , , , , , , , , ,
Publicado em Artigos
Um comentário em “Boas práticas ao desenvolver em javascript
  1. Gabby disse:

    Agora sim !!! Começarei com uma boa prática…
    Bisous !

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: