Personalmente, creo que debe comprender bien el mecanismo operativo de Angularjs para que pueda evitar caer en el pozo tanto como sea posible. En este artículo, haré un análisis más claro y detallado de lo que AngularJS ha hecho después de comenzar en función de la información en línea y mi propia comprensión.
Primero, echemos un vistazo a lo que Angular ha hecho paso a paso.
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <png-init = "name = 'world'"> hola {{name}}! </p> </body> </html>Cuando usa su navegador para acceder a index.html, el navegador hace las siguientes cosas a su vez:
Todo el proceso puede representarse con esta imagen:
Ok, a través del ejemplo anterior, podemos entender cómo AngularJS hace una página paso a paso. Entonces, ¿cómo interactúa con el bucle de eventos del navegador? ¿O cómo interactúas con los usuarios? Hablando brevemente, se divide principalmente en tres etapas:
1. El bucle del evento del navegador está esperando que se active el evento, incluida la interacción del usuario, eventos de tiempo o eventos de red (como respuestas del servidor, etc.);
2. Una vez que se active un evento, ingresará al contexto de JavaScript, y el DOM generalmente se modifica a través de funciones de devolución de llamada;
3. Después de ejecutar la función de devolución de llamada, el navegador representa la nueva página de acuerdo con el nuevo DOM.
Como se muestra en la figura a continuación, el proceso de interacción se compone principalmente de varios ciclos:
AngularJS modifica los flujos de trabajo generales de JavaScript y proporciona su propio mecanismo de manejo de eventos. Esto separa el contexto de JavaScript en dos partes, una es el contexto nativo de JavaScript, y el otro es el contexto AngularJS. Solo las operaciones en el contexto de AngularJS pueden disfrutar de la unión de datos angular, manejo de excepciones, observación de propiedades y otros servicios. Sin embargo, Angular no se ignora para los extraños (como operaciones nativas de JavaScript, devoluciones de llamada de eventos personalizadas, bibliotecas de terceros, etc.). Puede usar la función $ Apply () proporcionada por AngularJS para envolver a estos extraños en el contexto de AngularJS, para que Angular pueda sentir los cambios que han realizado.
A continuación, echemos un vistazo a cómo funcionan estos ciclos durante el proceso de interacción.
1. En primer lugar, el navegador estará en el estado de escucha. Una vez que se activa un evento, se agregará a una cola de eventos, y los eventos en la cola del evento se ejecutarán uno por uno.
2. Si el evento en la cola de eventos está envuelto por $ Aplicar (), ingresará al contexto de AngularJS. El fn () aquí es la función que queremos ejecutar en el contexto de AngularJS.
3. AngularJS ejecutará la función fn (). Por lo general, esta función cambiará algunos estados de la aplicación.
4. Entonces AngularJS entrará en el bucle $ Digest compuesto por dos pequeños bucles. Se utiliza un bucle para procesar la cola $ Evalasync (utilizada para programar algunas operaciones que deben procesarse antes de representar la vista, generalmente implementada a través de SetTimeOut (0), que será más lento y puede causar visión de fase). Se utiliza un bucle para procesar la lista de vigilancia $ (una colección de algunas expresiones. Una vez que ocurre un cambio, se llamará a la función $ reloj). El bucle $ Digest se mantendrá iterando cuando sepa que la cola $ Evalasync está vacía y la lista de vigilancia $ también está vacía, es decir, el modelo ya no cambiará.
5. Una vez que termina el bucle $ Digest de AngularJS, toda la ejecución dejará el contexto de AngularJS y JavaScript, y luego el navegador volverá a renderizar la vista después de que se cambien los datos.
A continuación, analicemoslo en combinación con el código:
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <input ng-model = "name"> <p> hola {{name}}! </p> </body> </html>La única diferencia entre este código y el código anterior es que hay una entrada para recibir la entrada del usuario. Al acceder a este archivo HTML con un navegador, la directiva NG-Model en la entrada vinculará el evento de llave a la entrada, y recomendará un reloj $ a la variable de nombre para recibir notificación del cambio de valor variable. Durante la fase interactiva, la siguiente serie de eventos ocurre principalmente:
1. Cuando el usuario presiona una tecla en el teclado (por ejemplo, a), se activa el evento de teclado en la entrada;
2. La instrucción sobre la entrada detecta el cambio en el valor en la entrada y las llamadas $ aplicar ("name = 'a'") para actualizar el modelo en el contexto AngularJS;
3. Angularjs asigna 'A' para nombrar;
4. Comienza el bucle $ digest, la lista de vigilancia $ detecta un cambio en el valor del nombre y luego notifica la expresión {{name}} para actualizar el DOM;
5. Salga del contexto de AngularJS, y luego salga del evento Keydown en el contexto de JavaScript;
6. El navegador vuelve a renderizar la vista.
Lo anterior es una recopilación de información sobre el principio de funcionamiento de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo a este sitio!