Mécanisme de vérification sale d'AngularJS et utilisation merveilleuse de $timeout

Cet article présente principalement l'explication détaillée duAngularJSmécanisme de vérification sale et la merveilleuse utilisation de $timeout est l'un des mécanismes de base d'Angular. C'est une partie importante de la réalisation de deux. -way et le mode MVVM, ceux qui sont intéressés peuvent en apprendre davantage sur la

||La boucle d'événements du navigateur et le MVW d'Angular

"Dirty check" est. l'un des mécanismes de base d'Angular First, il constitue une base importante pour réaliser la liaison bidirectionnelle et le mode MVVM.

Angular convertit la liaison bidirectionnelle en un groupe d'expressions de surveillance, puis vérifie récursivement si les résultats de ces expressions de surveillance ont changé. Si tel est le cas, exécutez l'observateur correspondant. fonction. Lorsque la valeur du modèle ne change plus, plus aucune fonction d'observateur ne sera déclenchée et un cycle de résumé complet se terminera.

Parce que nous pouvons développer rapidement des programmes NodeJS en utilisant le même langage et le même modèle d'événement sans changer notre façon de penser en matière de programmation, NodeJS est rapidement devenu populaire, JavaScript full-stack Il devient également de plus en plus populaire.

Nous entendons souvent dire qu'Angular est un framework MV* En effet, Angular étend le modèle d'événement du navigateur et établit son propre contexte.

||La fonction $watch dans Angular

L'expression watch est très flexible : elle peut être une fonction ou un nom de propriété sur $scope, elle peut aussi être une expression sous la forme de chaîne. Le nom ou l'expression de l'attribut sur $scope sera finalement analysé par le service $parse dans une fonction correspondante pour obtenir la valeur de l'attribut.

Toutes les fonctions watcher seront insérées dans la tête du tableau scope.$$watchers par la fonction unshift pour une utilisation ultérieure par $digest.

Enfin, la fonction $watch renverra une fonction anti-enregistrement. Une fois que nous l'appellerons, nous pourrons supprimer l'observateur qui vient d'être enregistré.

Il convient de noter qu'Angular n'utilise pas la fonction angulaire.equals() pour une comparaison approfondie par défaut, car il est plus rapide d'utiliser la comparaison ===, il compare donc des tableaux ou des objets. en cours de vérification est la référence. Il en résulte que deux expressions ayant exactement le même contenu sont jugées différentes. Si une comparaison approfondie est requise, le troisième paramètre facultatif objectEquality doit être explicitement défini sur true, tel que $watch('someExp', function(){...}, true).

Angular fournit également les méthodes $watchGroup et $watchCollection pour surveiller des tableaux ou un groupe de propriétés.

||La fonction $digest dans Angular

Comme mentionné précédemment, Angular étend la boucle d'événements du navigateur.

Lorsque l'événement transmis par l'instruction d'événement sur la vue est accepté, le contexte d'Angular sera changé pour répondre à de tels événements, et la boucle $digest sera déclenchée.

La boucle $digest se compose en fait de deux boucles while. Il s'agit de : la file d'attente des opérations asynchrones qui gère $evalAsync et la file d'attente des observateurs qui gère $watch.

Lorsque la boucle $digest se produit, elle parcourra toutes les fonctions d'observateurs enregistrées sur le $scope actuel et tous ses $scopes enfants.

Le parcours de toutes les fonctions de l'observateur est appelé un sale contrôle. Après avoir effectué une série de vérifications sales, si la valeur surveillée par un observateur a changé, une autre série de vérifications sales sera effectuée jusqu'à ce que toutes les fonctions de l'observateur signalent que les valeurs qu'elles surveillent n'ont plus changé.

Lorsque la boucle $digest se termine, les résultats du changement de modèle sont mis à jour dans le DOM. Cela permet de fusionner plusieurs mises à jour et évite les propriétés DOM fréquentes.

Il convient de noter qu'avant la fin du cycle $digest, si plus de 10 tours de vérifications sales sont dépassés, une exception sera levée pour empêcher les vérifications sales de boucler à l'infini.

Quand entrera-t-il dans ce contexte angulaire et déclenchera-t-il le « mécanisme de vérification sale » ? Cette question est très importante, et c’est aussi un sujet problématique.

Chaque événement qui entre dans le contexte angulaire exécutera une boucle $digest. Pour le contrôle interactif de formulaire surveillé par ngModel, chaque fois qu'un caractère est saisi, une boucle est déclenchée pour vérifier la fonction $watcher afin que la vue puisse être mise à jour à temps. Après Angular 1.3, vous pouvez utiliser ngModelOptions pour la configuration afin de modifier la méthode de déclenchement par défaut.

||$apply

$digest dans Angular est une fonction interne, qui ne doit pas être utilisée directement dans le code d'application normal appelle-le. Si vous souhaitez le déclencher activement, vous devez appeler la fonction scope.$apply, qui est une interface publique commune qui déclenche le « mécanisme de vérification sale » d'Angular.

Il est à noter qu'Angular ne peut gérer que les méthodes de déclenchement de comportement qu'il connaît, mais ne peut pas couvrir tous les scénarios de fonctionnement d'Angular. C'est pourquoi, lorsque nous encapsulons le plug-in jQuery tiers, nous ne pouvons pas mettre à jour automatiquement la vue, mais nous devons appeler manuellement $scope.$apply.

Lors de l'intégration du plug-in jquery, des erreurs de digestion en cours surviennent parfois. Si le bogue ne peut toujours pas être résolu après l'avoir éliminé, vous pouvez envisager d'utiliser $timeout pour le résoudre.

La merveilleuse utilisation de $timeout

Si les variables liées à l'interface sont modifiées dans la tâche retardée, alors window.setTimeout ne déclenchera pas le "dirty check" pour mettre à jour l'interface de l'interface utilisateur. Vous pensez peut-être : l’ajout de $scope.$apply résoudra le problème. Oui, cela peut résoudre le problème de mise à jour de l'interface utilisateur, mais vous pouvez rencontrer un autre problème :

Erreur : $digest déjà en cours

Comment ça se passe ? sur? Oh, Angular effectue une "vérification sale" en interne. Un programmeur intelligent a intelligemment écrit le morceau de code suivant pour résoudre ce problème :

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
}

Dans le code, lors de l'exécution d'Avant le apply, il vérifiera d'abord si Angular effectue une "vérification sale" en interne. Si tel est le cas, exécutez la fonction directement sans $apply, sinon, si la vérification sale n'est pas démarrée, alors $apply exécutera la fonction. Haha, une solution « parfaite », n'est-ce pas ?

Veuillez noter que l'auteur a ajouté des guillemets autour du mot parfait ci-dessus. Angular a un service $timeout intégré pour nous, qui est implémenté par Angular encapsulant javascript natif window.setTimeout.

$timeout a de nombreuses utilisations merveilleuses, mais veillez à ne pas en abuser. Implémenter la fonction apply avec $timeout ne devrait pas être notre première solution. La première solution devrait toujours être d'utiliser la version construite d'Angular. -dans les instructions.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script House.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!