antipatterns javascript

JAVASCRIPTANTIPATTERNS

ALCIDES QUEIROZ

JAVASCRIPTANTIPATTERNS

ALCIDES QUEIROZ

+ MÁS-PRÁTICAS E CILADAS!

@alcidesqueirozalcidesqueiroz.com

@alcidesqueirozalcidesqueiroz.com

!=

Antes, algumas

questões:

Quem aqui já trabalha com desenvolvimento?

Quem aqui já trabalha com desenvolvimento?

Quem programa em JavaScript?

Quem aqui já trabalha com desenvolvimento?

Quem programa em JavaScript?

Quem conhece os principais design

patterns?

Anti...

what?!

Em Engenharia de software, um anti-padrão é um padrão de projeto de software que

pode ser comumente usado mas é ineficiente e/ou

contra-produtivo em prática.

“

”Wikipedia

● Termo cunhado por Andrew Koenig em 1995, inspirado no Livro do GoF

● Popularizado em 1998 com o livro AntiPatterns - Refactoring Software, Architectures, and Projects in Crisis

Indo direto ao.

Definir os métodos de uma classe dentro de seuconstrutor

#1

function Pessoa(nome){ this.nome = nome;

this.apresentarSe = function(){

return "Meu nome é " + this.nome;

}}

● Para cada chamada ao construtor, uma nova instância do método apresentarSe é criada!

Live Code!

function Pessoa(nome){ this.nome = nome;}

Pessoa.prototype.apresentarSe = function(){ return "Meu nome é " + this.nome; }

● Agora, todos os objetos da classe Pessoa compartilham de uma única instância do método apresentarSe

Fazer comparaçõesnão-estritas

#2

Qual o valor lógico das expressões abaixo?1 == "1"

[[1 * 1]] == true

" \n\t " == false

4567 != "4567"

1 == "1" true→

[[1 * 1]] == true true→

" \n\t " == false true→

4567 != "4567" false→

O.M.G!

TOMA!

● Em comparações feitas com os operadores == e !=, é feita coersão implícita de tipo, resultando nesse tipo de bizarrice:[ [ ], null, '', null ] == ",,,"

//true!

1 === "1" false→

[[1 * 1]] === true false→

" \n\t " === false false→

4567 !== "4567" true→

AÍ SIM!

● Em Javascript, que é uma linguagem de tipagem fraca, onde variáveis são interpretadas de forma diferente dependendo do contexto, preferivelmente use os operadores === e !==.

Poluir o namespace global

#3

<script>

var i = 0;

function explorarAntiPattern(){

id = 321;

for(i = 0; i < 10; i++){}

}

explorarAntiPattern();

console.log(i);//10

console.log(id);//321

</script>

● Declarar variáveis sem o uso da keyword var, ou fora do escopo de uma function, polui o namespace global desnecessariamente

function solucao(){

var id = 321;

for(var i = 0; i < 10; i++){}

}

● As variáveis i e id agora pertencem ao escopo da função solucao, e não mais são globais.

Pera aí!E se eu quiser criar variáveis em um escopo compartilhado entre múltiplas functions, mas não quiser fazê-las globais?!?!

(function(){

var nome = "Joãozin";

function digaOla(){

console.log("Olá " + nome); }

function digaTchau(){ console.log("Tchau " + nome); }

digaOla(); digaTchau();

})();

CHUCK NORRIS APROVA!

● Com o uso de uma função anônima, a variável nome foi declarada num escopo acessível às funções digaOla e digaTchau, sem precisar para isso tornar-se global.

//blá blá blá blá blá//blá blá blá/*blá blá*/

#4

var i++;//adiciona 1 a i

var m = "read";//atribui "read" a m

//Autoriza uma ação

function autorizarAcao(){

...

var acao = getAcao(); //seta a ação

var url = "/a=" + acao; //seta a URL

...

}

//Autoriza uma ação

function autorizarAcao(){

...

var acao = getAcao(); //seta a ação

var url = "/a=" + acao; //seta a URL

...

}Plaquê issú?!?

● Seu código deve ser claro, se você precisar fazer uso constate de comentários em seus códigos, há algo de muito errado com eles.

Duas perguntas a se fazer antes de escrever um comentário

1. É uma informação REALMENTE NECESSÁRIA?!?!?!?

1. É uma informação REALMENTE NECESSÁRIA?!?!?!?

Caso a resposta para a pergunta acima seja sim, considere a segunda:

1. É uma informação REALMENTE NECESSÁRIA?!?!?!?

Caso a resposta para a pergunta acima seja sim, considere a segunda:

2. Meu código pode ser aprimorado, e assim tornar-se claro ao ponto de ser auto-explicável?

Javascript Inline

#5

<button onclick="resetFormDefaults()">Redefinir</button>

● Mantenha seu HTML simples, ele deve conter apenas a definição de seu documento.

● Separe seu código JavaScript em arquivos à parte.

[HTML]<button id="defaults">Padrão</button>

[JS]$(document).ready(function(){ $('#defaults').click(resetFormDefaults);});

Estender prototypes de tipos nativos

#6

Estender prototypes de tipos nativos ||Estender o DOM

#6

String.prototype.format = function() {

...

}

ou :

window.screenId = "cadastro_cliente";

● Não é à prova do Futuro

● Não é à prova do Passado

● Pode induzir à confusão sobre o que é nativo e o que é custom

● Especificação Ecma não obriga o suporte

● Quer adicionar comportamento a um objeto nativo? Envolva-o com um wrapper

Jogo bala!

Evite:

Evite:● new Array(), use []

Evite:● new Array(), use []● new Object(), use {}

Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use !!expressao

Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use !!expressao● if(!par){...}, use if(par === false){...}

Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use !!expressao● if(!par){...}, use if(par === false){...}● Abusar de funções anônimas em callbacks

Deprecated

● Uso do with

● Uso do with● Uso do atributo language na tag script

● Uso do with● Uso do atributo language na tag script● Envolver código javascript entre comentários HTML

● Uso do with● Uso do atributo language na tag script● Envolver código javascript entre comentários HTML● document.write, o DOM está aí para ser usado

Final Tips

● Lint your code!

● Lint your code!● Use uma ferramenta de code inspection (Firebug, Chrome Developer Tools)

● Lint your code!● Use uma ferramenta de code inspection (Firebug, Chrome Developer Tools)● Use uma library, não reinvente a roda

● Lint your code!● Use uma ferramenta de code inspection (Firebug, Chrome Developer Tools)● Use uma library, não reinvente a roda● Use o Google Hosted Libraries

Perguntas?

Conheça-nos

dev.grupofortes.com.br

@DevGrupoFortes