Uit mijn ervaring kennen de meeste studenten dit concept. Als je niet veel weet, moet je weten dat de browser een onload-event zal activeren wanneer een webpagina wordt geladen, en we gebruiken meestal de $(document).load()-methode in window.onload of jquery om te definiëren wat een webpagina moet doen wanneer deze geladen is.
In een APP is dit soort evenement rijker. Vaak moet je iets doen voor gebruikers voordat ze de pagina zien, waarbij het meest voorkomend is het ophalen van data van de server; Of iets doen als ze op het punt staan een pagina te verlaten.
1. Begrijp de ionische levenscyclushaak
Vanaf Ionic 3.8.0 biedt het framework 8 hook-functies die op verschillende stadia van de paginalevenscyclus worden geactiveerd.
1.1 ionViewDidLoad
De trigger voor het voltooien van pagina-laad, hier verwijst "load complete" naar de status van de pagina waarin de benodigde bronnen zijn geladen, maar nog niet in de status van de pagina zijn geplaatst (de gebruiker ziet nog steeds de vorige pagina).
Het moet worden opgemerkt dat het een zeer arrogante haak is, die maar één keer in het hele proces wordt aangeroepen, dat wil zeggen, hij wordt aangeroepen wanneer je voor het eerst de pagina betreedt, en daarna, hoe je ook in- en uitgaat, zal het verlaten en ellendig zijn. Tenzij je de achtergrond uitschakelt en opnieuw in de software komt (het is ook prima om op verversen te drukken tijdens het debuggen van de webpagina).
Daarom is deze hook geschikt voor eenmalige verwerking, zoals het ophalen van gebruikersgegevens van de server en het opslaan in de cache.
1.2 ionViewWillEnter
Het letterlijke begrip is het moment "Ik kom binnen", wanneer de pagina gewoon begint te wisselen. Je kunt de gegevens van de pagina op dit punt vooraf verwerken, en deze hook wordt elke keer aangeroepen.
1.3 ionViewDidEnter
Wanneer deze hook wordt geactiveerd, heeft de gebruiker een nieuwe pagina ingevoerd (de pagina is actief), en deze wordt elke keer aangeroepen.
Over dit onderwerp gesproken, ik moet even ingrijpen: de naamgeving van hooks door Ionic is erg vriendelijk voor de meeste Chinese studenten, en één zal en één HEEFT het probleem opgelost. In tegenstelling tot sommige glamoureuze (verkeerde) frameworks buiten, zijn er een hoop ready-, update-, complete-, destory-, enzovoort-, herinner één keer en vergeet één keer. (Natuurlijk is dit een grap, de naamgeving van componenten hangt nauw samen met het werkingsmechanisme van het framework)
1.4 ionViewWillLeave
Page Ready (staat op het punt te doen) wordt geactiveerd wanneer de gebruiker net de terugknop of een gerelateerd evenement heeft geactiveerd.
1.5 ionViewDidLeave
Geactiveerd wanneer de pagina klaar is, is de pagina inactief.
1.6 ionViewWillUnload
Triggers wanneer een bron op een pagina op het punt staat vernietigd te worden, zou je denken dat deze hook, net als ionViewDidLoad, maar één keer wordt geactiveerd?
1.7 Testen
Laten we de pagina nemen die we in de vorige sectie maakten en een test doen over het laden van de haak.
In de vorige sectie hebben we het proces geïmplementeerd van het springen van HomePage naar TestPage met knoppen, en nu voegen we bovenstaande zes hooks toe aan TestPage en observeren we hun aanroep via de console.
De code van de paginathemasectie is als volgt
Let op dat ik ook een teststatement aan de constructor heb toegevoegd. Open Serve debugging, klik op de knop, ga naar TestPage en kijk wat de console uitgeeft.
Eerste keer op de pagina
Ga terug naar de startpagina en kijk wat de console uitgeeft.
Voor het eerst de pagina verlaten
Voer de Testpagina opnieuw in en verlaat hem en kijk wat de console uitvoert.
Tweede in- en uitkomst
De volgende conclusies kunnen worden getrokken:
- De constructor wordt geactiveerd vóór ionViewDidLoad
- ionViewDidLoad activeert alleen wanneer je de pagina voor het eerst betreedt
- ionViewWillUnload wordt geactiveerd na elke keer dat je de pagina verlaat
2. Er zijn ook twee guard hooks
Ik zei aan het begin dat Ionic 8 hooks biedt, terwijl ik er maar 6 introduceerde. De eerste 6 hooks hebben een gemeenheid, en hun retourwaarden zijn allemaal leeg, dat wil zeggen, ze worden op het overeenkomstige moment aangeroepen en geven geen informatie terug.
De andere twee hooks zijn iets anders, dat zijn ionViewCanEnter en ionViewCanLeave, die booleans kunnen teruggeven.
Kijk, ik heb het net over tijden gehad, en nu ga ik het hebben over modale werkwoorden. Als de eerste 6 hooks een passieve reactie van de pagina zijn op het bezoek van de gebruiker, dan heeft de pagina nu het bewustzijn om je toe te staan te komen of te laten gaan, ah, de pagina staat vanaf nu overeind!
Deze twee haken spelen een grotere rol in autoriteitscontrole, en onlangs is er een zeer trendy term genaamd Guard; hoe begrijp je deze guard, kun je hem begrijpen als de poortwachter van de gemeenschap, de vriendelijke schoolhoofd, en de oude trappe met duizenden houdingen in het oude gebouw van abrikozenbloesem.
Nu we al weten dat het een booleaanse waarde teruggeeft, laten we het proberen. Omdat er geen bedrijfslogica in ons programma zit, laten we hier een tijd-API gebruiken om te beoordelen
De toegang tot de pagina is geblokkeerd
Evenzo, als je een pagina wilt laten staan, word je geblokkeerd als ionViewCanLeave false teruggeeft.
De terugkeeroperatie wordt onderschept
Console-gedrukte informatie
3 Samenvatting
Ahem, geen onzin meer, samengevat heeft Ionic de volgende levenscyclus-hooks
- ionViewDidLoad wordt de eerste keer dat void wordt teruggegeven
- ionViewWillEnter keert void terug telkens wanneer het wordt aangeroepen
- ionViewDidEnter geeft void terug telkens wanneer het wordt aangeroepen
- ionViewWillLeave keert ongeldig terug telkens wanneer het wordt aangeroepen
- ionViewDidLeave keert void terug telkens wanneer het wordt aangeroepen
- ionViewWillUnload geeft void terug telkens wanneer het wordt aangeroepen
- ionViewCanEnter geeft boolean terug telkens wanneer het wordt aangeroepen
- ionViewCanLeave geeft boolean terug telkens wanneer het wordt aangeroepen
|
Geplaatst op 21-06-2018 10:30:06
|
|
|
|
