Antipatterns Javascript

711 visualizações

Publicada em

Palestra sobre Anti-patterns Javascript

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
711
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Antipatterns Javascript

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

×