javascript - example - que es angular en programacion

¿Con qué frecuencia se ejecuta el ciclo de digestión de AngularJS?

Question

Al analizar los méritos de AngularJS, el enlace de datos bidireccional a menudo se promociona como un beneficio importante de Angular sobre otros marcos JS. Excavando más profundo , la documentación sugiere que este proceso se realiza a través de la comprobación sucia en lugar de a través de medidas orientadas a eventos. Al principio, parece que el bucle digest funciona haciendo que un método se dispare en segundo plano a intervalos periódicos, verificando todos los $watch durante cada ciclo. Sin embargo, leyendo más, parece que el loop digest es en realidad desencadenado por rootScope.digest() , que a su vez es activado por $.apply , que a su vez es activado por un evento (!), Como un evento onClick llamado a través de ng-click .

¿Pero como puede ser ésto? Pensé que Angular no usa oyentes de cambio . Entonces, ¿cómo funciona realmente el ciclo de digestión? ¿Angular automáticamente inicia el ciclo de digestión internamente, o el ciclo de digestión se desencadena por eventos? Si el ciclo digest se ejecuta automáticamente, ¿con qué frecuencia se ejecuta?

Algunos puntos de aclaración:

• No estoy preguntando cómo se ejecuta el ciclo digest cuando se vincula manualmente a los cambios. En este caso, si desea forzar un ciclo de resumen, puede hacerlo llamando a $.apply()
• Tampoco estoy preguntando qué tan seguido se ejecuta el ciclo de digestión en respuesta a los eventos del usuario. Por ejemplo, si ng-model está en un cuadro de entrada, Angular iniciará un ciclo de resumen cuando un usuario comience a escribir. La parte confusa es que para saber que un usuario estaba escribiendo, ¿Angular no usa un evento basado en KeyUp en alguna parte?
• Ya sé que hay un límite de 10 ciclos máximo por ciclo de digestión. Mi pregunta es menos sobre el número de ciclos por ciclo de digestión, sino más bien el número de ciclos de digestión que se ejecutan, por ejemplo, por segundo.
• Preguntas de bonificación: ¿cómo se relaciona el ciclo de digestión con el ciclo de evento de JavaScript? ¿El bucle de eventos JS se ejecuta periódicamente en segundo plano? ¿El ciclo de resumen es lo mismo que el ciclo de evento, pero solo en el "Contexto angular"? ¿Son estas ideas totalmente diferentes?

Answer 1

Creo que esto es lo que sucede. AngularJS hizo una suposición inteligente de que los cambios de modelo ocurren solo en la interacción del usuario. Estas interacciones pueden ocurrir debido a

• Actividad del mouse (mover, hacer clic, etc.)
• Actividad del teclado (tecla arriba, tecla abajo, etc.)

Las directivas AngularJS para los eventos correspondientes ajustan la ejecución de expresión en $ scope. $ Apply como se muestra en @pixelbits en su ejemplo. Esto resulta en un ciclo de digestión.

También hay otros eventos en los que AngularJS desencadena el ciclo de resumen. $ timeout service y $ interval service son dos de esos ejemplos. El código envuelto en estos servicios también da como resultado la digest loop para ejecutarse. Puede haber algunos otros servicios / eventos que pueden provocar la ejecución de ciclos de resumen, pero estos son los principales.

Esta es la razón por la que los cambios en el modelo fuera del contexto angular no actualiza los relojes y las fijaciones. Entonces uno necesita llamar explícitamente $ scope. $ Apply. Lo hacemos todo el tiempo cuando lo integramos con los plugins jQuery.

Answer 2

La respuesta directa corta a la pregunta principal es "NO", angular no activa automáticamente el ciclo de resumen.

Respuesta de TL; DR:

El ciclo de resumen está diseñado para ejecutar controles sucios sobre modelos de POJO asociados con instancias de alcance angular, por lo que solo debe ejecutarse cuando se puede cambiar un modelo. En una aplicación web de una sola página que se ejecuta dentro del navegador, las siguientes acciones / eventos podrían conducir a un cambio de modelo

1. Eventos DOM
2. Respuestas de XHR que activan devoluciones de llamada
3. Cambios de ubicación del navegador
4. Temporizadores (setTimout, setInterval) disparando las devoluciones de llamada

De forma correspondiente, el ciclo de resumen de disparo angular en, por ejemplo,

1. directivas de entrada + ngModel, ngClick, ngMouseOver etc.
2. $ http y $ recurso
3. $ ubicación
4. $ tiempo de espera

Intente responder esas preguntas extra de mi entendimiento:

1. La directiva ngModel a menudo se usa con directivas de entrada angular (texto, selección, etc.) juntas, y las nuevas escucharán eventos de "cambio" y llamarán a la API $ setViewValue expuesta desde ngModelController para sincronizar el valor dom posterior. Durante el proceso de sincronización, ngModelController se asegurará de activar el ciclo de resumen.
2. el ciclo de resumen es diferente del ciclo de evento JS, el último es el concepto del tiempo de ejecución de JS (consulte la gran sesión visualizada https://www.youtube.com/watch?v=8aGhZQkoFbQ ) que se ejecuta en la cola de eventos y elimina el evento consumido de la cola de forma automática, pero el ciclo de digestión nunca quita el reloj de su lista de observación a menos que lo desestime explícitamente.
3. el número de bucles de resumen por segundo depende de la eficacia de todas las devoluciones de llamada de reloj que se ejecutan a través del bucle. Si un código incorrecto tardó un segundo en finalizar, este ciclo de resumen costaría más de 1 segundo.

Por lo tanto, algunas prácticas clave para evitar dificultades de rendimiento angular son

1. La devolución de llamada de reloj debe codificarse de la forma más simple / eficiente posible, por ejemplo, separar el código de algoritmo complicado para, por ejemplo, subprocesos de trabajo
2. Retire un reloj proactivamente si ya no se usa
3. Prefiere llamar $ scope. $ Digest () en lugar de $ scope. $ Apply () si corresponde, $ digest () solo ejecuta parte del árbol de alcance y asegura que los modelos asociados bajo el subárbol se reflejen para ver. Pero $ apply () se ejecutará contra todo el árbol de alcance, se repetirá a través de más relojes.

Answer 3

Los resúmenes angulares se desencadenan, no ocurren a través de las encuestas.

El código se ejecuta, después de que el código está hecho, angular desencadena un resumen.

Ejemplo:

 element.on(''click'', function() {
     $scope.$apply(function() { 
         // do some code here, after this, $digest cycle will be triggered
     });
 });

Angular también activará $ digest después de la fase de compilación / enlace:

Compile > Link > Digest

¿Y en cuanto a cuántos ciclos de digestión se activan? Depende de cuán pronto se estabilicen las variables de alcance. Por lo general, se necesitan al menos 2 ciclos para determinar eso.