2

Como funciona por debaixo dos panos o data-binding do Angular e como ele consegue atualizar o HTML de forma tão rápida um input para a declaração com {{}} e não só no Angular, mas também em outros casos como EmberJS. Sei que ele usa o dirty-checking, mas como exatamente funciona esses dois casos?

1 Resposta 1

4

Primeiro responderei quanto ao dirty-checking, no caso do angular, uma vez que um objeto esteja atrelado ao escopo, todos os valores do estado atual do objeto são guardados e o objeto é "marcado". A cada ciclo de $digest, o angular verifica as alterações e replica para todos os lugares que se referenciavam para a mesma variável no escopo.

Quando você utiliza o {{expressao}} no angular, o que ele faz é marcar esta posição de substituição na tela, para que após a o ciclo de $digest, se houver alteração, ela seja aplicada na expressão.

Quanto ao EmberJS, o mesmo utiliza "change listeners" que fazem uma análise da alteração apenas, e não de todos os objetos demarcados no escopo, isso traz um grande ganho em relação a desempenho que vou falar abaixo.

Então, posto os dois conceitos, qual a diferença e no que isso implica?

No caso no Angular, todas os atributos contidos são comparados com suas respectivas versões originais para dizer se algo foi mudado ou não, isso é bom no aspecto de que tudo foi verificado, é uma comparação, não tem como dar errado, por outro lado, ela é ruim em performance. Quando uma mudança é encontrada, o angular se encarrega de disparar efetivamente o evento informando que aquilo foi alterado, e os listeners na tela efetuam a atualização.

No caso do EmberJs, uma alteração dispara um evento para atualização nos pontos específicos da aplicação, não é necessário verificar se algo mudou, pois já existe um listener que é avisado quando isso acontece. Isso claramente implica em uma melhoria de performance. A questão aqui está no suporte ao navegador, que nem sempre é feito da mesma forma.

Caso queira extender um pouco mais a questão, deixo este link que além de explicar sobre a técnica utiliza no Angular e no Ember, ainda explica sobre o React: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

2
  • O artigo linkado foi adicionado ao meu pocket para uma leitura com calma. Mas a resposta está excelente. Obrigado.
    – flpms
    Commented 12/11/2015 às 18:33
  • Caso tenha alguma dúvida adicional, não deixe de complementar a questão. Commented 12/11/2015 às 18:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .