Your SlideShare is downloading. ×
0
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Antipatterns Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Antipatterns Javascript

505

Published on

Palestra sobre Anti-patterns Javascript

Palestra sobre Anti-patterns Javascript

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
505
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JAVASCRIPTANTIPATTERNS ALCIDES QUEIROZ
  • 2. JAVASCRIPTANTIPATTERNS+ MÁS-PRÁTICAS E CILADAS! ALCIDES QUEIROZ
  • 3. @alcidesqueirozalcidesqueiroz.com
  • 4. != @alcidesqueirozalcidesqueiroz.com
  • 5. Antes, algumasquestões:
  • 6. Quem aqui já trabalha com desenvolvimento?
  • 7. Quem aqui já trabalha com desenvolvimento? Quem programa em JavaScript?
  • 8. Quem aqui já trabalha com desenvolvimento? Quem programa em JavaScript? Quem conhece os principais design patterns?
  • 9. Anti...what?!
  • 10. “ 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
  • 11. ● Termo cunhado por AndrewKoenig em 1995, inspirado noLivro do GoF● Popularizado em 1998 com olivro AntiPatterns - RefactoringSoftware, Architectures, andProjects in Crisis
  • 12. .Indo direto ao
  • 13. #1Definir os métodosde uma classedentro de seuconstrutor
  • 14. function Pessoa(nome){ this.nome = nome; this.apresentarSe = function(){ return "Meu nome é " + this.nome; }}
  • 15. ● Para cada chamada aoconstrutor, uma nova instânciado método apresentarSe écriada!
  • 16. Live Code!
  • 17. function Pessoa(nome){ this.nome = nome;}Pessoa.prototype.apresentarSe = function(){ return "Meu nome é " + this.nome;}
  • 18. ● Agora, todos os objetos daclasse Pessoa compartilham deuma única instância do métodoapresentarSe
  • 19. #2Fazer comparaçõesnão-estritas
  • 20. Qual o valor lógico das expressões abaixo?1 == "1"[[1 * 1]] == true" nt " == false4567 != "4567"
  • 21. TOMA!1 == "1" → true[[1 * 1]] == true → true" nt " == false → true4567 != "4567" → false O.M.G!
  • 22. ● Em comparações feitas com osoperadores == e !=, é feitacoersão implícita de tipo,resultando nesse tipo debizarrice:[ [ ], null, , null ] == ",,,"//true!
  • 23. AÍ SIM!1 === "1" → false[[1 * 1]] === true → false" nt " === false → false4567 !== "4567" → true
  • 24. ● Em Javascript, que é umalinguagem de tipagem fraca,onde variáveis são interpretadasde forma diferente dependendodo contexto, preferivelmente useos operadores === e !==.
  • 25. #3Poluir o namespaceglobal
  • 26. <script> var i = 0; function explorarAntiPattern(){ id = 321; for(i = 0; i < 10; i++){} } explorarAntiPattern(); console.log(i);//10 console.log(id);//321</script>
  • 27. ●Declarar variáveis sem o uso dakeyword var, ou fora do escopode uma function, polui onamespace globaldesnecessariamente
  • 28. function solucao(){ var id = 321; for(var i = 0; i < 10; i++){}}
  • 29. ●As variáveis i e id agorapertencem ao escopo da funçãosolucao, e não mais são globais.
  • 30. Pera aí! E se eu quiser criar variáveisem um escopo compartilhadoentre múltiplas functions, masnão quiser fazê-las globais?!?!
  • 31. (function(){ var nome = "Joãozin"; function digaOla(){ console.log("Olá " + nome); } function digaTchau(){ CHUCK NORRIS console.log("Tchau " + nome); APROVA! } digaOla(); digaTchau();})();
  • 32. ● Com o uso de uma funçãoanônima, a variável nome foideclarada num escopo acessívelàs funções digaOla e digaTchau,sem precisar para isso tornar-seglobal.
  • 33. #4//blá blá blá blá blá//blá blá blá/*blá blá*/
  • 34. var i++;//adiciona 1 a ivar m = "read";//atribui "read" a m
  • 35. //Autoriza uma açãofunction autorizarAcao(){ ... var acao = getAcao(); //seta a ação var url = "/a=" + acao; //seta a URL ...}
  • 36. //Autoriza uma açãofunction autorizarAcao(){ ... var acao = getAcao(); //seta a ação var url = "/a=" + acao; //seta a URL ...} Plaquê issú?!?
  • 37. ● Seu código deve ser claro, sevocê precisar fazer uso constatede comentários em seus códigos,há algo de muito errado comeles.
  • 38. Duas perguntas a se fazer antes de escrever um comentário
  • 39. 1. É uma informação REALMENTENECESSÁRIA?!?!?!?
  • 40. 1. É uma informação REALMENTENECESSÁRIA?!?!?!?Caso a resposta para a perguntaacima seja sim, considere asegunda:
  • 41. 1. É uma informação REALMENTENECESSÁRIA?!?!?!?Caso a resposta para a perguntaacima seja sim, considere asegunda:2. Meu código pode seraprimorado, e assim tornar-se claroao ponto de ser auto-explicável?
  • 42. #5Javascript Inline
  • 43. <buttononclick="resetFormDefaults()">Redefinir</button>
  • 44. ● Mantenha seu HTML simples,ele deve conter apenas adefinição de seu documento.●Separe seu código JavaScriptem arquivos à parte.
  • 45. [HTML]<button id="defaults">Padrão</button>[JS]$(document).ready(function(){ $(#defaults).click(resetFormDefaults);});
  • 46. #6Estender prototypes detipos nativos
  • 47. #6Estender prototypes detipos nativos ||Estender o DOM
  • 48. String.prototype.format = function() {...}ou :window.screenId = "cadastro_cliente";
  • 49. ● Não é à prova do Futuro● Não é à prova do Passado● Pode induzir à confusão sobre oque é nativo e o que é custom● Especificação Ecma não obrigao suporte
  • 50. ● Quer adicionar comportamentoa um objeto nativo? Envolva-ocom um wrapper
  • 51. Jogo bala!
  • 52. Evite:
  • 53. Evite:● new Array(), use []
  • 54. Evite:● new Array(), use []● new Object(), use {}
  • 55. Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use!!expressao
  • 56. Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use!!expressao● if(!par){...}, useif(par === false){...}
  • 57. Evite:● new Array(), use []● new Object(), use {}● Boolean(expressao), use!!expressao● if(!par){...}, useif(par === false){...}● Abusar de funções anônimas emcallbacks
  • 58. Deprecated
  • 59. ● Uso do with
  • 60. ● Uso do with● Uso do atributo languagena tag script
  • 61. ● Uso do with● Uso do atributo languagena tag script● Envolver código javascript entrecomentários HTML
  • 62. ● Uso do with● Uso do atributo languagena tag script● Envolver código javascript entrecomentários HTML● document.write, o DOMestá aí para ser usado
  • 63. Final Tips
  • 64. ● Lint your code!
  • 65. ● Lint your code!● Use uma ferramenta de codeinspection (Firebug, ChromeDeveloper Tools)
  • 66. ● Lint your code!● Use uma ferramenta de codeinspection (Firebug, ChromeDeveloper Tools)● Use uma library, não reinventea roda
  • 67. ● Lint your code!● Use uma ferramenta de codeinspection (Firebug, ChromeDeveloper Tools)● Use uma library, não reinventea roda● Use o Google Hosted Libraries
  • 68. Perguntas?
  • 69. Conheça-nosdev.grupofortes.com.br @DevGrupoFortes

×