À propos de $apply et de l'utilisation optimisée dans Angularjs

Cet article vous présente principalement les informations pertinentes sur $apply et son utilisation optimisée dans Angularjs. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer ensemble

.

Avant-propos

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

Aujourd'hui, nous allons parler de la petite étoile $apply dans Angularjs. Lorsque nos données sont mises à jour, mais que la couche de visualisation ne répond pas, nous pouvons toujours entendre quelqu'un dire, utilisez apply. Ensuite, sans nous connaître, nous ajoutons $scope.$apply() après le code d'affectation, et nous sommes alors agréablement surpris de le découvrir. Oh, vraiment mis à jour.

Cependant, parfois, le compilateur vous reviendra impitoyablement

Erreur : $digest déjà en cours

Alors, quelles sont les causes de ces phénomènes ? Que fait exactement $apply ? Écoute-moi venir lentement.

1. Le rôle de $apply

La fonction $apply() peut créer des expressions dans le contexte angulaire depuis l'extérieur du Cadre angulaire Exécution interne.

Ce qui précède est une phrase du tutoriel AngularJs faisant autorité. Qu'est-ce que ça veut dire?

Tout d'abord, vous devez être conscient que la modification du modèle sous js natif ou sous des frameworks tiers peut ne pas déclencher de mises à jour de vues, comme les plug-ins setTimeout et jquery. Pourquoi? Parce qu'ils sont hors du contexte d'Angularjs, Angularjs ne peut pas surveiller les modifications des données. Voir des exemples.

1.setTimeout

html:

<p>{{name}}</p>

js:

$scope.name="张三";
setTimeout(function(){
$scope.name = '李四';
//$scope.$apply()
},500)

D'abord, le nom est égal à Zhang San. Après 500 ms, je l'ai attribué à Li Si, mais la page n'a pas changé, c'est toujours Zhang San.

Cependant, si nous lâchons $scope.$apply(), ce sera normal que Zhang San soit devenu Li Si avec succès.

2. Plugins tiers

html :

<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所选日期</header>
{{selectedDate}}
</p>

js :

$scope.selectedDate = '';
$( function() {
 $( "#datepicker" ).datepicker({
 onClose: function( selectedDate ) {
 $scope.selectedDate = selectedDate;
 // $scope.$apply();
 }
 });
} );

Il s'agit du plug-in jquery datepicker Lorsque nous sélectionnons la date, la date suivante devrait apparaître, mais maintenant ce n'est pas le cas. Dans ce cas, vous devez compter sur $apply() pour mettre à jour la vue.

Dans les deux cas ci-dessus, parce qu'ils ne sont pas dans le contexte Angularjs, les modifications des données ne peuvent pas être surveillées. Et qu'a fait exactement $apply pour que les données soient mises à jour normalement ?

En fait, $apply équivaut à un déclencheur. Sa fonction est de déclencher la boucle digest pour mettre à jour la vue.

Digest est le cœur d'Angularjs, qui implémente la liaison de données magique. Tout événement déclenché déclenchera certainement le cycle de résumé. Par exemple, nos événements numériques ng, click et change, déclenchent en fait le cycle de résumé.

Donc, ce que nous avons fait, c'est en fait déclencher le cycle de digestion manuellement. Concernant le cycle digest, c'est une digression, je ne le présenterai pas trop ici. Les étudiants qui souhaitent en savoir plus peuvent lire des livres ou Baidu.

2. Meilleure utilisation de la boucle de digestion

Dans Angularjs, en plus de $apply peut déclencher une boucle de digestion, il existe d'autres méthodes, celle-ci Une boucle peut également être déclenchée. Et $apply est souvent le pire choix. Certaines meilleures options sont recommandées ci-dessous.

1.$digest

$scope.$digest() est plus rapide que $apply car il ne met à jour que les valeurs de la portée actuelle et de la portée enfant, pour la portée parent L'heure du domaine est ignorée. Et $apply doit également évaluer la portée parent, ce qui consomme beaucoup de performances.

2.$timeout

Utilisez $timeout pour remplacer votre setTimeout $timeout est un service intégré d'Angularjs, qui est bien sûr plus adapté aux Angularjs. environnement. Cela déclenchera implicitement le cycle de résumé, retardera l'exécution et déclenchera le cycle de résumé l'instant suivant la fin du cycle de résumé précédent, de sorte que le

.

$digest already in progress

Nous mettons le code setTime dans $timeout

$timeout(function(){
$scope.name = '李四';
},500)

Cela fonctionnera normalement, voyez, plus d'application ennuyeuse !

3.$evalAsync

Cette méthode devrait être la plus recommandée. S'il y a un cycle de résumé en cours d'exécution, l'opération qui a provoqué le cycle de résumé sera alors placée dans le cycle de résumé en cours pour exécution. Le $timeout consiste à attendre que le cycle de résumé en cours soit terminé avant de réexécuter le cycle de résumé. Ainsi, evalAsync s'exécute plus rapidement et offre de meilleures performances. Nous pouvons l'appeler comme $timeout, c'est-à-dire

$scope.$evalAsync(
   function( $scope ) {
   console.log( "$evalAsync" );
   }
  );

Ce qui précède est tout ce que je veux dire aujourd'hui. Il y a encore de nombreux secrets et de meilleures méthodes d'utilisation cachées dans Angularjs. J'espère que vous pourrez les étudier en profondeur et partager de meilleurs articles.

Ce qui suit est le code exécutable, vous pouvez l'explorer : https://codepen.io/hanwolfxue/pen/yEZbYQ

Ce qui précède est l'intégralité du contenu de cet article, J'espère que cela sera utile à tout le monde. Apprendre est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'utilisation de base des instructions intégrées dans Angular4

Comment vider le cache du navigateur dans AngularJs

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!