Comment AngularJS sait-il que les variables changent? Comment fonctionne la vérification sale AngularJS?
Je lisais un article pour comprendre un peu plus le fonctionnement d’AngularJS.
Un des termes que je n'ai pas compris est Dirty Checking.
C'est quoi exactement? Cela ressemble au modèle Observer mais apparemment, c'est mieux.
Pouvez-vous m'aider à comprendre ceci s'il vous plaît?
EDIT: il peut également être utile pour les personnes qui veulent en savoir plus à ce sujet de regarder cette vidéo de swiip sur NgEurope il y a quelques années.
De ce lien :
Angular définit le concept d'un cycle appelé digestion. Ce cycle peut être considéré comme une boucle au cours de laquelle Angular vérifie si toutes les variables observées par toutes les variables surveillées ont été modifiées. Donc, si vous avez défini le paramètre $ scope.myVar dans votre contrôleur et cette variable a été marquée comme étant surveillée, alors vous dites explicitement à Angular de surveiller les modifications sur myVar à chaque itération de la boucle.
Ce "digest" est également appelé "vérification en blanc", car, d'une certaine manière, il analyse la portée des modifications. Je ne peux pas dire si c'est pour le meilleur ou pour le pire que le modèle observable. Cela dépend de vos besoins.
Quelques liens:
Processus de vérification angulaire du mécanisme de vérification.
La vérification sale est un processus simple qui se résume à un concept très basique: elle vérifie si une valeur a été modifiée mais n’a pas encore été synchronisée dans l’application.
Notre Angular application garde une trace des valeurs des montres actuelles. Angular affiche la liste de surveillance $, et si la valeur mise à jour n’a pas changé depuis le ancienne valeur, elle continue dans la liste. Si la valeur a changé, l’application enregistre la nouvelle valeur et continue dans la liste $ watch.
Qu'est-ce que le "dirty dirty"?
Le processus de vérification de chaque montre pour détecter les modifications est appelé vérification incorrecte. Il pourrait y avoir deux scénarios
Premier -
- Obtenir une montre de la liste
- Vérifier si l'article a été changé
- S'il n'y a pas de changement dans l'article alors
- Aucune action entreprise, passez à l'élément suivant de la liste de surveillance
Deuxième -
- Obtenir une montre de la liste
- Vérifier si l'article a été changé
- S'il y a un changement dans un article
- DOM doit être mis à jour, retour à la boucle de digestion
Dans le second cas, la boucle continue jusqu'à ce que la boucle entière ne soit pas modifiée. Et une fois terminé, DOM est mis à jour si nécessaire.
Juste en modifiant une réponse précédente ...
Angular a la notion de ‘cycle de digestion’. Vous pouvez le considérer comme une boucle. Dans lequel Angular vérifie s'il y a des modifications dans toutes les variables observées par toutes les $ scopes ( en interne, les fonctions $ watch () et $ apply () sont se lier avec chaque variable définie sous $ scope ).
Donc, si vous avez défini $ scope.myVar dans votre contrôleur (cela signifie que cette variable "myVar" a été marquée comme étant surveillée), vous indiquez explicitement Angular) pour surveiller les modifications apportées à "myVar" dans Ainsi, lorsque la valeur de 'myVar' change, chaque fois que $ watch () remarque et exécute $ apply () pour appliquer les modifications dans DOM.
Ce "Digest" s'appelle également "vérification incorrecte", car il analyse en quelque sorte l'étendue des modifications. Comme toutes les variables surveillées sont dans une seule boucle (cycle de résumé), toute modification de valeur d'une variable oblige à réaffecter les valeurs d'autres variables surveillées dans DOM.
PROS: C'est la manière dont Angular permet la liaison de données bidirectionnelle.
CONS: S'il y a plus de variables surveillées dans une seule page (> 2000–3000), vous risquez de constater un décalage lors du chargement de la page. (Mais je dirais s'il y a autant de "variables surveillées" dans une seule page, c’est une mauvaise conception de page: p).
Il y a d'autres inconvénients, ainsi que des solutions de contournement également: D
J'ai lu un excellent article sur la vérification en mémoire cet article de blog . Il y avait aussi ceci SO réponse
TLDR; version
Lorsque le cycle $ digest commence, les observateurs vérifient toute modification apportée au modèle de portée et s’il en existe (la modification peut également provenir d’un domaine non angulaire), les fonctions d’écoute correspondantes sont exécutées. Ceci exécutera à nouveau la boucle $ digest et vérifie si le modèle de portée a été modifié (la fonction d’écoute peut également modifier le modèle de portée).
Globalement, le cycle $ digest sera exécuté deux fois, même si l’auditeur ne change pas le modèle ou s’il n’atteint pas le nombre maximal de boucles de 10.
La vérification sale vérifiera tout changement dans la variable $ scope et le mettra à jour dans le DOM. Ceci est fait par angular js, vous pouvez également mettre en oeuvre une vérification en blanc par vos propres moyens.