Une brève analyse de l'abonnement à des événements asynchrones dans la détection de changement angulaire

Dans l'article précédent, nous avons présenté ce qu'est exactement la détection de changement, utilisé un exemple JS natif pour mieux comprendre la détection de changement et présenté les scénarios dans lesquels la détection de changement sera déclenchée. L'article précédent résumait 5 scénarios de travail courants, mais nous devons d'abord y réfléchir. La détection des changements d'Angular prend-elle en charge tous les événements asynchrones ? S'il est pris en charge, peut-il être répertorié ? Si certains ne sont pas pris en charge, lesquels ne le sont pas ? Ces questions seront expliquées en détail dans les articles suivants. [Recommandations du didacticiel associé : "Tutoriel angulaire"]

Comment s'abonner aux événements asynchrones

Tant qu'une opération asynchrone se produit, Angular effectuera la détection des changements. Alors, comment Angular s'abonne (perçoit-il) aux événements asynchrones ? En d’autres termes, comment Angular sait-il quand un événement asynchrone est exécuté ? Découvrons d’abord zone.js.

zone.js

zone.js fournit un mécanisme appelé zone pour encapsuler et intercepter les tâches asynchrones dans le navigateur. Il fournit également des hooks de cycle de vie asynchrone et un mécanisme unifié de gestion des erreurs asynchrones.

zone.js est corrigé pour intercepter les méthodes et éléments courants dans les navigateurs, tels que setTimeout et HTMLElement.prototype.onclick. Au démarrage d'Angular, il utilisera zone.js pour patcher plusieurs API de navigateur afin de capturer les événements asynchrones et d'appeler la détection des modifications après avoir capturé les événements.

package.jsonL'exemple suivant :

{
  "dependencies": {  
     ...
    "zone.js": "~0.10.2"
  }
}

Vous pouvez jeter un bref coup d'œil à zone.js.

Par exemple, dans la réactivité des données dans Vue2, nous savons tous qu'il utilise Object.defineProperty pour intercepter les modifications des données, mais il a de nombreux problèmes, il ne peut surveiller que les modifications de propriétés de l'objet, mais là. vous ne pouvez rien faire concernant les modifications apportées au tableau. Il existe 7 méthodes dans le prototype du tableau qui peuvent entraîner des modifications dans le tableau. Vue doit connaître ces méthodes. Comment les implémenter ? En prenant la méthode push comme exemple, vous devez écraser la méthode push d'origine et implémenter une nouvelle méthode push. La nouvelle méthode push doit conserver les fonctions de la méthode push d'origine et également notifier les dépendances à mettre à jour. L'implémentation dans

zone.js est la même que cette idée. Jetons un coup d'œil à un code simplifié pour simuler le processus de patch de setTimeout :

function setTimeoutPatch() {
  // 存储原始的setTimeout
  var originSetTimeout = window['setTimeout'];
  // 对浏览器原生方法的包裹封装
  window.setTimeout = function () {
      return global['zone']['setTimeout'].apply(global.zone, arguments);
  };
  // 创建包裹方法，提供给上面重写后的setTimeout使用
  Zone.prototype['setTimeout'] = function (fn, delay) {
    // 先调用原始方法
   originSetTimeout.apply(window, arguments);
   // 执行完原始方法后就可以做其他拦截后需要进行的操作了
   ...
  };
}

Avez-vous une compréhension des principes de base de zone.js ?

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!