Javascript - boas práticas
-
Upload
francke-peixoto -
Category
Technology
-
view
1.287 -
download
2
description
Transcript of Javascript - boas práticas
![Page 1: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/1.jpg)
JavaScript
![Page 2: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/2.jpg)
Boas práticas
Onde começam as boas práticas?
![Page 3: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/3.jpg)
Cuma?
EM VOCÊ!
Boas práticas
![Page 4: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/4.jpg)
Comigo, blz... Mas como?
Boas práticas
![Page 5: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/5.jpg)
Pensando antes de fazer!!!!
Boas práticas
Hum....
![Page 6: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/6.jpg)
DÁ MEDO, E
U SEI!!!
!
Boas práticas
![Page 7: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/7.jpg)
DÁ MEDO, E
U SEI!!!
!
PARECE SER M
AIS D
IFIC
IL.
CONCO
RDIO!
Boas práticas
![Page 8: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/8.jpg)
Seria bom evitar...
Evitar o uso de eval ou FunctionFunction e a função a eval são operações pesadas que usados em excesso pode complicar a vida do interpretador.
Suas chamadas são convertidas de código fonte para código executável.
lento
rápido
![Page 9: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/9.jpg)
Seria bom evitar...
Evitar try-catch-, dentro de um laço de repetição Tratamento de exceção deve ser feito em um nível mais alto onde não ocorrem com freqüência.
lento
rápido
![Page 10: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/10.jpg)
Seria bom evitar...
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.
lento
rápido
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”.
![Page 11: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/11.jpg)
Seria bom evitar...
Sempre que puder, faça cache de valores variáveis
lento
rápido
Melhor maneira é para armazenar em cache o comprimento do array:
O comprimento do arr array é recalculado a cada vez que o loop repete.
![Page 12: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/12.jpg)
Seria bom evitar...
Sempre que puder, faça cache de objetos DOM
lento
rápido
![Page 13: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/13.jpg)
Seria bom evitar...
Remova referencias que não serão mais usadas.
Não muito legal
Mais legal
![Page 14: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/14.jpg)
Seria bom evitar...
Evite pegar um formulário por getElementById
Se você passar uma string em setTimeout() ou setInterval() a string será avaliada da mesma forma que o eval() que é lento.
Existe várias formas de se pegar seus campos...
![Page 15: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/15.jpg)
OO no
JavaScript!
Prototipagem
ClassesHerança
![Page 16: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/16.jpg)
OO no
JavaScript!
Prototipagem
![Page 17: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/17.jpg)
OO no
JavaScript!
Classes
![Page 18: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/18.jpg)
OO no
JavaScript!
Herança
![Page 19: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/19.jpg)
OO no
JavaScript!
Herança
![Page 20: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/20.jpg)
Vamos po-pogramar juntos?
Vamos por a mão na massa para desenvolver um CRUD em Javascript.
Encapsular e expor somente o que realmente precisa ser exposto.
function Pessoa(){
var _pessoas = [], _cadastro = function(pessoa){ console.log(pessoa); _pessoas.push(pessoa);
},_remover =function(indice){ _pessoas.splice(indice,1);}
return { C: _cadastro, R: _pessoas, D: _remover};
}console.dir(p)
![Page 21: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/21.jpg)
Como resolver problemas?
![Page 22: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/22.jpg)
Como resolver problemas?
Entender o que esta sendo feito.
![Page 23: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/23.jpg)
Como resolver problemas?
Entender o que esta sendo feito.
Pedir ajuda ao colega SEMPRE.
![Page 24: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/24.jpg)
Como resolver problemas?
Entender o que esta sendo feito.
Pedir ajuda ao colega SEMPRE.
Evitar fazer pog!
![Page 25: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/25.jpg)
Como resolver problemas?
Entender o que esta sendo feito.
Pedir ajuda ao colega SEMPRE.
Evitar fazer pog!
E quanto nada deu certo. >> go to GOOGLE.COM
![Page 26: Javascript - boas práticas](https://reader034.fdocumentos.com/reader034/viewer/2022042505/557de913d8b42ac4128b4c3c/html5/thumbnails/26.jpg)
Obrigado!Links legais:
http://www.mspc.eng.br/info/jscriptOper.shtml
http://imasters.com.br/artigo/21928/javascript/30-dicas-para-melhorar-o-desempenho-do-javascript
http://addyosmani.com/largescalejavascript/?utm_source=javascriptweekly&utm_medium=email#modtheory
http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices
http://homepage.mac.com/rue/JS_Optimization_Techniques/
http://www.milfont.org/tech/2008/01/05/heranca-no-javascript/