Antipatterns Javascript
-
Upload
alcides-queiroz -
Category
Technology
-
view
751 -
download
1
description
Transcript of Antipatterns Javascript
![Page 1: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/1.jpg)
JAVASCRIPTANTIPATTERNS
ALCIDES QUEIROZ
![Page 2: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/2.jpg)
JAVASCRIPTANTIPATTERNS
ALCIDES QUEIROZ
+ MÁS-PRÁTICAS E CILADAS!
![Page 3: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/3.jpg)
@alcidesqueirozalcidesqueiroz.com
![Page 4: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/4.jpg)
@alcidesqueirozalcidesqueiroz.com
!=
![Page 5: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/5.jpg)
Antes, algumas
questões:
![Page 6: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/6.jpg)
Quem aqui já trabalha com desenvolvimento?
![Page 7: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/7.jpg)
Quem aqui já trabalha com desenvolvimento?
Quem programa em JavaScript?
![Page 8: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/8.jpg)
Quem aqui já trabalha com desenvolvimento?
Quem programa em JavaScript?
Quem conhece os principais design
patterns?
![Page 9: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/9.jpg)
Anti...
what?!
![Page 10: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/10.jpg)
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
![Page 11: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/11.jpg)
● 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
![Page 12: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/12.jpg)
Indo direto ao.
![Page 13: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/13.jpg)
Definir os métodos de uma classe dentro de seuconstrutor
#1
![Page 14: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/14.jpg)
function Pessoa(nome){ this.nome = nome;
this.apresentarSe = function(){
return "Meu nome é " + this.nome;
}}
![Page 15: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/15.jpg)
● Para cada chamada ao construtor, uma nova instância do método apresentarSe é criada!
![Page 16: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/16.jpg)
Live Code!
![Page 17: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/17.jpg)
function Pessoa(nome){ this.nome = nome;}
Pessoa.prototype.apresentarSe = function(){ return "Meu nome é " + this.nome; }
![Page 18: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/18.jpg)
● Agora, todos os objetos da classe Pessoa compartilham de uma única instância do método apresentarSe
![Page 19: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/19.jpg)
Fazer comparaçõesnão-estritas
#2
![Page 20: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/20.jpg)
Qual o valor lógico das expressões abaixo?1 == "1"
[[1 * 1]] == true
" \n\t " == false
4567 != "4567"
![Page 21: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/21.jpg)
1 == "1" true→
[[1 * 1]] == true true→
" \n\t " == false true→
4567 != "4567" false→
O.M.G!
TOMA!
![Page 22: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/22.jpg)
● Em comparações feitas com os operadores == e !=, é feita coersão implícita de tipo, resultando nesse tipo de bizarrice:[ [ ], null, '', null ] == ",,,"
//true!
![Page 23: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/23.jpg)
1 === "1" false→
[[1 * 1]] === true false→
" \n\t " === false false→
4567 !== "4567" true→
AÍ SIM!
![Page 24: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/24.jpg)
● 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 !==.
![Page 25: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/25.jpg)
Poluir o namespace global
#3
![Page 26: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/26.jpg)
<script>
var i = 0;
function explorarAntiPattern(){
id = 321;
for(i = 0; i < 10; i++){}
}
explorarAntiPattern();
console.log(i);//10
console.log(id);//321
</script>
![Page 27: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/27.jpg)
● Declarar variáveis sem o uso da keyword var, ou fora do escopo de uma function, polui o namespace global desnecessariamente
![Page 28: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/28.jpg)
function solucao(){
var id = 321;
for(var i = 0; i < 10; i++){}
}
![Page 29: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/29.jpg)
● As variáveis i e id agora pertencem ao escopo da função solucao, e não mais são globais.
![Page 30: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/30.jpg)
Pera aí!E se eu quiser criar variáveis em um escopo compartilhado entre múltiplas functions, mas não quiser fazê-las globais?!?!
![Page 31: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/31.jpg)
(function(){
var nome = "Joãozin";
function digaOla(){
console.log("Olá " + nome); }
function digaTchau(){ console.log("Tchau " + nome); }
digaOla(); digaTchau();
})();
CHUCK NORRIS APROVA!
![Page 32: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/32.jpg)
● 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.
![Page 33: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/33.jpg)
//blá blá blá blá blá//blá blá blá/*blá blá*/
#4
![Page 34: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/34.jpg)
var i++;//adiciona 1 a i
var m = "read";//atribui "read" a m
![Page 35: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/35.jpg)
//Autoriza uma ação
function autorizarAcao(){
...
var acao = getAcao(); //seta a ação
var url = "/a=" + acao; //seta a URL
...
}
![Page 36: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/36.jpg)
//Autoriza uma ação
function autorizarAcao(){
...
var acao = getAcao(); //seta a ação
var url = "/a=" + acao; //seta a URL
...
}Plaquê issú?!?
![Page 37: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/37.jpg)
● 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.
![Page 38: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/38.jpg)
![Page 39: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/39.jpg)
Duas perguntas a se fazer antes de escrever um comentário
![Page 40: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/40.jpg)
1. É uma informação REALMENTE NECESSÁRIA?!?!?!?
![Page 41: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/41.jpg)
1. É uma informação REALMENTE NECESSÁRIA?!?!?!?
Caso a resposta para a pergunta acima seja sim, considere a segunda:
![Page 42: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/42.jpg)
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?
![Page 43: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/43.jpg)
Javascript Inline
#5
![Page 44: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/44.jpg)
<button onclick="resetFormDefaults()">Redefinir</button>
![Page 45: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/45.jpg)
● Mantenha seu HTML simples, ele deve conter apenas a definição de seu documento.
● Separe seu código JavaScript em arquivos à parte.
![Page 46: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/46.jpg)
[HTML]<button id="defaults">Padrão</button>
[JS]$(document).ready(function(){ $('#defaults').click(resetFormDefaults);});
![Page 47: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/47.jpg)
Estender prototypes de tipos nativos
#6
![Page 48: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/48.jpg)
Estender prototypes de tipos nativos ||Estender o DOM
#6
![Page 49: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/49.jpg)
String.prototype.format = function() {
...
}
ou :
window.screenId = "cadastro_cliente";
![Page 50: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/50.jpg)
● 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
![Page 51: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/51.jpg)
● Quer adicionar comportamento a um objeto nativo? Envolva-o com um wrapper
![Page 52: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/52.jpg)
Jogo bala!
![Page 53: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/53.jpg)
Evite:
![Page 54: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/54.jpg)
Evite:● new Array(), use []
![Page 55: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/55.jpg)
Evite:● new Array(), use []● new Object(), use {}
![Page 56: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/56.jpg)
Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use !!expressao
![Page 57: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/57.jpg)
Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use !!expressao● if(!par){...}, use if(par === false){...}
![Page 58: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/58.jpg)
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
![Page 59: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/59.jpg)
Deprecated
![Page 60: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/60.jpg)
● Uso do with
![Page 61: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/61.jpg)
● Uso do with● Uso do atributo language na tag script
![Page 62: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/62.jpg)
● Uso do with● Uso do atributo language na tag script● Envolver código javascript entre comentários HTML
![Page 63: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/63.jpg)
● 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
![Page 64: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/64.jpg)
Final Tips
![Page 65: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/65.jpg)
● Lint your code!
![Page 66: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/66.jpg)
● Lint your code!● Use uma ferramenta de code inspection (Firebug, Chrome Developer Tools)
![Page 67: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/67.jpg)
● Lint your code!● Use uma ferramenta de code inspection (Firebug, Chrome Developer Tools)● Use uma library, não reinvente a roda
![Page 68: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/68.jpg)
● 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
![Page 69: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/69.jpg)
Perguntas?
![Page 70: Antipatterns Javascript](https://reader034.fdocuments.us/reader034/viewer/2022051209/54841145b4af9f780d8b4ab1/html5/thumbnails/70.jpg)
Conheça-nos
dev.grupofortes.com.br
@DevGrupoFortes