Z mojego doświadczenia większość studentów zna ten koncept. Jeśli niewiele wiesz, musisz wiedzieć, że przeglądarka wywoła zdarzenie onload podczas ładowania strony internetowej, a my zwykle używamy metody $(document).load() w window.onload lub jquery, aby zdefiniować, co strona powinna robić podczas ładowania.
W aplikacji tego typu wydarzenie jest bogatsze. Często trzeba coś zrobić dla użytkowników, zanim zobaczą stronę, najczęściej pobieranie danych z serwera; Albo zrób coś, gdy mają zostawić stronę.
1. Zrozumienie haczyka cyklu życia jonowego
Od Ionic 3.8.0 framework oferuje 8 funkcji hook, które są wyzwalane na różnych etapach cyklu życia strony.
1.1 ionViewDidLoad
Wyzwalacz zakończenia ładowania strony, tutaj "ładowanie zakończone", odnosi się do stanu strony, w którym wymagane zasoby zostały załadowane, ale nie weszły jeszcze w stan strony (użytkownik nadal widzi poprzednią stronę).
Warto zauważyć, że jest to bardzo arogancki hak, który zostanie wywołany tylko raz w całym procesie, czyli wywołany przy pierwszym wejściu na stronę, a potem, bez względu na to, jak wchodzisz i wychodzisz, będzie ona opuszczona i nieszczęśliwa. Chyba że wyłączysz jego tło i ponownie wejdziesz do programu (można też nacisnąć odświeżenie podczas debugowania strony).
Dlatego ten hak nadaje się do jednorazowego przetwarzania, na przykład pobierania danych użytkownika z serwera i przechowywania ich w pamięci podręcznej.
1.2 ionViewWillEnter
Dosłowne rozumienie to moment "wchodzę", kiedy strona zaczyna się przełączać. Możesz już teraz wstępnie przetworzyć dane ze strony i ten hak będzie wywoływany za każdym razem.
1.3 ionViewDidEnter
Gdy ten hak zostanie wywołany, użytkownik wszedł na nową stronę (strona jest aktywna) i będzie ona wywoływana za każdym razem.
A propos, muszę dodać, że nazywanie haków przez Ionic jest naprawdę przyjazne większości chińskich studentów i jeden rozwiązał, a drugi rozwiązał problem. W przeciwieństwie do niektórych efektownych (złych) frameworków poza domem, jest tu mnóstwo gotowych, zaktualizowanych, skompilowanych, destory itd., pamiętaj raz, zapomnij raz. (Oczywiście, to żart, nazewnictwo komponentów jest ściśle powiązane z mechanizmem działania frameworka)
1.4 ionViewWillLeave
Page Ready (właśnie do tego będzie) jest uruchamiane, gdy użytkownik właśnie nacisnął przycisk powrotu lub powiązane zdarzenie.
1.5 ionViewDidLeave
Wyzwalane po zakończeniu strony jest nieaktywne.
1.6 IonViewWillUnload
Wyzwala, gdy zasób na stronie ma zostać zniszczony – czy zgadujesz, że ten hak, podobnie jak ionViewDidLoad, zostanie wywołany tylko raz?
1.7 Testowanie
Weźmy stronę, którą stworzyliśmy w poprzedniej sekcji, i przeprowadźmy test ładowania haka.
W poprzedniej sekcji zaimplementowaliśmy proces przeskakiwania z HomePage na TestPage za pomocą przycisków, a teraz dodajemy powyższe sześć haków do TestPage i obserwujemy ich wywołanie przez konsolę.
Kod sekcji tematycznej strony wygląda następująco
Zwróć uwagę, że dodałem też testowe zdanie do konstruktora. Otwórz debugowanie Serve, kliknij przycisk, przejdź na TestPage i zobacz, co konsola generuje.
Pierwszy raz na papierze
Wróć na stronę główną i zobacz, co konsola generuje.
Opuszczenie strony po raz pierwszy
Ponownie wejdź i wyjdź z TestPage i obserwuj, co konsola generuje.
Drugie wejście i wyjście
Można wyciągnąć następujące wnioski:
- Konstruktor jest uruchamiany przed uruchomieniem ionViewDidLoad
- ionViewDidLoad uruchamia się tylko po wejściu na stronę
- ionViewWillUnload jest wyzwalany po każdym opuszczeniu strony
2. Są też dwa haki ochronne
Wspomniałem na początku, że Ionic oferuje 8 haków, podczas gdy ja wprowadziłem tylko 6. Pierwsze 6 haków ma wspólne cechy, a ich wartości zwrotne są wszystkie nieważne, czyli są wywoływane w odpowiednim momencie i nie zwracają żadnych informacji.
Pozostałe dwa hooki są trochę inne, to ionViewCanEnter i ionViewCanLeave, które mogą zwracać wartości booleańskie.
Słuchaj, właśnie mówiłem o czasach, a teraz opowiem o czasownikach modalnych. Jeśli pierwsze 6 haczyków jest pasywną odpowiedzią strony na wizytę użytkownika, to teraz strona ma świadomość, by pozwolić ci przyjść lub pozwolić odejść, ach, od teraz strona się nie zniesie!
Te dwa haczyki odgrywają większą rolę w kontroli władzy, a ostatnio pojawiło się bardzo modne określenie Strażnik – jak zrozumieć tę strażnicę, można ją zrozumieć jako strażnika społeczności, sympatycznego dyrektora szkoły oraz starego dropa 2333 z tysiącami pozycji w starożytnym budynku z kwiatami moreli.
Teraz, gdy już wiemy, że zwraca wartość boolowską, spróbujmy. Ponieważ w naszym programie nie ma logiki biznesowej, użyjmy tutaj API czasu do oceny
Dostęp do strony jest zablokowany
Podobnie, jeśli chcesz zostawić na stronie, a ionViewCanLeave zgłosi fałszywe, zostaniesz zablokowany.
Operacja powrotu zostaje przechwycona
Informacje drukowane na konsoli
3 Podsumowanie
Ahem, koniec z bzdurami, podsumowując, Ionic ma następujące haczyki cyklu życia
- ionViewDidLoad jest wywoływany po raz pierwszy, aby zwrócić void
- ionViewWillEnter zwraca void za każdym razem, gdy jest wywołany
- ionViewDidEnter zwraca void za każdym razem, gdy jest wywołany
- ionViewWillLeave zwraca void za każdym razem, gdy jest wywołany
- ionViewDidLeave zwraca nieważność za każdym razem, gdy zostanie wywołana
- ionViewWillUnload zwraca void za każdym razem, gdy jest wywoływane
- ionViewCanEnter zwraca wartość boolean za każdym razem, gdy jest wywołana
- ionViewCanLeave zwraca wartość boolean za każdym razem, gdy jest wywołana
|
Opublikowano 21.06.2018 10:30:06
|
|
|
|
