Semana 6
HenriqueSilverio opened this issue · comments
Inicio: 23/03/2014 ~ Fim: 29/03/2014
Instruções: https://github.com/impJS/impAprendaJS/wiki/Semana-6
Observação: dúvidas recorrentes para esta semana deverão ser publicadas neste link.
| Tarefa | Status |
|---|---|
| ✔ | |
| ✔ | |
| Quiz Dinâmico III | 0% |
@osmarcs "The Flash"! Haha' parabéns de novo. :-)
Cara, estive observando seu código, e resolvi deixar aqui uma dica. Claro que por ser uma aplicação pequena, essa dica pode não fazer tanta diferença, mas acho interessante pensarmos em aplicações de larga escala, e é válido conhecermos as alternativas para utilizá-las quando for apropriado.
No método init() você executa appendChild três vezes, diretamente no elemento DOM referenciado pela variável stage.
O acesso ao DOM, bem como manipulações feitas no mesmo, é uma das tarefas mais custosas no JavaScript em questão de performance. (Pode-se encontrar mais informações sobre isso no livro "JavaScript de Alto Desempenho", escrito por Nicholas C. Zakas). E se tivéssemos mais N elementos para inserir? Fazer o "append" de todos os elementos um por um, poderia nos causar problemas com performance.
Solução alternativa? DocumentFragments. :-)
Um DocumentFragment se comporta como um "Nó" DOM sem "Pai". Podemos criar um DocumentFragment e inserir elementos filhos nele. Após isso, fazer um único "append" inserindo o DocumentFragment no DOM, e todos os filhos desse fragment, serão inseridos junto com ele.
Fiz um exemplo de como ficaria isso no seu Quiz: http://pastebin.com/qW7r1sFL.
@expalmer Maravilha! :-)
@rafasilverio Boa! Compartilhe com a galera depois. :-)
Ahaha' boa @Jessica7! É isso aí, agora falta pouco. :-)
Tranquilo @leo386386, "vamo que vamo"!
Muito bom @andersonaap, obrigado por compartilhar!
| Tarefa | Status |
|---|---|
| ✔ | |
| ✔ | |
| ✔ |
@HenriqueSilverio vlw cara 👍, sim o DocumentFragment e bem mais performático, eu ate esqueci dele, são muitas informações para absorver, já atualizei, e sempre que precisa fazer algo do tipo vou me lembrar da dica, ;).
| Tarefa | Status |
|---|---|
| Leitura do Capítulo 20 | 100% |
| Leitura do Artigo | 100% |
| Questionário Dinâmico III | 0% |
boa @osmarcs
| Tarefa | Status |
|---|---|
100% |
|
100% |
|
100% |
o @osmarcs está muito rápido
kkk
@HenriqueSilverio @osmarcs cara estou aprendendo muito vendo o código e as dicas de vocês, muito obrigado. Vou postar meu Quiz e gostaria de feedback para melhoras...valeu galera.Bom galera acabei o código, não tratei algumas coisas, mas acredito que está funcionando :/, espero seus feedbacks.
Parabéns pro @osmarcs pois estou aprendendo com código dele também kkk.
Força @Jessica7 !!!
Vamo lá @leo386386 go ahead man !!
O DocumentFragments ajudou no meu código aqui também.
Valeu (:
| Tarefa | Status |
|---|---|
| Leitura: Capitulo 20 | 100% |
| Leitura do Artigo | 100% |
| Quiz Dinâmico III | 0% |
Ainda estou finalizando quiz dinâmico, tô viva ainda!aos trancos e barrancos. :)
| Tarefa | Status |
|---|---|
| Leitura: Capitulo 20 | 100% |
| Leitura do Artigo | 100% |
| Quiz Dinâmico III Códigos | 100% |
@osmarcs parabéns estou aprendendo com seus scripts.
Pra ser sincero não pensei que ia conseguir chegar na semana 6:)
"Os desafios são impulsos para novos aprendizados!"
Desde já deixo aqui meu depoimento sobre o IMP/JS, que está me ajudando muito a usar a cuca, realmente a melhor forma de conseguirmos alcançarmos nossos objetivos é tentando conseguir desenvolver coisas novas e aprender com os amigos discutir e ler bastante o IMP/JS está sendo uma experiência e tanto.
Uma coisa que estava quebrando a cabeça é porque testei no IE8 e o localStorage não funcionou daí pesquisando vi que só roda num servidor local como wamp.
Sobre o DocumentFragment, certa vez eu fiz um teste:
http://jsperf.com/appending-options/2
veja a diferença com "trying2", acabei abandonando na época pela pressa,
e de ter tido algum problema com algum IE.