Explication détaillée de la méthode $apply() dans angulaireJS_AngularJS

Pour moi, complètement novice en front-end, je connais encore peu Javascript. Si je veux me lancer directement avec Angular JS, je rencontre beaucoup de résistance. Cependant, je crois que tant que nous travaillerons dur, même les conceptions anti-humaines ne poseront pas de gros problèmes.

Bon, plus de bêtises. Afin de comprendre ce qu'est Angular JS, j'ai commencé avec Scope. Alors, qu’est-ce que Scope ? Emprunter un passage au document officiel :

Copier le code Le code est le suivant :

"La portée est un objet qui fait référence au modèle d'application. C'est un contexte d'exécution pour les expressions. Les portées sont organisées selon une structure hiérarchique qui imitent la structure DOM de l'application. Les portées peuvent surveiller les expressions et propager des événements."

Après avoir lu ceci, par analogie avec d'autres langages de programmation, je pense que Scope est comme la portée du modèle de données, fournissant un contexte pour l'exécution des expressions. Comprenons-le de cette façon pour l'instant.

Caractéristiques de la portée

Ensuite, voyons quelles sont les fonctionnalités de Scope ?

Scope fournit la méthode $watch pour surveiller les modifications du modèle.
Scope fournit la méthode $apply pour propager les modifications du modèle.
La portée peut être héritée pour isoler différents composants d’application et autorisations d’accès aux propriétés.
La portée fournit un contexte pour l’évaluation des expressions.

Concernant ces quatre fonctionnalités, comme j'ai déjà étudié ActionScript, C et Java, les premier, troisième et quatrième points ne sont pas difficiles à comprendre, mais le deuxième point semble un peu flou. Conformément au principe de demander des réponses, j'ai quand même trouvé certaines choses grâce à Google. Pour les vétérans expérimentés, veuillez taper sur les briques !

Origine Javascript

Tout d'abord, à première vue, scope.apply() semble être une méthode ordinaire pour mettre à jour les liaisons. Mais réfléchissez un peu plus, pourquoi en avons-nous besoin ? Quand est-il habituellement utilisé ? Pour comprendre ces deux problématiques, il faut commencer par Javascript. Dans le code Javascript, il est exécuté dans un certain ordre. Lorsque vient le tour d'un fragment de code d'être exécuté, le navigateur n'exécutera que le fragment en cours et ne fera rien d'autre. Ainsi, parfois, certaines pages Web qui ne sont pas très bien réalisées restent bloquées après avoir cliqué sur quelque chose. Le fonctionnement de Javascript est une des raisons de ce phénomène ! Ci-dessous nous avons un morceau de code pour le ressentir :

Copier le code Le code est le suivant :

