D’après mon expérience, la plupart des étudiants connaissent ce concept. Si vous ne savez pas grand-chose, alors vous devez savoir que le navigateur déclenchera un événement onload lorsqu’une page web est chargée, et nous utilisons généralement la méthode $(document).load() dans windows.onload ou jquery pour définir ce qu’une page web doit faire lorsqu’elle est chargée.
Dans une APP, ce type d’événement est plus riche. Souvent, il faut faire quelque chose pour les utilisateurs avant qu’ils ne voient la page, le plus courant étant de récupérer des données du serveur ; Ou faire quelque chose quand ils sont sur le point de quitter une page.
1. Comprendre le crochet du cycle de vie ionique
Depuis Ionic 3.8.0, le framework fournit 8 fonctions hook déclenchées à différents stades du cycle de vie de la page.
1.1 ionViewDidLoad
Le déclencheur de complétion du chargement de la page, ici « chargement terminé », fait référence à l’état de la page où les ressources requises ont été chargées, mais ne sont pas encore entrées dans l’état de la page (l’utilisateur voit toujours la page précédente).
Il faut noter qu’il s’agit d’un crochet très arrogant, qui ne sera appelé qu’une seule fois dans tout le processus, c’est-à-dire qu’il est appelé lors de la première entrée sur la page, et après cela, peu importe comment vous entrez ou sortez, elle sera déserte et misérable. À moins que vous ne coupiez son arrière-plan et ne rentriez le logiciel (il est aussi acceptable d’appuyer sur rafraîchissement pendant le débogage de la page web).
Par conséquent, ce crochet est adapté pour effectuer un traitement ponctuel, comme extraire les données utilisateur du serveur et les stocker dans le cache.
1.2 ionViewWillEnter
La compréhension littérale, c’est le moment où « j’arrive », quand la page commence à changer. Vous pouvez prétraiter les données de la page à ce stade, et ce hook sera appelé à chaque fois.
1.3 ionViewDidEnter
Lorsque ce crochet est déclenché, l’utilisateur a saisi une nouvelle page (la page est active), et elle sera appelée à chaque fois.
À ce propos, je dois intervenir : la façon dont Ionic nomme les accroches est vraiment favorable à la majorité des étudiants chinois, et l’un d’eux résoudra le problème. Contrairement à certains frameworks glamour (erronés) à l’extérieur, il y a plein de prêts, mises à jour, conformes, déstory, etc., se souviennent une fois et oublient une fois. (Bien sûr, c’est une blague, la dénomination des composants est étroitement liée au mécanisme de fonctionnement du framework)
1.4 ionViewWillLeave
Page Ready (sur le point d’être utilisé) se déclenche lorsque l’utilisateur vient de déclencher le bouton retour ou l’événement associé.
1.5 ionViewDidLeave
Déclenché lorsque la page est terminée, elle est inactive.
1.6 ionViewWillUnload
Se déclenche lorsqu’une ressource d’une page est sur le point d’être détruite, devineriez-vous que ce crochet, comme ionViewDidLoad, ne sera déclenché qu’une seule fois ?
1.7 Essais
Prenons la page que nous avons créée dans la section précédente et faisons un test sur le chargement du crochet.
Dans la section précédente, nous avons implémenté le processus de passage d’une page d’accueil à une page de test à l’aide de boutons, et maintenant nous ajoutons les six accroches ci-dessus à TestPage et observons leur invocation via la console.
Le code de la section thème de la page est le suivant
Notez que j’ai aussi ajouté une instruction test au constructeur. Ouvre le débogage de Serve, clique sur le bouton, va sur TestPage et observe ce que la console affiche.
Première fois sur la page
Retourne à la page d’accueil et observe ce que la console produit.
Quitter la page pour la première fois
Saisissez et sortez de la page de test et observez ce que la console affiche.
Deuxième entrée et sortie
Les conclusions suivantes peuvent être tirées :
- Le constructeur est déclenché avant ionViewDidLoad
- ionViewDidLoad ne s’active que lorsque vous entrez pour la première fois sur la page
- ionViewWillUnload est déclenché à chaque sortie de la page
2. Il y a aussi deux crochets de garde
J’ai mentionné au début qu’Ionic propose 8 crochets, alors que je n’en ai introduit que 6. Les 6 premiers crochets ont un point commun, et leurs valeurs de retour sont toutes nulles, c’est-à-dire qu’ils sont appelés au moment correspondant et ne renvoient aucune information.
Les deux autres accroches sont un peu différentes, ce sont ionViewCanEnter et ionViewCanLeave, qui peuvent renvoyer des booléens.
Écoutez, je viens de parler des temps, et maintenant je vais parler des verbes modaux. Si les 6 premiers accroches sont une réponse passive de la page à la visite de l’utilisateur, alors maintenant, la page a la conscience de vous permettre de venir ou de vous laisser partir, ah, la page est debout à partir de maintenant !
Ces deux crochets jouent un rôle plus important dans le contrôle de l’autorité, et récemment un terme très tendance appelé Garde : comment comprendre ce gardien, on peut le comprendre comme le gardien de la communauté, le directeur sympathique, et le vieux outarde 2333 avec des milliers de postures dans l’ancien bâtiment en fleurs d’abricot.
Maintenant que nous savons déjà qu’il renvoie une valeur booléenne, essayons. Comme il n’y a pas de logique métier dans notre programme, utilisons une API temporelle pour juger ici
L’accès à la page est bloqué
De même, si vous souhaitez laisser dans une page, si ionViewCanLeave restitue un faux, vous serez bloqué.
L’opération de retour est interceptée
Informations imprimées sur console
3 Résumé
Hum, plus de bêtises, pour résumer, Ionic propose les accrochages suivants du cycle de vie
- ionViewDidLoad est appelé la première fois à retourner void
- ionViewWillEnter renvoie le void à chaque appel
- ionViewDidEnter renvoie le void à chaque appel
- ionViewWillLeave renvoie le void à chaque fois qu’il est appelé
- ionViewDidLeave renvoie le vide à chaque appel
- ionViewWillUnload renvoie le void à chaque appel
- ionViewCanEnter renvoie booléen à chaque appel
- ionViewCanLeave renvoie un booléen à chaque appel
|
Publié sur 21/06/2018 10:30:06
|
|
|
|