var bouton = document.getElementById('clickMe');
bouton de fonctionClicked () {
alert('le bouton a été cliqué');
>
bouton.addEventListener('clic', boutonClicked);
fonction timerComplete () {
alert('minuterie terminée');
>
setTimeout(timerComplete, 5000);

Lors du chargement du code Javascript, recherchez d'abord un bouton avec un identifiant appelé "clickMe", puis ajoutez un écouteur, puis définissez un délai d'attente. Attendez 5 secondes et une boîte de dialogue apparaîtra. Si vous actualisez la page et cliquez immédiatement sur le bouton clickMe, une boîte de dialogue apparaîtra. Si vous ne cliquez pas sur OK, la fonction timerComplete n'aura jamais la possibilité de s'exécuter.

Comment mettre à jour les liaisons

Bon, après avoir parlé de choses apparemment hors de propos, revenons au sujet. Comment Angular JS sait-il quand les données changent et que la page doit être mise à jour ? Le code a besoin de savoir quand les données ont été modifiées, mais il n'existe actuellement aucun moyen de notifier directement que les données d'un objet ont changé (bien qu'ECMAScript 5 tente de résoudre ce problème, il en est encore au stade expérimental). Les stratégies actuellement les plus courantes incluent les deux solutions suivantes. La première consiste à utiliser un objet spécial afin que toutes les données ne puissent être définies qu'en appelant la méthode de l'objet au lieu de la spécifier directement via la propriété. De cette façon, toutes les modifications pourront être enregistrées et vous saurez quand la page doit être mise à jour. L’inconvénient est que nous devons hériter d’un objet spécial. L'affectation ne peut être effectuée que via object.set('key', 'value') au lieu de object.key=value. Dans des frameworks comme EmberJS et KnockoutJS, cela se fait (même si je n'y ai jamais été exposé - embarrassant). L'autre est la méthode adoptée par Angular JS, qui vérifie s'il y a des modifications de données après l'exécution de chaque séquence d'exécution de code Javascript. Cela semble inefficace et peut même avoir un impact sérieux sur les performances. Cependant, Angular JS utilise des méthodes intelligentes pour résoudre ce problème (il n'a pas encore été étudié et ce n'est pas encore clair). L'avantage est que nous pouvons utiliser n'importe quel objet à volonté, qu'il n'y a aucune restriction sur la méthode d'affectation et que nous pouvons également détecter les changements dans les données.
Pour cette solution adoptée par angulaire JS, ce qui nous intéresse, c'est le moment où les données changent, et c'est là que scope.apply() s'avère utile. Vérifier si les données liées ont changé est réellement effectué par scope.digest(), mais nous n'appelons presque jamais cette méthode directement, mais appelons la méthode scope.apply() car dans scope Dans la méthode .apply(), elle appellera le méthode scope.digest(). La méthode scope.apply() prend une fonction ou une expression, l'exécute et appelle enfin la méthode scope.digest() pour mettre à jour les liaisons ou les observateurs.

Quand utiliser $apply()

C’est toujours la même question, quand doit-on appeler la méthode apply() ? La situation est très rare. En fait, presque tout notre code est enveloppé dans scope.apply(), comme ng-click, l'initialisation du contrôleur, la fonction de rappel http, etc. Dans ces cas, nous n'avons pas besoin de l'appeler nous-mêmes. En fait, nous ne pouvons pas l'appeler nous-mêmes, sinon l'appel de la méthode apply() à l'intérieur de la méthode apply() générera une erreur. Nous avons vraiment besoin de l'utiliser si nous devons exécuter le code dans une nouvelle séquence d'exécution, et si et seulement si cette nouvelle séquence d'exécution n'est pas créée par la méthode de la bibliothèque angulaire JS, nous devons à ce stade utiliser la portée pour le code. apply() enveloppé. Utilisons un exemple pour expliquer :

Copier le code Le code est le suivant :

{{message}}

Copier le code Le code est le suivant :

fonctionCtrl ($ scope) {
$scope.message ="Attente de 2000 ms pour la mise à jour"
setTimeout (fonction () {
​ ​$scope.message="Délai d'expiration appelé !";
// AngularJS ignore la mise à jour de $scope
}, 2000);
>

Une fois le code ci-dessus exécuté, la page affichera : En attente de 2000 ms pour la mise à jour. Apparemment, la mise à jour des données n'est pas remarquée par Angular JS.
Ensuite, nous modifions légèrement le code Javascript et l'enveloppons avec scope.apply().

Copier le code Le code est le suivant :

fonctionCtrl ($ scope) {
$scope.message ="Attente de 2000 ms pour la mise à jour"
setTimeout (fonction () {
​ ​$scope.$apply(function () {
​ ​ ​$scope.message="Délai d'expiration appelé !";
});
}, 2000);
>

La différence cette fois-ci est que la page affichera d'abord : En attente de 2000 ms pour la mise à jour. Après avoir attendu 2 secondes, le contenu sera modifié en : Timeout appelé !. Évidemment, la mise à jour des données est remarquée par angulaire JS.
REMARQUE : nous ne devrions pas faire cela, mais utiliser la méthode de délai d'attente fournie par angulaire JS, afin qu'elle soit automatiquement encapsulée avec la méthode d'application.

La science est une épée à double tranchant
Enfin, jetons un autre regard sur les méthodes scope.apply() et scope.apply(function) ! Bien qu'Angular JS ait fait beaucoup pour nous, nous avons également perdu certaines opportunités. Vous pouvez le constater en un coup d'œil grâce au pseudocode ci-dessous :

Copier le code Le code est le suivant :

fonction$appliquer(expr) {
essayez {
​​return$eval(expr);
} attraper(e) {
​​$exceptionHandler(e);
} enfin {
​​$root.$digest();
}
>

Il interceptera toutes les exceptions et ne les lancera plus. Enfin, la méthode $digest() sera appelée.

Pour résumer

La méthode $apply() peut exécuter des expressions JS angulaires en dehors du cadre angulaire, telles que des événements DOM, setTimeout, XHR ou d'autres bibliothèques tierces. Ce n'est que le début, l'eau est encore très profonde, tout le monde est invité à plonger profondément ensemble !